/
Learning Group CSS Template
Learning Group CSS Template
**5/8/23 - This CSS Template was created prior to the flat theme and may need to be adjusted accordingly for it to look correct. See https://gocadmium.atlassian.net/browse/ECE-4064 for a related issue.
The template provided below can be used to override the colors and logo of a learning group.
/* Basic links */
a {color:blue;}
/* Logo */
#logo img {display:none;}
#header-inner {height:75px;background-color:white;background-position:center left;background-repeat:no-repeat;background-image:url('https://www.ethosce.com/wp-content/uploads/2017/05/ethos.flat_.svg') !important;}
/* Header background */
#header {background-color:white;background-image:none;}
/* Main menu background */
#navigation {background-color:black;background-image:none;}
/* Main menu background mouseover */
#navigation #main-menu li ul,
#main-menu > ul > li:hover,
#main-menu > ul > li > a:hover,
#main-menu > ul > li > a.active-trail
{background-color:white;}
/* Main menu text */
#main-menu li a {color:white;}
/* Main menu text mouseover */
#main-menu li:hover,
#main-menu li:hover a,
#main-menu li a:hover,
#main-menu li a.active-trail,
#main-menu li.expanded:hover > a:after
{color:black;}
/* Main menu dropdowns */
#main-menu li li a {color:black;}
/* Headers */
h1, h2, h3, h4, h5, legend, .field-label, table caption,
.order-review-table .pane-title-row,
.user-profile .field-name-profile-email,
.group-credits .course-credit-title,
.page-node-course-complete .course-flow-body-title
{color:black;}
/* Borders */
#header, #footer,
.item-list .pager li.pager-next a,
.item-list .pager li.pager-previous a,
.view-ethosce-calendar .date-nav-wrapper .pager li a
{border-color:black;}
#tabs-container .tabs-primary li a.is-active,
.horizontal-tabs ul.horizontal-tabs-list li.selected a,
.resp-tabs-list .resp-tab-active a,
#tabs-container .tabs-primary li a.is-active:hover,
.horizontal-tabs ul.horizontal-tabs-list li.selected a:hover,
.resp-tabs-list .resp-tab-active a:hover,
#main-menu li a.active-trail
{border-top-color:black;}
/* Buttons and rollovers */
input[type="submit"], .action-link a, .more-link a, .course-take-course-link,
#pre-req-courses .item-content .right a, #course-outline li .item-details .item-btn,
#block-course-navigation #course-nav li a,
#content-area .quiz-start-link, #content-area .quiz-back-link, #content-area .answer-sheet-link,
.view-ethosce-calendar .date-nav-wrapper .pager li a, .quiz-retake-link,
div.course-flow-body-title, #course-outline h3.main-header,
.panel-pane .pane-title, #block-course-navigation .block-title,
.item-list .pager li.pager-next a,
.item-list .pager li.pager-previous a,
#tabs-container .tabs-primary li a:hover,
.horizontal-tabs ul.horizontal-tabs-list li a:hover,
#tabs-container .tabs-secondary li a.is-active,
#tabs-container .tabs-secondary li a.is-active:hover,
#course-outline li.completed .item-header .progress span,
#course-outline li.in-progress .item-header .progress span,
.calendar-calendar .week-view .full div.single-day div.weekview,
.calendar-calendar .day-view .full div.single-day div.dayview
{background-color:black;border-color:black;}
#main-menu li.expanded > a:hover:after, #main-menu li.expanded > a.active-trail:after,
#course-outline .course-outline-list li#complete a:before,
#content-area .ds-1col.node-course .field-type-fivestar .star.on a:after,
#content-area .ds-1col.node-course .field-type-fivestar .star .on:after
{color:black;}
#ethosce-footer-callout {border-color:black;}
/* Course tabs */
#content-area .resp-tabs-list li a:hover,
#content-area .resp-tabs-list li a.group-register
{background-color:black;}
#content-area .resp-tabs-list li.resp-tab-active a {border-top-color:black !important;}
#content-area .resp-tabs-list li.resp-tab-active a:hover {background-color:transparent;}
/* Accent */
div.course-flow-body-title, #course-outline h3.main-header,
.panel-pane .pane-title, #block-course-navigation .block-title
{border-bottom-color:grey;}
/* Secondary headers */
div.course-flow-body-title, .group-right .group-course-summary legend,
#content-area thead th, .course-relationships-tree-header,
#course-outline h3.main-header, .panel-pane .pane-title,
#content-area .responsive-calendar .weekdays li,
#block-course-navigation .block-title,
.course-nav-return-menu-wrapper ul li
{background-color:darkgrey;}
/* Secondary accent */
.group-right .group-course-summary .fieldset-wrapper {border-top-color:grey;}
/* Footer */
#footer {background-color:darkgrey;color:white;}
#footer a {color:white;}
Related content
CSS Tips and Tricks
CSS Tips and Tricks
More like this
Learning Group Course Catalogs
Learning Group Course Catalogs
Read with this
Creating a Learning Group
Creating a Learning Group
More like this
Credit Calculator
Credit Calculator
Read with this
Set up unique menu items per learning group
Set up unique menu items per learning group
More like this
On-Demand Training Courses & Access Codes
On-Demand Training Courses & Access Codes
Read with this