A cascading style sheet (CSS) file allows you to maintain centralized settings for formatting options (for example, font and font size) in one file for use by multiple HTML files. The application uses CSS files to control the display of the end user website. The CSS files are stored on the application server in the \WWW\[MyCustomSkinSite]\style folder.
Before making changes to CSS files, you must create a custom folder. For more information, refer to Creating a Custom Website Folder.
Guidance on Modifying Cascading Style Sheets
The application includes three CSS files:
- InfoPakContent.css: Controls the display of Info Pak content presented to the user.
- uPerformEndUser.css: Controls the display of website pages presented to the user and contains the icon definitions.
- uPerformEndUserDocument.css: Controls styles on the document page.
You can modify these 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 logo and other elements in the top banner of the website
|
The titleBar section of the CSS file.
|
#titleBar to set the dimensions, background color, and image URL for the banner.
#titleBarLogo to set the logo dimensions and URL.
#titleBarNav to set the remaining banner image and dimension options.
#titleBarNav #searchGo to style the Search Go button.
#titleBarNav #P1 to style the Search text input box.
|
|
Change the background color in the content area of the website
|
The body tag and #contentWrapper style in the end user CSS file.
|
body tag to specify font, color, and background.
#contentWrapper to specify height and background.
|
|
Modify the colors used in the left navigation bar of the website
|
The navBar and navBarToggle sections in the CSS file.
|
navBar to specify the overall display of the left navigation bar and to set the font size and font color on header tags within the navigation bar.
.commandbarToggleBtnShow and .commandbarToggleBtnHide to modify the toggle button itself and the width of the navigation bar.
Styles that include 'Links' in the name control the display of buttons, including the color and graphic.
|
Branding Website Features
Branding changes and many website customizations can be applied to website skins 02, 03, and 04 using the custom.css stylesheet. Custom.css will allow you to update logos, icons, and the website color scheme. Many of these customizations are already listed within the file ready to be enabled. This stylesheet is not overwritten during upgrade, meaning your website functionality will be upgraded automatically and your branding changes will remain in place. For this reason, we recommend making changes within an existing skin using custom.css whenever possible. If you are performing more extensive customizations which require changes to the XSL files, we recommend creating a custom website skin to ensure your customizations are not lost. On upgrade you may need to upgrade your custom website skin in this case. Please refer to the release notes regarding website upgrades.