CSS Customizations

Site user interface can be customized using Site Admin->Placements->V2 CSS.

Example 1 (Colors)

This example shows how to override the color of various elements

/* the background shade color in default CMS generated home page */

.top-demo-header {
background: url("/oltpublish/v2/images/teaser-bg.png") repeat scroll center top #FEB5B5;
}

/* normal state of Success (normally green button) & Primary buttons (normally blue button) */
.btn-primary, .btn-success{
background-color: #CF4C28;
border-color: #CF4C28;
}

/* hover state of Success (normally green button) & Primary buttons (normally blue button) */
.btn-primary:hover, .btn-success:hover{
background-color: #F9564A;border-color: #CF4C28;
}

/* all states of Success button (normally green button) */
.btn-success.active, .btn-success:active, .btn-success:focus, .btn-success:hover, .open .dropdown-toggle.btn-success{
background-color: #F9564A;border-color: #CF4C28;
}

/* Icon (font-awesome) color (normally blue) */
.fa{
color: #CF4C28;
}

/* Icon (font-awesome) color inside button */
.btn-primary .fa, .btn-success .fa{
color: #ffffff
}
/* Icon (font-awesome) color inside Left navigation menu */
nav .fa{
color: #000000
}
/* Active tab top border color (normally blue) */
.nav-tabs > li.active > a {
box-shadow: 0px -2px 0px #EF5E5E;
}
/* course player content area background, normally grey */
#eb-cp-wrp .panel-body{background-color:#FFDBD8 !important}
/* course player header/footer area background (normally grey), text-color (normally black) */
#eb-cp-header,#eb-cp-footer{background-color:#D13A2D !important; color:#ffffff !important}
/* course player footer text-color (normally black) */

Home Page with Customized Colors

Catalog Page with Customized Colors

Course Player with Customized Colors

Example 2 (Changing colors to Green)

/* Home page default banner background */

.top-demo-header { background: url("/oltpublish/v2/images/teaser-bg.png") repeat scroll center top #618059; }

/* Button colors */

.btn-primary, .btn-success{ background-color: #618059; border-color: #618059; }

.btn-primary:hover, .btn-success:hover{ background-color: #618059;border-color: #33542A; } .btn-success.active, .btn-success:active, .btn-success:focus, .btn-success:hover, .open .dropdown-toggle.btn-success{ background-color: #618059;border-color: #33542A; }

/* Icon colors */

.fa{ color: #618059; } .btn-primary .fa, .btn-success .fa, nav .fa{ color: #ffffff } nav .fa{ color: #000000 }

/* Tab colors */

.nav-tabs > li.active > a { box-shadow: 0px -2px 0px #618059; }

/* course player colors */

#eb-cp-wrp .panel-body{background-color:#98B590 !important}

#eb-cp-header,#eb-cp-footer{background-color:#A0B79A !important; color:#ffffff !important}

#eb-cp-footer a{color:#ffffff !important}

/* Give same background to Logo and header */

#header, #extr-page #header, #logo-group{background-color:#618059 !important}

/* Footer background */

.page-footer{background-color:#474544 !important}

Example 3 (Header / Logo size)

In this example, we are going to show how to increase the height of header / logo region to accomodate a bigger logo. Also another significant point shown in this example is how to work with varying browser/device widths. E.g. for small screen devices, we would like to keep default header/logo sizes. This is done using CSS media queries.

/* Give same background to Logo and header */
#header, #extr-page #header, #logo-group{background-color:#618059 !important}
/* Set logo margin to 0 */
#logo{margin-left:0px}
/* For computer screens (width >= 1024 pixels) increase the header height to 160 pixels (change height as per you need) */
@media screen and (min-width: 1024px) {
    #header , #extr-page #header, #logo-group>span, #header > div {
        height:160px !important;
    }
    #logo img, #extr-page #logo1 img {width:auto !important; height:160px !important}
    #header{padding:0px !important}
    #header > div {text-align:center}
    span#logo, span#logo1{width:100% !important}
    #left-panel{padding-top:160px}
}

Header with increased height

Header on small screen

Example 4 (Customizing Test Widget - Background Color, Font)

/********** Take Test First Screen **********/
#testDiv, .tShell{background-color: #79CDCD !important}

#testDiv, .tShell {
  background-color: #79CDCD !important;
  font-size: 18px !important;
  font-family: "arial" !important;
}

/*** Test page buttons color ****/
#testDiv .btn-default {background-color:#2B4F6E !important;
color:#FFF !important}

/*********** Test Widget Header and Footer color **********/
.tShell .tTop, .tShell .tBottom {background-color: #79CDCD !important;
  border-bottom: 2px solid #2B4F6E;}

/***********   Question - Top and bottom color **********/
.tShell .questionBody {
  background-color:  #add8dd !important;
   }

/******** Setting font size and family for questions area ****/
.tShell .questionBody {
  font-size: 18px !important;
  font-family: "arial" !important;
}

/**** question area background color ****/
.tShell .tMiddle {background-color: #E0EEEE !important; }
.tShell .questionCounter {background-color: #E0EEEE !important; }

/**** Info panel / timer panel background color ****/
.tShell .questionInfoPanel {
  background-color: #E0EEEE !important;
  background-image: none;
}

/*** Background color for - Choice level, Text and selection area ****/
.tShell .questionSelectionControl, .tShell .choiceLabel, .tShell .choiceText {background-color: #d9f6f9  !important; }

/*** Background color choice text, level and selection area hover ****/
.tShell .choiceLabel:hover, .tShell .questionSelectionControl:hover , .tShell .choiceText:hover {background-color: #FFFFCC  !important; }

Test Widget on small screen

Test Result Page

Example 5 (Login Info section - showing user full name)

In login info section by default user's fname is displayed. using css that can be changed to show fullname ( firstaname lastname) or username.

Add below lines in placement - V2 CSS to show user's fullname

/* Show user full name in login-info section */

span.eb-username-prompt-fname {display: none !important; }
span.eb-username-prompt-fullname {display: inline-block !important }

Default view -

Customized view - showing full name

Rating:

CSS Customizations