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