Below is a list of CSS class names used throughout Enterprise public-facing applications. Target the below names in the CSS text area to change specific items of the application. Class names are listed below with a short description of what elements they define along with the specific attributes you can change using web themes.
The class names are not backward compatible.
Main Content Areas
usi-pageWrapper – Defines the main background area for the page: content, images, etc.
- Main background color (#fff)
- Main copy font color (#292829)
- Main copy link color (#0067b1)
usi-content – Defined content area
- Background color (#fff)
- Content area border
Navigation
usi-headerTopBar - Top most navigation bar
- Background color (#515152)
- Font color (#fff)
usi-headerBottomBar - Lower/secondary header, may also be part of the navigation or just below it
- Background color (#fff)
- Font color (#717073)
usi-sideNav - Left or right-side navigation areas
- Background color (#fff)
- Link color (#0067b1)
usi-sideNavHeading - Within the usi-sideNav, section header
- Background color (#fff)
- Font/link color (#0067b1)
usi-sideNavItem - Within the usi-sideNav, individual navigation links
- Link color (#0067b1)
- Link hover color
usi-subNav1
- Background color (#fff)
- Link color (#0067b1)
usi-subNav2
- Background color (#fff)
- Link color (#0067b1)
usi-subNav3
- Background color (#fff)
- Link color (#0067b1)
Buttons
usi-button
- Button background color (#0067B1)
- Border color (#0067B1)
- Text color (#fff)
- Border radius/button corners (border-radius: 4px)
- Button positioning (padding: 7px 27px;)
.secondary (usi-button .secondary)
- Button background color (#fff)
- Border color (#0067B1)
Headings
usi-heading - Specific to h1 headings
- Font color (#292729)
- Border color (this would apply to underline) (#292729)
usi-subHeading - Specific to h2 – h6 headings
- Font color (#292729)
Web themes allow for customization but instead of letting you choose colors for each different area or element, you choose a primary color and change elements within that color theme.
Example:
Light 1 | Light 2 | Primary | Dark 1 | Dark 2 |
10% | 30% | 70% | 90% |
Below are additional class names to accommodate this:
usi-gradientbackground
usi-webThemeLight1Text
Usi-webThemeLight1Background
usi-webThemeLight2Text
usi-webThemeLight2Background
usi-webThemePrimaryText
usi-webThemePrimaryBackground
usi-webThemeDark1Text
usi-webThemeDark1Background
usi-webThemeDark2Text
usi-webThemeDark2Background
usi-grayScale1Text
usi-grayScale1Background
usi-grayScale2Text
usi-grayScale2Background
usi-grayScale3Text
usi-grayScale3Background
usi-grayScale4Text
usi-grayScale4Background
usi-grayScale5Text
usi-grayScale5Background
usi-grayScale6Text
usi-grayScale6Background
usi-grayScale7Text
usi-grayScale7Background
Comments
0 comments
Please sign in to leave a comment.