LMS Style Guide

You can customize the overall look and feel of your LMS by editing or adding Cascading Style Sheet files (*.css files). The best practice is to copy and save the original Stylesheet code to Notepad or other text editor so that you can revert to the original if necessary. 

  1. From the left navigation menu, select Site Management > Edit Stylesheets.
  2. On the Edit Stylesheets page, use the Stylesheet File drop-down list to select the stylesheet you wish to edit. Most of the commonly customized settings are found in the default stylesheet file. Simply edit color codes and remove the block comment syntax to apply changes.
  3. Click Submit to save changes.

NOTE: If you do not see the changes you implemented in the stylesheet and you are certain that your syntax is correct, try clearing your browser cache and refreshing the browser.

LMS Style Guide

/* Default Stylesheet */
/* Branding: change #ffffff to desired header color */
/*
.navbar-bg,
div#headerContainer 
{ background-color:#ffffff;border-bottom-color:#ffffff; }
*/

/* Branding: change #ffffff to desired footer color */
/*
div#footer{ background-color:#ffffff; }
*/

/* Branding: change #ffffff to desired background color */
/*
body{ background-color:#ffffff; }
div#wrapper{ background-color:#ffffff; }
*/

/* Branding: change #727272 to desired link color */
/*
div.list-item-container .list-item .list-item-name > a,
a:link { color: #727272;}
*/

/* Branding: change #7088B4 to desired link state visited, hover, active color */
/*
div.list-item-container .list-item .list-item-name > a:visited, 
div.list-item-container .list-item .list-item-name > a:hover, 
div.list-item-container .list-item .list-item-name > a:active,
a:visited,a:hover, a:active { color:#7088B4 }
*/

/*List Headers*/
/*Branding: change #337ab7 to desired background color*/
/*.hTableHeader,
.list-header-container .row,
.content-panel > .content-panel-heading {
    background-color: #337ab7;
    color: #fff;
}*/

/*Action Buttons*/
/*Branding: change #2d71b3 to desired background color*/
/*.prettyButtons,a.prettyButtons,a.prettyButtons:link,.actionLinkVertical,a.actionLinkVertical,a.actionLinkVertical:link,.actionLink,a.actionLink,a.actionLink:link,
.btn-primary, .btn-primary:link {
    background-color: #2d71b3;
    border-color: #204d74;
    color:#fff;
} */

    /*Branding: change #2c7fb2 to desired background for hover state color*/
/*.prettyButtons:hover, a.prettyButtons:hover, .actionLinkVertical:hover, a.actionLinkVertical:hover, .actionLink:hover, a.actionLink:hover,
    .btn-primary:visited, .btn-primary:hover, .btn-primary[disabled]:hover, .btn-primary:active, .btn-primary:focus,
    .btn-primary:active:hover, .btn-primary:hover:focus, .btn-primary:active:focus {
        background-color: #2c7fb2;
        border-color: #204d74;
        color:#fff;
    }*/

/* uncomment below css to hide the custom Quick Links menu*/
div#ctlTemplate_regLeftNav_ctlMenuFooter_custom_Left_Nav
{ /*display: none;*/ }