CSS Tips and Tricks

The CSS code provided here are examples only and provided without support. Your site may be configured differently. Examples may or may not work on some devices and may not follow best practices for accessibility. Please test accordingly.

Hiding Quiz Question Titles

To hide quiz question titles add the following to your global CSS

body.page-node-#### div.quiz-question-wrapper h2 {
display: none;
}

and replace #### with the node ID containing the quiz question.

Replacing Quiz Question Titles

body.page-node-#### div.quiz-question-wrapper h2:after {
content: 'REPLACEMENT TEXT';
 visibility: visible;
 position: absolute;
 top: 0;
 left: 0;
}

body.page-node-#### div.quiz-question-wrapper h2 {
 /* display: none; */
 visibility: hidden;
 position: relative;
}

and replace #### with the node ID containing the quiz question.

Changing main menu text color and background color

To change the main menu text color to white, add the following to your global CSS

#main-menu li a {color:#fff;}
#main-menu li a:hover {color:#fff;}

To remove borders from main menu links, add the following to your global CSS

#main-menu li a {border:0 !important;}

To remove the special styling of the main menu "active trail" link, add the following to your global CSS

#main-menu li a.active-trail {color:#fff;}
#main-menu li a.active-trail {margin-top:0;border:0;background-color:transparent;}

To remove the background gradient from the main menu, add the following to your global CSS

#navigation {background-image:none;}

To change the background color of the main menu to blue, add the following to your global CSS

#navigation {background-color:#267ccb;}

To change the background color of the main menu dropdown to blue, add the following to your global CSS

#navigation #main-menu li ul {background-color:#267ccb;}

Hiding course complete table listing course objects

.course-complete-items {display:none;}

Hide social media icons

.field-name-share {display: none;}

Hiding the learning group and other group's left column

body.og-context section.region.region-sidebar-first.column.sidebar {display: none;}
body.og-context div#content {width: 100%!important;}