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.

1 Hiding Quiz Question Titles
2 Replacing Quiz Question Titles
3 Changing main menu text color and background color
4 Add message to all pages (for example, alerts about planned site maintenance)
5 Hiding course complete table listing course objects
6 Hide social media icons
7 Hiding calendar links
8 Hiding the learning group and other group's left column
9 Hide the price on a course landing page
10 Hide the Take Course button
11 Hide the Accreditation statement on a course landing page
12 Hide the Accreditation tab on all course landing pages
13 Hide the Accreditation tab on a single course landing page
14 Hide the Accreditation Period on all course landing pages
15 Hide the Accreditation Period on a single course landing page
16 Remove grey table borders on course pages
17 Target a single page for a CSS rule
18 Widen the Attributes column in the cart
19 Hide the QTY column in the cart
20 Hide the cart icon
21 Hide the Sell Price search facet (in left sidebar)
22 Hide the Registration status facet (in left sidebar)
23 Hide the Cost column in most views
24 Hide Core Profile Field
25 Remove table borders
26 Display a message mimicking Drupal pdm alerts/warnings

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

#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, #header {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;}

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

#content:before {
    content: "Attention: We are aware of a problem with the display of certificates. An update will be posted when the issue is fixed.";
    text-transform: none!important;
    color: darkred;
    padding: 10px!important;
    width: 100%!important;
    position: relative;
    display: block;
}

Hiding course complete table listing course objects

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

Hide social media icons

#header .block-service-links {display:none;}

Hiding calendar links

To hide the calendar links until a learner is enrolled in the course.

.field-name-add-to-calendar {display:none;} 
.enrolled .field-name-add-to-calendar {display:block;}

Hiding the learning group and other group's left column

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

Hide the price on a course landing page

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

.page-node-#### .group-price, .page-node-#### .field-name-display-price {display:none;}

Hide the Take Course button

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

.page-node-#### .course-take-course-link-wrapper {display:none;}

Hide the Accreditation statement on a course landing page

.page-node-1260 .course-credit-ama .course-credit-description {display: none;}

Hide the Accreditation tab on all course landing pages

#content-area .resp-tabs-list li a.group-accreditation {display:none;}
#content-area .resp-accordion a.group-accreditation {display:none;}

Hide the Accreditation tab on a single course landing page

.page-node-#### #content-area .group-tabs .group-accreditation {display:none !important;}

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

Hide the Accreditation Period on all course landing pages

.node-course .group-accreditation-period {display:none;}

Hide the Accreditation Period on a single course landing page

.page-node-#### .node-course .group-accreditation-period {display:none;}

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

Remove grey table borders on couse landing pages

.node-type-course tbody {border:0;box-shadow:none;}

Remove grey table borders on course pages

.node-type-page tbody {border:0;box-shadow:none;}

Target a single page for a CSS rule

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

.page-node-#### h3.pane-title {display: none;}

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

Widen the Attributes column in the cart

#uc-cart-view-form .attributes {min-width:400px;}

Hide the QTY column in the cart

#uc-cart-view-form th:nth-child(4) {display:none !important;}
#uc-cart-view-form td.qty {display:none !important;}

Hide the cart icon

#uc-cart-link {display:none;}

Hide the Sell Price search facet (in left sidebar)

#block-facetapi-b91saswoacmhgyg5txfupyfo0mvoxnyz {display:none;}

Hide the Registration status facet (in left sidebar)

#block-facetapi-ecjmbmjnssifqt00lzuiks7ayzfdpa6o {display:none;}

Hide the Cost column in most views

.views-field-sell-price {display:none !important;}

Hide Core Profile Field

.field-name-insert machine name here {display:none;}

Remove table borders

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

<table class="noborder">...</table>

Display a message mimicking Drupal pdm alerts/warnings

Create a block with Full HTML text. In the source code, place the following html (note the two div tags includes a wrapper), with a customized message. The color is updated by changing the classes: pdm-status = green, pdm-warning = yellow, pdm-error = red

<div class="info messages" role="alert"><div class="pdm-status pdm-message-wrapper">Custom Message</div></div>

EthosCE LMS Documentation