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;
}