Palette Examples

Body Background

Refers to the background color of the tag of the site.

Test Text

General Text

Text throughout site that is not wrapped in any special html tag. This will be seen with text wrapped in paragraph tags or text with no tags at all.

General Links

Text wrapped in an anchor tag with no special css classes.

General Links Hover

Controls the hover color of general links. Mouse over link to see color change.

Primary Bg

Refers to items around the site with a primary background class. An example of this will be the top sidebar areas such as navigation menu 2 and the featured product.

Primary Text

Refers to the text color within primary areas. Since the primary background color can be any color this is a way to change to text so they do not match. An example of this will be the top sidebar areas such as navigation menu 2 and the featured product.

Primary Border

Refers to the border color around primary areas. Since the primary background color can be any color this is a way to change to border so they do not match. An example of this will be the top sidebar areas such as navigation menu 2 and the featured product.

Primary Button Bg

The background color of all primary buttons. A primary button is a button on the page that denotes the most important action. On the product detail page this will be "Add to Cart". On a forms page this will be the "Submit" button.

Primary Button Text

The text color of all primary buttons. A primary button is a button on the page that denotes the most important action. On the product detail page this will be "Add to Cart". On a forms page this will be the "Submit" button.

Primary Button Border

The border color of all primary buttons. A primary button is a button on the page that denotes the most important action. On the product detail page this will be "Add to Cart". On a forms page this will be the "Submit" button.

Primary Button Hover Bg

The background hover color of all primary buttons. A primary button is a button on the page that denotes the most important action. On the product detail page this will be "Add to Cart". On a forms page this will be the "Submit" button.

Primary Button Hover Text

The text hover color of all primary buttons. A primary button is a button on the page that denotes the most important action. On the product detail page this will be "Add to Cart". On a forms page this will be the "Submit" button.

Primary Button Hover Border

The border hover color of all primary buttons. A primary button is a button on the page that denotes the most important action. On the product detail page this will be "Add to Cart". On a forms page this will be the "Submit" button.

Secondary Bg

Used similarly to the primary background color as a css class that can denote a secondary color in which the palette can change easily throughout a site. Currently used with teaser price areas on category pages.

Secondary Text

Used similarly to the primary text color as a css class that can denote a secondary color in which the palette can change easily throughout a site. Currently used with teaser price areas on category pages.

Secondary Border

Used similarly to the primary border color as a css class that can denote a secondary color in which the palette can change easily throughout a site. Currently used with teaser price areas on category pages.

Secondary Button Bg

The background color of all secondary buttons. The secondary button class is not used for any default skin areas and is mainly for custom skin developers to provide and easy to change button color throughout the site.

Secondary Button Text

The text color of all secondary buttons. The secondary button class is not used for any default skin areas and is mainly for custom skin developers to provide and easy to change button color throughout the site.

Secondary Button Border

The border color of all secondary buttons. The secondary button class is not used for any default skin areas and is mainly for custom skin developers to provide and easy to change button color throughout the site.

Secondary Button Hover Bg

The background hover color of all secondary buttons. The secondary button class is not used for any default skin areas and is mainly for custom skin developers to provide and easy to change button color throughout the site.

Secondary Button Hover Text

The text hover color of all secondary buttons. The secondary button class is not used for any default skin areas and is mainly for custom skin developers to provide and easy to change button color throughout the site.

Secondary Button Hover Border

The border hover color of all secondary buttons. The secondary button class is not used for any default skin areas and is mainly for custom skin developers to provide and easy to change button color throughout the site.

Default Button Bg

The background color of all default buttons. A default button is a button on the page that denotes a less important action. On the product detail page this will be "Continue Shopping". On a forms page this will be the "Cancel" button.

Default Button Text

The text color of all default buttons. A default button is a button on the page that denotes a less important action. On the product detail page this will be "Continue Shopping". On a forms page this will be the "Cancel" button.

Default Button Border

The border color of all default buttons. A default button is a button on the page that denotes a less important action. On the product detail page this will be "Continue Shopping". On a forms page this will be the "Cancel" button.

Default Button Hover Bg

The background hover color of all default buttons. A default button is a button on the page that denotes a less important action. On the product detail page this will be "Continue Shopping". On a forms page this will be the "Cancel" button.

Default Button Hover Text

The text hover color of all default buttons. A default button is a button on the page that denotes a less important action. On the product detail page this will be "Continue Shopping". On a forms page this will be the "Cancel" button.

Default Button Hover Border

The border hover color of all default buttons. A default button is a button on the page that denotes a less important action. On the product detail page this will be "Continue Shopping". On a forms page this will be the "Cancel" button.

Muted Bg

Used similarly to the secondary background color as a css class that can denote a secondary color in which the palette can change easily throughout a site. Not currently used within responsive skins for any default areas.

Muted Text

Used similarly to the secondary text color as a css class that can denote a secondary color in which the palette can change easily throughout a site. Not currently used within responsive skins for any default areas.

Muted Border

Used similarly to the secondary border color as a css class that can denote a secondary color in which the palette can change easily throughout a site. Used for the secondary sidebar item borders.

Info Bg

This will change the background color for many informational areas around the site. An example would be the customize page instructions area or the custom form instructions area.

Info Text

This will change the text color for many informational areas around the site. An example would be the customize page instructions area or the custom form instructions area.

Info Border

This will change the border color for many informational areas around the site. An example would be the customize page instructions area or the custom form instructions area.

Account Bar Link

Link color for the account bar at the top of the page.

Account Bar Link Hover

Link hover color for the account bar at the top of the page.

Account Bar Dropdown Bg

Dropdown background color for the account bar at the top of the page. The dropdown on the account bar is only seen on mobile sized screens.

Account Bar Dropdown Border

Link color for the account bar at the top of the page. The dropdown on the account bar is only seen on mobile sized screens.

Vertical Nav Bg

The background color for the sidebar navigation areas. Examples can be seen with the sidebar menu 2 and menu 3 navigation items.

Vertical Nav Border

The border color for the sidebar navigation areas. Examples can be seen with the sidebar menu 2 and menu 3 navigation items.

Vertical Nav Text

The text color for the sidebar navigation areas. Examples can be seen with the sidebar menu 2 and menu 3 navigation items.

Vertical Nav Text Hover

The text hover color for the sidebar navigation areas. Examples can be seen with the sidebar menu 2 and menu 3 navigation items.

Vertical Nav Bg Hover

The background hover color for the sidebar navigation areas. Examples can be seen with the sidebar menu 2 and menu 3 navigation items.

Danger Bg

Used for the background color of alert or required areas. An example can be seen with any required entry that has not been completed on a product detail page or cutstom form.

Danger Text

Used for the text color of alert or required areas. An example can be seen with any required entry that has not been completed on a product detail page or cutstom form.

Danger Border

Used for the border color of alert or required areas. An example can be seen with any required entry that has not been completed on a product detail page or cutstom form.

Success Bg

Used for the background color of successfully completed areas. Its an alert that appears to indicate to the user that an action has been completed successfully.

Success Text

Used for the text color of successfully completed areas. Its an alert that appears to indicate to the user that an action has been completed successfully.

Success Border

Used for the border color of successfully completed areas. Its an alert that appears to indicate to the user that an action has been completed successfully.

Danger Button Bg

Used for the bacground color of buttons with the danger class. These are mostly cancel buttons throughout the site or buttons that could cause the deletion of items or loss of work. An example can be seen with the cancel button on customize page.

Danger Button Text

Used for the text color of buttons with the danger class. These are mostly cancel buttons throughout the site or buttons that could cause the deletion of items or loss of work. An example can be seen with the cancel button on customize page.

Danger Button Border

Used for the border color of buttons with the danger class. These are mostly cancel buttons throughout the site or buttons that could cause the deletion of items or loss of work. An example can be seen with the cancel button on customize page.

Danger Button Hover Bg

Used for the background hover color of buttons with the danger class. These are mostly cancel buttons throughout the site or buttons that could cause the deletion of items or loss of work. An example can be seen with the cancel button on customize page.

Danger Button Hover Text

Used for the text hover color of buttons with the danger class. These are mostly cancel buttons throughout the site or buttons that could cause the deletion of items or loss of work. An example can be seen with the cancel button on customize page.

Danger Button Hover Border

Used for the border hover color of buttons with the danger class. These are mostly cancel buttons throughout the site or buttons that could cause the deletion of items or loss of work. An example can be seen with the cancel button on customize page.

Warning Bg

Will edit the background color of all warning areas. This is not used much throughout the site but alows for a color change with bootstrap warning alerts.

Warning Text

Will edit the text color of all warning areas. This is not used much throughout the site but alows for a color change with bootstrap warning alerts.

Warning Border

Will edit the border color of all warning areas. This is not used much throughout the site but alows for a color change with bootstrap warning alerts.

Top Nav Bg

Contrals the backgrond color of the main top navigation.

Top Nav Link

Contrals the link color of the main top navigation.

Top Nav Border

Contrals the border color of the main top navigation.

Top Nav Link Hover

Contrals the link hover color of the main top navigation.

Top Nav Active

Contrals the backgrond color of active items within the main top navigation. Active navigaton items are items in the navigation that match the current page your on.

Price Text

The color of the final price within pricing engines on the product detail page.

Basic Borders

Used for many border colors throughout the site.

Sidebar Content BG

Changes the background color of secondary sidebar items such as the history area or contact block area.

General Content BG

Used for many background areas around the site. An example will be the login form background.

Sidebar Heading Primary

Edits the color of the heading text for sidebar navigation items. Seen with the featured product heading.

Sidebar Heading Secondary

Edits the color of the heading text for secondary sidebar navigation items. Seen with the history sidebar item and contact block sidebar item.