Creator Tool
      Back to home
      1. Help Center
      2. Creator Tool

      All About Custom CSS

      This article will show everything you need to know about designing your content using Custom CSS.

      Cascading Style Sheet (CSS) describes how HTML elements will be displayed on a screen, paper, or other media. If you’re modifying colors, font types, font sizes, images, element positioning, and more, CSS is the tool for the job!

       

      COURSE ELEMENTS

      WORKAROUNDS

      TEMPLATE SPECIFIC ELEMENTS

       

      CSS ANATOMY   CSS Anatomy

      © Screenshot from Codeacademy

      Always double-check if no curly bracket or semicolon is missing, as it could make other CSS syntax, not work.

       

      💡 COURSE ELEMENTS 💡

      Below are selectors and rulesets for the general elements across a course. Be guided by using these colors:

      root { 

      --main-color:#223042; /* dark blue / 

      --accent-color:#00BAFF; / light blue*/ 

      }

      TEMPLATE

      RULESET 

      All Buttons

      		 
       btn.btn { 

      }

      Solid Buttons

      		 
       .btn.btn-solid { 

      }

      Progress Bar

      		 
       #indicator { 

      background-color:var(--main-color); 

      color:var(--accent-color); 

      }

      Page Counter

      		 
      #lesson-header-nav { 

      background: var(--main-color); 

      color:white; 

      }

      Menu Button

      		 
       #lesson-header-nav-menu-btn { 

      }

      Top Block Header

      		 
       #lesson-header { 

      background: white; 

      }

      Lesson Title & Line at the Top

      		 
      #lesson-header-title-content { 

      color: white; 

      border-bottom: 3px solid white; /* line at the top */ 

      }

      Line at the Bottom

      		 
       #slides { 

      border-bottom: 1px solid white; 

      }

      Selected Buttons for all Quiz Templates

      		 
       .selectable.active .btn { 

      }

      Answer Box

      		 
       #slide-answer { 

      }

      Continue Button in

      Answer Box

      		 
       #slide-answer-continue { 

      }

      General Font for the entire course
       
      #slides-view { 

      font-family: 'Poppins', sans-serif; 

      }

      Headings

      		 
      h1, h2, h3, h4, h5 { 

      }

      List Bullet Points

      		 
      li::before { 

      color:var(--accent-color); 

      }

      ‘OK, I’m ready!’ Button

      		 
      btn.btn-solid.play-game { 

      }

      Exit Button

      		 
      .slide-exit .btn.btn-solid.slide-up { 

      }

       

      🛠️ WORKAROUNDS 🛠️

      Below are some workarounds for the common irksome behaviors we encounter in the day-to-day.

      Template

      Ruleset 
      • Sequence and Vertical Series

      Arrow up in Sequence and Vertical Series hitting the block header.

       
      • Sequence
      .slide-text-sequence .btn-up { 

      top: 2em; 

      }
      • Vertical Series
      .slide-image-slider .btn-up { 

      top: 2em; 

      }
      You may adjust the value according to your liking.
      • Image Slider 

      The Bottom caption box hits the arrow down.


      		 
      .slide-image-slider .caption.position-bottom { 

      bottom: 3.75em; 


      }

       
      • Expandable List

      A box around the active symbol in Expandable List due to the brand inheritance/color scheme.
       
      .slide-expandable-list .item.active .item-button:after {

      background: transparent; 

      }

       
      • YouTube Template

      Broken thumbnail in YouTube template


       
      • No thumbnail, just black
      .slide-youtube-video-embed .yt-thumb { 

      visibility: hidden; 

      }
      • Set one thumbnail for all YouTube slides
      .slide-youtube-video-embed .yt-thumb { 

      content: url(https://media-public.canva.com/MADQ5L5rh4E/1/thumbnail_large-1.jpg) 

      }

      Choose one image that will be used for all the YouTube slides. Make sure it’s hosted from a secured website.
      • Bulleted/Numbered List in Sequence template

      Inconsistent indention of the bulleted list and numbered list in Sequence.


       
      • Bulleted List
      .slide-text-sequence .text-center ul { 

      display: block; 

      }
      • Numbered List
      .slide-text-sequence .text-center ol { 

      display: block; 

      }
      • “Number 1”
      .slide-text-sequence ol.md-list>li:before { 

      margin: 0 -1.2em; color: black; 

      }
      • Scrolling Mix

      Inconsistent indention and color of “Number 1” in the Scrolling Mix.


       
       
      .slide-scrolling-media ol.md-list>li:before { 

      margin: 0 -1.2em; color: black; 

      }

       
      • Scrolling Mix

      Bullet points in Scrolling Mix are being cut.

       
      		 
      .slide-scrolling-media ul.md-list { 

      padding: 0.5em; 

      }

      By default, bullet points are working fine. This happens when the imported font is added in the custom CSS, wherein it’s not possible for us to get rid of.

      • Make the background stay

        still
      #slides-background { 
      transition-timing-function: unset!important; 

      transition-duration: unset!important; 

      transform: unset!important; 

      }

      • Change the texts in Words Templates from uppercase to normal

      Add the following property and value to the corresponding selector of the template:

      text-transform: none;

      • Remove the lesson title in the block header
      #lesson-header-title-content { 
      content-visibility: hidden; 

      }

       

      🔎 TEMPLATE-SPECIFIC ELEMENTS 🔍

      TEACH  ✏️ 



       

       

      TEXT TEMPLATES

      Below are selectors and rulesets for the Text Templates for TEACH. Be guided by following these colors:

      root { --main-color:#223042; /* dark blue */ 

      --accent-color:#00BAFF; /* light blue*/ 

      }

      Template

      Ruleset
      • Sequence
      • Arrow Up 
      .slide-text-sequence .btn-up {

      background: var(--main-color); 

      }
      • Arrow Down
      .slide-text-sequence .btn-down { 

      background: var(--main-color); 

      }
      • Arrows when hovered
      .slide-text-sequence .btn-down:hover, .slide-text-sequence .btn-up:hover { 

      background: var(--accent-color); 

      }

      By default, the arrow up and down buttons follow the value of the colors set in .btn.btn. It’s up to you to change them, like what the codes above display.
      • Expandable List
      • Item (not hovered)
      .slide-expandable-list .btn.btn-solid { 

      background: var(--accent-color); 

      color: white; 

      }
      • Hovered Item
      .slide-expandable-list .btn.btn-solid:hover { 

      background: #39A7E5; 

      }
      • Selected Item
      .slide-expandable-list .item.active .item-button { 

      background: #39A7E5; color: white; 

      }
      • Content
      .slide-expandable-list .item.active .item-content { 

      background: rgba(0, 186, 255, .2); color: black; 

      }
      • The (+) sign
      .slide-expandable-list .item-button:after { 

      color: white; 

      }
      • The (-) sign
      .slide-expandable-list .item.active .item-button:after { 

      color: white; background: transparent; 

      }

      Due to the brand inheritance, a box following what’s set in the color scheme surrounds the symbol. As a workaround, add a background: transparent.
      • Reveal
       
      • Block
      .btn-reveal-title.btn.btn-solid.flippable { 

      background: var(--accent-color); 

      }
      • Block when flipped
      .slide-reveal .btn-reveal.active .btn-reveal-desc.flippable { 

      background: var(--main-color); 

      border-radius: 0px; 

      }

      By default, the block's radius will follow the value set in .btn.btn.solid. Unless you declare a different value to change it. Refer to the codes above to see the difference.
      • Quote

       
      • Speech Bubble (Dark)
      .slide-speech-bubble .quote.quote-dk .quote-bg { 

      background: var(--main-color); opacity: 1; 

      }
      • Text in Speech Bubble (Dark)
      .slide-speech-bubble .quote.quote-dk { 

      color: white; 

      }
      • Left Tail or Pointer (Dark)
      .slide-speech-bubble .quote.pull-left.quote-dk:after { 

      border-color: var(--main-color) transparent transparent; 

      }
      • Right Tail or Pointer (Dark)
      .slide-speech-bubble .quote.pull-right.quote-dk:after { 

      border-color: var(--main-color) transparent transparent; 

      }

       

       

       



      • Speech Bubble (Light)
      .slide-speech-bubble .quote.quote-lt .quote-bg { 

      background: var(--accent-color); 

      opacity: 1; 

      }
      • Text in Speech Bubble (Light)
      .slide-speech-bubble .quote.quote-lt { 

      color: white; 

      }
      • Left Tail or Pointer (Light)
      .slide-speech-bubble .quote.pull-left.quote-lt:after { 

      border-color: var(--accent-color) transparent transparent; 

      }
      • Right Tail or Pointer (Light)
      .slide-speech-bubble .quote.pull-right.quote-lt:after { 

      border-color: #00BAFF transparent transparent; 

      }
      • Bulleted List
       
      • Bullet Points
      .slide-list ::marker { 

      color: var(--accent-color); 

      }
      • Table
       
      • Table Row (Odd)
      .slide-table .table-row:nth-child(odd) { 
      background: var(--main-color); 

      color: white; 

      }
      • Table Row (Even)
      .slide-table .table-row:nth-child(even) { 

      background: var(--accent-color); 

      color: white; 

      }

      IMAGE TEMPLATES

      Below are selectors and rulesets for the Image Templates for TEACH. Be guided by following these colors:

      root { --main-color:#223042; /* dark blue / 

      --accent-color:#00BAFF; / light blue*/ 

      }

      Template

      Ruleset
      • Vertical Series

      Caption Box (Default)

      .slide-image-slider .style-default .caption-content { 

      color:white; 

      border-radius: 4px; 

      }

      Caption Box (Dark)

      .slide-image-slider .style-dark .caption-content { 

      background: #223042; 

      color: white; 

      border-radius: 4px; 

      }

      Caption Box (Light)

      .slide-image-slider .style-light .caption-content { 

      background: #00BAFF; 

      color: white; 

      border-radius: 4px; 

      }

      Button Up

      .slide-image-slider .btn-up { 
      background: #223042; 

      }

      Button Down

      .slide-image-slider .btn-down { 

      background: #223042; 

      }

      Buttons Up and Down when hovered

      .slide-image-slider .btn-down:hover, .slide-image-slider .btn-up:hover { 

      background: #00BAFF; 

      }

      Arrow Up

      .icon-chevron-up:before { 

      }

      Arrow Down

      .icon-chevron-down:before { 

      }
      • Horizontal Series

      Page when visited

      .slide-image-gallery .pagination .dot.active { 

      }

      Page when not visited

      .slide-image-gallery .pagination .dot { 

      }
      • Image Collection

      Block

      .slide-image-collection .tappy-child { 

      }

      Block when visited

      .slide-image-collection .tappy.visited .tappy-child { 

      }
      • Comparison
      • Bar
      .slide-comparison .slider-knob { 

      }
      • Knob (top)
      .slide-comparison .slider-knob:before { 

      }
      • Knob (bottom)
      .slide-comparison .slider-knob:after { 

      }
      • Container
      .slide-comparison .slider { 

      }
      • Scratch to Reveal
      • Replay Button
      .slide-scratch-to-reveal.state-touched .btn-replay { 

      }
      • Image Map
      • Waypoint (White)
      .slide-image-map.waypoint-white .waypoint { 

      }
      • Waypoint (Black) 
      .slide-image-map.waypoint-black .waypoint { 

      }
      • Waypoint when visited
      .slide-image-map.is-loaded .waypoint.tapped { 

      }
      • Waypoint box color and thicknes
        .slide-image-map.waypoint-black .waypoint {

        }
      • Image Waypoints
      • Circle Waypoint
      .slide-image-waypoints.guided-false .waypoint:after {
      }
      • Circle Waypoint when tapped
      .slide-image-waypoints.guided-false .waypoint.tapped:after {
      }
      • Shadow
      .slide-image-waypoints.waypoint-white .waypoint:before { 

      }
      • Shadow when hovered
      .slide-image-waypoints.waypoint-white .waypoint:hover:before { 

      }
      • Shadow when tapped
      .slide-image-waypoints.waypoint-white .waypoint:hover:before { 

      }
      • Image Waypoints (Guided)
      • Previous and Next Button
      .slide-image-waypoints .prev-wp, .slide-image-waypoints .next-wp {
      }
      • Previous Arrow
      .icon-chevron-left:before { 

      }
      • Next Arrow
      .icon-chevron-right:before { 

      }
      • Scrolling Mix
      • Zoom Icon
      .slide-scrolling-media.image-focus-true .multi-content-wrapper-image:after { 

      }
      • Image Container
      .slide-scrolling-media img.multi-content { 

      }
      • Single Image
      • Compose
      .slide-image .img-compose { 

      }
      • Background when zoomed
      .pswp__item { 

      }

      This code also applies when you click and zoom an image on Scrolling Mix.
      • Media Collection
      • Block
      .slide-media-collection .tappy .tappy-child { 

      }
      • Block when visited
      .slide-media-collection .tappy.visited .tappy-child { 

      }

      VIDEO TEMPLATES

      Below are selectors and rulesets for the Video Templates for TEACH. Be guided by using these colors:

      root { 

      --main-color:#223042; /* dark blue / 

      --accent-color:#00BAFF; / light blue*/ 

      }

      Template

      Ruleset
      • Single Video
      • Background
      .video-js .vjs-tech { 
      background: white; 

      }
      • Play Button
      .video-js .vjs-big-play-button { 

      background: rgba(51,51,51,.7); 

      }
      • Play Icon
      .video-js .vjs-big-play-button:before { 

      }
      • Video Collection
      • Block
      .slide-video-collection .tappy-child.dark:before { 

      }
      • Block when visited
      .slide-video-collection .tappy.visited .tappy-child { 

      }
      • Title
      .slide-video-collection .thumb-content { 

      }
      • YouTube
      • Play Button
      .video-play, .video-replay { 

      }
      • Play Button when clicked
      .video-play.__active, .video-replay.__active { 

      }
      • Play Icon
      .video-play:before, .video-replay:before { 

      }
      • Thumbnail
      .slide-youtube-video-embed .yt-thumb { 

      }
      • Vimeo
      The Play Button and Icon used on YouTube are the same as the Vimeo template
      • Thumbnail
      .vimeo-thumb.content-ver {
      content: url(Add-URL-here);
      }


      • QUIZ 📚 


      MULTIPLE CHOICE TEMPLATES 

      Below are selectors and rulesets for the Multiple Choice Templates for QUIZ. Be guided by using these colors:

      root { 

      --main-color:#223042; /* dark blue / 

      --accent-color:#00BAFF; / light blue*/ 

      }
       

      Template

      Ruleset
      • Multiple Choice
      • Selected Answer
      .slide-multiple-choice-game .selectable.active .btn { 

      }
      • Correct Answer
      .slide-multiple-choice-game.state-complete .selectable.correct .btn { 

      }
      • Incorrect Answer
      .slide-multiple-choice-game.state-complete .selectable.incorrect .btn { 

      }
      • Radio Button
      .slide-multiple-choice-game .selectable .btn:before { 

      }
      • Selected Radio Button
      .slide-multiple-choice-game .selectable.active .btn:before { 

      }
      • Radio Button Input
      .slide-multiple-choice-game .selectable.active .btn:after { 

      }
      • Box around the answers
      .slide-multiple-choice-game .block-dk { 

      }
      • Circle the Answer
      • Block when an answer is selected
      .slide-circle-the-answer .circle-box.active .circle-box-text { 

      }
      • Incorrect Answer
      .slide-circle-the-answer.state-complete .circle-box.active.incorrect { 

      }
      • Chat
      • Left Speech Bubble (Question)
      .slide-chat .message--question { 

      }
      • The tail of the Left Speech Bubble
      .slide-chat .message--question:after { 

      }
      • Right Speech Bubbles (Choices)
      .slide-chat.show-msg-true .selectable { 

      }
      • The tail of Right Speech Bubbles
      .slide-chat.show-msg-true .selectable:after { 

      }
      • Selected Answer
      .slide-chat.show-msg-true .selectable.active { 

      }
      • The tail of the Selected Answer
      .slide-chat.show-msg-true .selectable.active:after { 

      }
      • Correct Answer
      .slide-chat.state-complete .chat-msg.correct { 

      }
      • The tail of the Correct Answer
      .slide-chat.state-complete .chat-msg.correct:after { 

      }
      • Incorrect Answer
      .slide-chat.state-complete .chat-msg.incorrect { 

      }
      • The tail of the Incorrect Answer
      .slide-chat.state-complete .chat-msg.incorrect:after { 

      }
      • Multi-question
      • Selected Answer
      .slide-matrix.game-slide .selectable.active .btn { 

      }
      • Box around the answers
      .slide-matrix.game-slide .block-dk { 

      }
      • Radio Button
      .slide-matrix.game-slide .selectable .btn:before { 

      }
      • Selected Radio Button
      .slide-matrix.game-slide .selectable.active .btn:before { 

      }
      • Radio Button Input
      .slide-matrix.game-slide .selectable.active .btn:after { 

      }
      • Categorize
      • Selected Answer
      .slide-categorise .droppy.active .droppy-child { 

      }
      • Correct Answer
      .slide-categorise.state-complete .droppy-true.active .droppy-child { 

      }
      • Incorrect Answer
      .slide-categorise.state-complete .droppy-false.active .droppy-child { 

      }
      • Answer Text
      .slide-categorise .btn-text { 

      }
      • True or False Text
      .slide-categorise .droppy { 

      }
      • Answer Boxes
      .slide-categorise .droppy-child.block-dk.text-center.text-lg.slide-left, .slide-categorise .droppy-child.block-dk.text-center.text-lg.slide-right { 

      }
      • Select Image
      • Selected Answer
      .slide-image-multiple-choice .tappy.active { 

      }
      • Correct Answer
      .slide-image-multiple-choice.state-complete .tappy.correct { 

      }
      • Incorrect Answer
      .slide-image-multiple-choice.state-complete .tappy.incorrect.active { 

      }
      • Radio Button
      .slide-image-multiple-choice .tappy-selection { 

      }
      • Selected Radio Button
      .slide-image-multiple-choice .tappy.active .tappy-selection { 

      }
      • Radio Button Input
      .slide-image-multiple-choice .tappy.active .tappy-selection:after { 

      }
      • Carousel
      • Box around the answer
      .slide-carousel .block-dk { 

      }
      • Line linking the answers
      .slide-carousel .carousel-item:before { 

      }
      • Page when visited
      .slide-carousel .pagination .page.active { 

      }
      • Page when not visited
      .slide-carousel .pagination .page { 

      }

       

       

      NUMBER TEMPLATES 

      Below are selectors and rulesets for the Number Templates for QUIZ. Be guided by following these colors:

      root { 

      --main-color:#223042; /* dark blue / 

      --accent-color:#00BAFF; / light blue*/ 

      }

      Template

      Ruleset 
      • Dial
      • Ring
      .slide-dial .dial-ring { 

      }
      • Knob
      .slide-dial .dial-knob { 

      }
      • Speech Bubble (Value)
      .slide-dial.dial-knob-value{

      }
      • Tail of Speech Bubble
      .slide-dial .dial-knob-value:after { 

      }
      • Dial (Distribution)
      • Ring
      .slide-dial-distribution .dial-ring { 

      }
      • Knob
      .slide-dial-distribution .dial-knob { 

      }
      • Speech Bubble (Value)
      .slide-dial-distribution.dial-knob-value{

      }
      • Tail of Speech Bubble
      .slide-dial-distribution .dial-knob-value:after { 

      }
      • Pie Chart
      • Ring
      .slide-pie-chart .pie-ring { 

      }

      The color to be set here should have an adjusted opacity. Do not use full solid color.

      • Text Value
      .slide-pie-chart .pie-ring-value { 

      }
      • Ratio
      • Bar
      .slide-ratio .ratio-bar { 

      }
      • Bar (Container)
      .slide-ratio .ratio-bar-container { 

      }
      • Value
      .slide-ratio .ratio-value-amount { 

      }
      • Slider
      • Knob
      .slide-slider .slider-knob { 

      }
      • Slider Bar
      .slide-slider .slider-bar { 

      }
      • Lines in the bar
      .slide-slider .slider-notch:before, .slide-slider .slider-notch:after { 

      }
      • Speech Bubble (Value)
      .slide-slider .slider-knob-value { 

      }
      • Tail of Speech Bubble
      .slide-slider .slider-knob-value:after { 

      }

       

      WORDS TEMPLATES 

      Below are selectors and rulesets for the Words Templates for QUIZ. Be guided by following these colors:

      root { 

      --main-color:#223042; /* dark blue / 

      --accent-color:#00BAFF; / light blue*/ 

      }

      Template

      Ruleset 
      • Missing Words
      • Text
      .slide-missing-word .fade-in { 

      text-transform: lowercase; 

      }

      Use the above code if your texts are in uppercase, and you want to change it to lowercase.

      • Word Blocks
      .slide-missing-word .draggy { 

      }
      • Box around the answers
      .slide-missing-word .block-dk { 

      }
      • Strike Out
      • Text
      .slide-strikeout .fade-in { 

      }
      • Missing Letters
      • Text
      .slide-construct .statement { 

      }
      • Letters
      .slide-construct.game-playing .letter { 

      }
      • Box around the letters
      .slide-construct .block-dk { 

      }
      • Sentence Builder
      • Placeholder
      .slide-construct-sentence .droppy-container { 

      }
      • Words
      .slide-construct-sentence .draggy .btn { 

      }
      • Box around the words
      .slide-construct-sentence .block-dk { 

      }

       

       

      MATCH TEMPLATES

      Below are selectors and rulesets for the Match Templates for QUIZ. Be guided by following these colors:

      root { 

      --main-color:#223042; /* dark blue / 

      --accent-color:#00BAFF; / light blue*/ 

      }

      Template

       

      Ruleset

       
      • Connect
      • Blocks
      .slide-connect .connect-box { 

      }
      • Blocks when clicked
      .slide-connect .connect-box.active { 

      }
      • Blocks when connected
      .slide-connect .connect-box.complete { 

      }
      • Drag to Match
      • Boxes (Left)
      .slide-drag-to-match .draggies .block-dk { 

      }
      • Boxes (Right)
      .slide-drag-to-match .droppy-zone { 

      }
      • Reorder
      • Icon
      .slide-reorder.ready .draggy .btn:before { 

      }
      • Box around the answers
      .slide-reorder.ready .draggy-container { 

      }
      • Blocks
      .slide-reorder.ready .btn.btn-solid.btn-block { 

      }
      • Image Pairs
      • Boxes
      .slide-image-pair .image-container { 

      }
      • Connecting Lines
      .slide-image-pair .image-container.left:after, .slide-image-pair .image-container.right:after { 

      }
      • Select in Order
      • Boxes
      .slide-tap-in-order .tappy-child { 

      }
      • Radio Button
      .slide-tap-in-order .tappy.active .number { 

      }

       

       

      ENGAGE 🎮3c6846e9-5567-4b6b-acd3-63b4a4688e9b


      GAMES TEMPLATES

      Below are selectors and rulesets for the Games Templates for ENGAGE. Be guided by using these colors:

      root { 

      --main-color:#223042; /* dark blue / 

      --accent-color:#00BAFF; / light blue*/ 

      }

      Template

      Ruleset
      • Left or Right
      • Answer Box
      .slide-game-true-or-false .game-statement { 

      }
      • Left Side
      .slide-game-true-or-false .game-false { 

      }
      • Right Side
      .slide-game-true-or-false .game-true { 

      }
      • Left Side when box is dragged
      .slide-game-true-or-false .game-false.active { 

      }
      • Right Side when box is dragged
      .slide-game-true-or-false .game-true.active { 

      }
      • Image/Word Match
      • Choices
      .slide-game-image-word-match .btn-word { 

      }
      • Choices when clicked
      .slide-game-image-word-match .btn-word.__active { 

      }
      • Text
      .slide-game-image-word-match .multi-content-text { 

      }
      • Enlarge Image
      .slide-game-image-word-match .match-image-container { 

      height:unset; 

      }
      • Memory
      • Tiles
      .slide-game-memory .btn.btn-solid { 

      }
      • Tiles when hovered
      .slide-game-memory .btn.btn-solid:hover { 

      }
      • Letter Jumble
      • Block Footer
      .slide-game-jumble .jumble-letters { 

      }
      • Letters (Choices)
      .slide-game-jumble .draggy .letter { 

      }
      • Letter when dragged
      .slide-game-jumble .draggy.active .letter { 

      }
      • Letter when placed
      .slide-game-jumble .draggy.active-pos.is-positioned .letter { 

      }
      • Displayed Letters
      .slide-game-jumble.active .letter { 

      }
      • Find-a-word
      • Container
      .slide-find-a-word .grid-container { 

      }
      • Completed Word
      .slide-find-a-word .grid-highlight.complete { 

      }
      • Next in Order
      • Block Footer
      .slide-game-next-in-order .next-options { 

      }
      • Container Block
      .slide-game-next-in-order .next-sequence.block-dk.block-sm { 

      }
      • Elevator
      • Container Block
      .slide-game-elevator .block-dk.content-fill { 

      }
      • Choices
      .slide-game-elevator .direction-column { 

      }
      • Jeopardy
      • Boxes
      .slide-game-jeopardy .block-md.block-dk { 

      }
      • Title
      .slide-game-jeopardy .game-category-title { 

      }


      FEEDBACK TEMPLATES

      Below are selectors and rulesets for the Feedback Templates for ENGAGE. Be guided by using these colors:

      root { 

      --main-color:#223042; /* dark blue / 

      --accent-color:#00BAFF; / light blue*/ 

      }

      Template

       

      Ruleset

       
      • Free Text
      • Input Button
      .icon.icon-pencil { 

      }
      • Pencil Icon
      .icon-pencil:before { 

      }
      • “Type your response”
      #text-input-view #text-input-prompt { 

      }
      • Slider
      • Knob
      .active.slide-slider-survey .slider-knob-input { 

      }
      • Slider Bar
      .slide-slider-survey .slider-bar { 

      }
      • Lines in the bar
      .slide-slider-survey .slider-notch:before, .slide-slider-survey .slider-notch:after { 

      }
      • Speech Bubble (Value)
      .slide-slider-survey .slider-knob-value { 

      }
      • Tail of Speech Bubble
      .slide-slider-survey .slider-knob-value:after { 

      }
      • Strongly Disagree & Strongly Agree
      .slide-slider-survey .slider-label-min, .slide-slider-survey .slider-label-max { 

      }
      • Tail on Speech Bubble of Strongly Disagree & Strongly Agree
      .slide-slider-survey .slider-label-min:after, .slide-slider-survey .slider-label-max:after { 

      }
      • Survey
      • Choices 
      .slide-multiple-choice-survey .btn.btn-solid { 

      }
      • Radio Button
      .slide-multiple-choice-survey .selectable .btn:before { 

      }
      • Selected Radio Button
      .slide-multiple-choice-survey .selectable.active .btn:before { 

      }
      • Radio Button Input
      .slide-multiple-choice-survey .selectable.active .btn:after { 

      }
      • Quadrant
      • Choices
      .slide-quadrant-survey .btn.btn-solid { 

      }
      • All Quadrants
      .slide-quadrant-survey .slide-content .quadrant .quadrant-zone { 

      }
      • Quadrant 1 (Upper Left)
      .slide-quadrant-survey .slide-content .quadrant .quadrant-zone:nth-child(1) { 

      }
      • Quadrant 2 (Upper Right)
      .slide-quadrant-survey .slide-content .quadrant .quadrant-zone:nth-child(2) { 

      }
      • Quadrant 3 (Lower Left)
      .slide-quadrant-survey .slide-content .quadrant .quadrant-zone:nth-child(3) { 

      }
      • Quadrant 4 (Lower Right)
      .slide-quadrant-survey .slide-content .quadrant .quadrant-zone:nth-child(4) { 

      }

       

      :clipboard: Reference Websites

      Learn more about CSS: CSS Tutorial

      CSS Gradient: CSS Gradient — Generator, Maker, and Background

      CSS Shapes: CSS Clip-Path Generator - CSS Portal

      Introduction to CSS Course:   Learn CSS