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

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

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

Replacing Quiz Question Titles

.page-node-#### div.quiz-question-wrapper h2:after { content: 'REPLACEMENT TEXT'; visibility: visible; position: absolute; top: 0; left: 0; } .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

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

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

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

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

Add message to all pages (for example, alerts about planned site maintenance)

Hiding course complete table listing course objects


Hide social media icons


Hiding the learning group and other group's left column

Hide the price on a course landing page

Replace #### with the node id of the appropriate course.

Hide the Take Course button 

Replace #### with the node id of the appropriate course.

Hide the Accreditation tab on all course landing pages

Hide the Accreditation tab on a single course landing page

Replace #### with the node ID of the course.

Hide the Accreditation Period on all course landing pages

Hide the Accreditation Period on a single course landing page

Replace #### with the node ID of the course.

Remove grey table borders on couse landing pages

Remove grey table borders on course pages 

Target a single page for a CSS rule

In this sample, the h3. pane-title will be not be displayed on the specified node.

and replace #### with the node ID of the page.

Widen the Attributes column in the cart

Hide the QTY column in the cart

Hide the cart icon

Hide the Sell Price search facet (in left sidebar)

Hide the Registration status facet (in left sidebar)

Hide the Cost column in most views

Remove table borders

This is done inline when editing content rather than as global CSS.