SysAdmins are encouraged to create their own cascading stylesheets (*.css) and to upload them as custom schemes to be used by any organization on their system.

Creating a Custom Scheme

To create and test a custom scheme:

  1. Sign on with a SysAdmin account.
  2. Click the Schemes link to list schemes and Preview the schemes.
  3. Click the Open This Scheme button next to the scheme similar to the look you wish to achieve.
  4. Create a new text file on your desktop and rename it myscheme.css.
  5. Copy the Stylesheet Code from the Scheme Profile into your new stylesheet and save it.
  6. Make changes to the stylesheet on the desktop and save. See Recognized Styles below for a list of css styles you can change to achieve the look you want.
  7. From the Scheme list, press the Add Scheme link, browse to the stylesheet on the desktop, give it a name and upload it.
  8. From the Scheme list, Preview your new scheme...and repeat from Step 6 as needed.

Recognized Styles

This section describes the css styles that you may edit to change the look of a scheme. If a style does not appear in your scheme's css, you may add it.

Style

Description

#maintable

ID of the main table that contains the content of each web page. This can be useful for putting a border around the content, or making it a different background color than the rest of the page, for example.

.sectiontitle

Sub-titles of content sections. Specify a font COLOR for this style.

.userhead

Color of the Search box background and the user bar at the top of the page that contains My Account and Sign Out. Specify a BACKGROUND-COLOR for this style.

Note: Use #userbar to designate a separate color for the top user bar.

a.userhead:link

Color of the links in the user head section. Use of COLOR is required.

a.userhead:visited

Should be identical to a.userhead:link.

a.userhead:active

Should be identical to a.userhead:link.

a.userhead:hover

Should be identical to a.userhead:link.

#userbar

Color of the user bar at the top of the page that contains My Account and Sign Out.

#userbar > td

Color of the borders at the top and bottom of the user bar at the top of the page. Specify BORDER-TOP and BORDER-BOTTOM properties.

Example:

{border-top:solid 1px #8CC63F; border-bottom:solid 1px #8CC63F}

.listrow1

Odd rows in tables. Specify only a BACKGROUND-COLOR for this style.

.listrow2

Even rows in tables. Specify only a BACKGROUND-COLOR for this style.

.texttiny

Table headers, some table information. Should be similar to .textsmall.

.textsmall

Used for most standard text.

.textnormal

Despite its name, used by larger-than-normal text.

.textbig

Very large text. Should be similar to .textnormal.

.userinput

The font color and size used in user input boxes and drop-down lists. Should be similar to .textsmall.

.userinputarea

Text areas. Should be IDENTICAL to .userinput.

.pageheadingimage

Shows or hides legacy icons. See also Brand.

.bulletimage

Shows or hides organization bullets. See also Brand.

BODY

Document body. Use of at least BACKGROUND-COLOR is encouraged.

a:link

Color of links. Use of COLOR is required.

a:visited

Color of visited links. Specify a font COLOR.

a:active, a: hover

Color of links when your mouse hovers over them. Specify a font COLOR.

#signonsubmitcontainer .button.signonbutton

Color of the sign on button on the Sign On page. Specify a BACKGROUND-COLOR and font COLOR.

You must also add !important to the code.

Example:

#signonsubmitcontainer .button.signonbutton {background-color:red !important;}

#signonsubmitcontainer .button.signonbutton:hover

Color of the sign on button on the Sign On page when your mouse hovers over it. Specify a BACKGROUND-COLOR and font COLOR.

You must also add !important to the code.

Example:

#signonsubmitcontainer .button.signonbutton:hover {background-color:blue !important;}

#signonauthcontainer

Color of the sign on box. Specify a BACKGROUND-COLOR and BORDER.

.signoncontainer a:link

Style of links on sign on page. Specify a font COLOR and TEXT DECORATION.

a.alert:link

Color used by "HOT" links (i.e. locked out users). Use of COLOR is required. It is recommended that you keep this font COLOR red.

a.alert:visited

Should be identical to a.alert:link.

a.alert:active

Should be identical to a.alert:link.

a.alert:hover

Should be identical to a.alert:link.

.button

Standard button style. Specify a BACKGROUND-COLOR and font COLOR.

.btnPrimary

Color of primary buttons like Save, OK, Upload, Download, Send. Specify a BACKGROUND-COLOR and font COLOR.

.btnSecondary

Color of secondary buttons like Cancel, No, buttons that do not implement an immediate action, or buttons of tertiary importance. Specify a BACKGROUND-COLOR and font COLOR.

.tab.selectedtab

The color of the selected left navigation menu item. Specify a BACKGROUND-COLOR and a font COLOR.

.tab a

The color of the left navigation menu buttons.

Specify a BACKGROUND-COLOR and a font COLOR.

.tab a:hover

.tab a:active

The color of the left navigation menu buttons with mouse hover. Specify a BACKGROUND-COLOR and a font COLOR.

.tab a:hover and .tab a:active usually have the same colors.