Add CSS in Themes

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;
}