Community Page for sharing lessons learned when using Add CSS in Theme Designer

The Add CSS feature in Theme Designer can significantly extend your design options. But, beware, it is an advanced feature and you should have at least some basic working knowledge of bootstrap and CSS. 

As part of the user community please add your thoughts, ideas, examples, etc to the comments and then I will move that info into the article section.

Attachments

 

The CSS Border Icon PDF above is from Matt Senay. He shared how he uses the Add CSS feature to modify the look of the answer options in a multiple choice question. The same code is pasted below as text.

/*REMOVE FEEDBACK BORDER*/
.pageElementsWrapper.question-option-color-default.question-option-style-transparent .multiChoiceCorrectResponse .input-group 
{
    border:none !important;
}

/*POSITION FEEDBACK TO THE LEFT*/
.dki-multiChoiceOption-element .dki-element-content:after, .dki-multiChoiceOption-element .dki-element-content:before 
{ 
    left: 0px;
    margin-left:5px;
    margin-top: -15px !important;
}

/*COLOR FEEDBACK BACKGROUND*/
.dki-multiChoiceOption-element .dki-element-content:before
{
    color: #fff !important;
}

/*REMOVE BACKGROUND COLOR AND BORDER FROM INPUT BOXES*/
/*CHECKBOX BACKGROUND*/
.pageElementsWrapper.question-option-style-default .input-group 
{
    background-color:transparent !important;
}
.claro-authoring .pageElementsWrapper.question-option-style-default .input-group
{
    background-color: rgba(0,0,0,0.5) !important;
    border: 1px solid #FFF;
}
/*TEXT FIELD BACKGROUND*/
.pageElementsWrapper.question-option-style-default .input-group-addon
{
    border-color:transparent !important;
}
/*BORDER*/
.pageElementsWrapper.question-option-style-default .dki-question-option label, .dki-inlineQuestion-element.question-option-style-default .dki-question-option label 
{
    background-color:transparent !important;
    border: none;
}
/*DROP SHADOW ADDED TO TEXT FIELD*/
.form-control
{
    box-shadow:none !important;
}

/*ROUNDED FEEDBACK BOXES WITH BORDER*/
/*CORRECT*/
.dki-multiChoiceOption-element .multiChoiceCorrectResponse .input-group .input-group-addon
{
    border: 1px white solid !important;
    border-radius: 5px;
}
.dki-multiChoiceOption-element .multiChoiceCorrectResponse:not(.correct) .input-group .input-group-addon {
    background-color:transparent !important;
}
/*INCORRECT*/
.dki-multiChoiceOption-element .incorrect .input-group .input-group-addon {
    background-color: #e62222;
    border: 1px solid white !important;
    border-radius: 5px !important;
}

/*FEEDBACK CHANGES FOR 1ST ICON SET*/
.dki-multiChoiceOption-element .correct .dki-element-content:after, .dki-multiChoiceOption-element .incorrect .dki-element-content:after 
{
    border-radius: 15px;
    color:#333 !important;
}

/*FEEDBACK MODAL HEADER*/
.popup.danger:not(.fill) .modal-header .modal-title:before, .popup.warning:not(.fill) .modal-header .modal-title:before, .popup.success:not(.fill) .modal-header .modal-title:before 
{
    font-family: 'FontAwesome';
    padding: 0px 6px 1px 6px;
    border: 3px solid white;
    border-radius: 30px;
    position: absolute;
    top: 5px;
    left: 15px;
    font-size: 28px;
}

.popup.danger:not(.fill) .modal-header .modal-title:before, .popup.warning:not(.fill) .modal-header .modal-title:before
{
    content:'\f00d';
}
.popup.success:not(.fill) .modal-header .modal-title:before 
{
    content:'\f00c';
}

.dki-multiChoiceOption-element .multiChoiceCorrectResponse .dki-question-option:after
{
    content: '\f058';
    color:#FFF;
}

.dki-multiChoiceOption-element .multiChoiceCorrectResponse:not(.correct) .dki-question-option:before
{
    content: '\f111';
    font-size:24px;
    color:#333 !important;
}
  0     0

Similar Projects

Questions  ( 2 )

  • 1
     Asked 7 months ago    prabha10   Edited5 months ago    189   |   6  
    Any tips for adding this? Just tried using Add CSS in theme designer, ran into character limitation. Edit: just checked it, and it's actually not exceeding 3000 characters. Hmm...
      Answers ( 1 )

    • 1
       Answered 4 months ago    prabha10      189   |   6  
      Stripped out all the blank characters to fix. Also change "Claro" in this code to "Flow" if you are using Flow... (seemed to help but might have just been luck, not sure if it matters).
  • 0
     Asked 5 months ago    prabha10      189   |   6  
    What version of Bootstrap are you guys running?
      Answers ( 1 )

    • 1
       Answered 4 months ago    prabha10      189   |   6  
      Bootstrap 3