Guidance On Modifying Cascading Style Sheets – uPerform On-Premise Manuals

You can modify the .css files to incorporate your corporate standards (for example, font and color scheme).

NOTE:

A complete tutorial on modifying cascading style sheets is beyond the scope of this manual. Several books and websites discuss this topic in detail. In particular, the World Wide Web Consortium (W3C) provides helpful information at http://www.w3.org.

The following table provides general guidance on performing common customization tasks in the style sheets.

If You Want To	Go To	Modify
Customize the placement of the Continue button on assessment stencils	The assessment section of the content.css file.	div#assessmentButtons to set the text alignment and background. div#assessmentButtons input[type=button] to set the borders and background of all the assessment buttons. input#btnContinue, input#btnRetry, input#btnReset, input#btnShowMe and input#btnSkipSim to set border, color and text alignment of each respective button individually.
Override or replace images displayed in the course menu	The menu section of the skin.css file.	div#courseImage to set the image URL for the course icon. div#menuHereImage to set the image URL for the menu here icon. div#menuVisitedImage to set the image URL for the menu visited icon. div#menuMinusImage to set the image URL for the menu minus icon. div#menuPlusImage to set the image URL for the menu plus icon. div#menuAssessmentImage to set the image URL for the menu assessment icon. div#assessmentPassedImage to set the image URL for the assessment passed icon. div#postAssessmentPassedImage to set the image URL for the post assessment passed icon. div#postAssessmentImage to set the image URL for the post assessment icon. div#menuBranchImage to set the image URL for the menu branch icon. div#menuBranchChoiceImage to set the image URL for the menu branch choice icon. div#branchConnectorImage to set the image URL for the branch connector icon. div#singleBranchImage to set the image URL for the single branch icon. div#extendBranchImage to set the image URL for the extend branch icon.
Modify the username prompt in courses and simulations	The user name prompt page section of the skin.css file.	body.uiPromptPageBackground to set the background of the prompt page. td.uiPromptBackground to set the image URL or background of the prompt box. div#titleTextDiv to set the text color, text alignment and font of the title. div.uiPromptText to set the text color, text alignment and font of the prompt text.
Customize the loading page in courses, simulations, and guided help	The loading section of the skin.css file.	div#LoadingMessage to set the background color of the loading page. div#LoadingMessage div#loadingText to set the color and text alignment. div#loadingImage to set the logo dimensions and URL.