Knowledgebase:
Changing icons on Widgets in the Student site's Home Tab | Adding background image to the login page
Posted by , Last modified by on 02 June 2014 04:46 PM
Adding background image to the login page
Here's the CSS to add a background to login page.
 
// sets login background to example-bg.png scaled to fit window.
.bgLoginLayout {
     background-image: url(example-bg.png) !important;
     background-repeat: no-repeat !important;
     background-size: 100% !important;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='example-bg.png', sizingMethod='scale');
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='example-bg.png', sizingMethod='scale')";
     margin-top: -5px;
}
Widget related style changes:

You can the make the changes via css in the style template in the Admin site - Communications - Content Templates section. Here is the related CSS for reference purposes:

From the Admin site go to : Communications – Content Templates – Style

Insert the following code. 

/* increase font size in widget header */
.ens-widget .x-panel-tl .x-panel-header {
     font: 22px Arial bold;
     padding: 7px 0px 0px 7px !important;
}
 
/* set widget heaader bg color */
.ens-widget .x-panel-tc {
     background-image: none;
     background-color: #882454;
     height: 40px !important;
}
.ens-widget .x-panel-tl, .ens-widget .x-panel-bl, .ens-widget .x-panel-br {
     background-image: none;
     background-color: #882454;
     border-bottom-color: #cccccc;
}
 
/* hide icons in widget headers */
.ens-widget .x-panel-icon {
     background-image: none !important;
     margin: 0px !important;
}
 
/* increase font size and set color to dark blue for all states on "links" in widgets like enrolled courseware */
.ens-widget .x-tree-node .x-tree-node-el a, .ens-widget .x-tree-node span, .ens-widget .customTree .x-tree-node-over a span {
     font: 14px Arial !important;
     color: #5E86B7 !important;
     text-decoration: none !important;
     padding: 0px;
}
.ens-widget .x-tree-node .x-tree-node-el {
     padding-top: 3px !important;
}
 
/* increase font size and set color to dark blue for all states on link in widgets like available courseware, also remove borders */
.ens-widget .x-grid3-cell-inner a {
     color: #5E86B7 !important;
     text-decoration: none;
     font: 14px Arial;
}
.ens-widget .x-grid3-row {
     border: 0;
}

 

The following method can be used to override specific widget icons.

Enter the following code to your CSS settings section. 

From the Admin site go to : Communications – Content Templates – Style

Insert the following code. 

.ens-widget .icon-certification {background-image: url(path_to_image) !important; }

 Eg: .ens-widget .icon-certification {

            background-image: url (http://images.netexam.com/images/10229/Learning_Portal_Icons-elearning1.png) !important; }

This would replace the icon for the widget that use the certification icon with the image specify in the  "path_to_image" section.

Note: Image size needs to be exactly 16x16.

The other icon classes that you could use to display custom images are:

.icon-news

.icon-welcome

.icon-course

.icon-messages

.icon-social-learning

.icon-learningplans

 

Tab icons:
 
/* Home tab */
#header-panel .icon-home {
background-image: url(path_to_image) !important;;
}
 
/* Group transcript tab */
#header-panel .icon-group-transcript {
background-image: url(path_to_image) !important;;
}
 
/* Training tab */
#header-panel .icon-edit {
background-image: url(path_to_image) !important;;
}
 
/* Messages tab */
#header-panel .icon-messages {
background-image: url(path_to_image) !important;;
}
 
/* Transcript tab */
#header-panel .icon-transcript {
background-image: url(path_to_image) !important;;
}
 
/* Calendar tab */
#header-panel .icon-calendar {
background-image: url(path_to_image) !important;;
}
 
/* Profile tab */
#header-panel .icon-profile {
background-image: url(path_to_image) !important;;
}
 
 
Exam buttons:
 
/* first question button */
button.x-tbar-page-first {
background-image: url(path_to_image) !important;
}
 
/* previous question button */
button.x-tbar-page-prev {
background-image: url(path_to_image) !important;
}
 
/* next question button */
button.x-tbar-page-next {
background-image: url(path_to_image) !important;
}
 
/* complete & grade button (only appears on last question) */
button.icon-grade-exam {
background-image: url(path_to_image) !important;
}
 
/* last question button */
button.x-tbar-page-last {
background-image: url(path_to_image) !important;
}
(11 vote(s))
Helpful
Not helpful