slscart logo

How Fonts & Colors work

Settings at Web Site > Fonts & Colors

Fonts and colors sets the store's fonts and colors. Note that %STYLE_SHEET% must be in the template.

EBB

Explanation of each font & color setting.

Font Style
This font applies to all elements on the page
Font Size
The main font size on the page
Small Font
The size of the smallest accent font

Fonts

xx

Font Style:

'HeaderColor'=>'The color of the company name header font',
'BodyBkgd'=>'The color of the page background',
'BodyText'=>'The color of the main text on the page',
'AnchorLink'=>'The color of the main links on the page',
'AnchorHover'=>'The hover color of the main links on the page (leave blank for no hover)',
'LineColor'=>'The color of the horizontal lines between products (leave blank for no lines)',
'SaleColor'=>'The color of sale prices and error messages',
'AccentColor'=>'The color of tables with accents, such as the events calendar',
'HighlightText'=>'The color of highlighted text',
'PageLink'=>'The text color of page navigation links',
'PageHover'=>'The background color of page hover links',
'ProductLink'=>'The color of links within product layouts',
'ProductHover'=>'The hover color of links within product layouts (leave blank for no hover)',
'SocialText'=>'The color of social media icons when using the social media include',
'SocialBkgd'=>'The background color of social media icons when using the social media include',
'SocialBorder'=>'The border color of social media icons when using the social media include',
'SocialHover'=>'The background hover color of social media icons when using the social media include',
'FeatureLink'=>'The color of featured product links',
'FeatureHover'=>'The hover color of featured product links (leave blank for no hover)',
'EmailLink'=>'The color of email a friend links',
'EmailHover'=>'The hover color of email a friend links (leave blank for no hover)',
'RelatedLink'=>'The color of related product links',
'RelatedHover'=>'The hover color of related product links (leave blank for no hover)',
'PopupLink'=>'The color of pop up page links',
'PopupHover'=>'The hover color of pop up page links (leave blank for no hover)',
'DrillDownLink'=>'The color of the drill down category navigation links',
'DrillDownHover'=>'The hover color of the drill down category navigation links (leave blank for no hover)',
'CartLink'=>'The color of the view cart link',
'CartHover'=>'The hover color of the view cart link (leave blank for no hover)',
'CategoryLink'=>'The color of the main category links for vertical or horizontal text links',
'CategoryHover'=>'The hover color of the main category links for vertical or horizontal text links (leave blank for no hover)',
'SubCatLink'=>'The color of the sub category links for vertical or horizontal text links',
'SubCatHover'=>'The hover color of the sub category links for vertical or horizontal text links (leave blank for no hover)',
'EndCatLink'=>'The color of the last end category links for vertical or horizontal text links',
'EndCatHover'=>'The hover color of the last end category links for vertical or horizontal text links (leave blank for no hover)',
'CatButtonText'=>'The color of the text if using tab, button or bar navigation styles',
'CatButtonBkgd'=>'The color of the background if using tab, button or bar navigation styles',
'CatActiveText'=>'The color of the text of the active tab, button or bar',
'CatActiveBkgd'=>'The color of the background of the active tab, button or bar',
'CatHoverText'=>'The hover color of the text if using tab, button or bar navigation styles (leave blank for no hover)',
'CatHoverBkgd'=>'The hover color of the background if using tab, button or bar navigation styles (leave blank for no hover)',
'MobileLink'=>'The color of the text for mobile device navigation links',
'MobileBkgd'=>'The color of the background for mobile device navigation links',
'MobileHoverLink'=>'The hover color of the text for mobile device navigation links (leave blank for no hover)',
'MobileHoverBkgd'=>'The hover color of the background for mobile device navigation links (leave blank for no hover)',
'CatButtonBorder'=>'The color of the border if using tab, button or bar navigation styles',
'FormButtonBorder'=>'The color of the border for form buttons like order or search buttons (leave blank to use standard form buttons)',
'FormButtonText'=>'The color of the text for form buttons like order or search buttons (leave blank to use standard form buttons)',
'FormButtonBkgd'=>'The color of the background for form buttons like order or search buttons (leave blank to use standard form buttons)',
'BlogText'=>'The color of the blog home page text'

Category Navigation

Horizontal

%CATEGORY_HORIZONTAL%

Lists all categories horizontally. Also featured, all, new, sale item links (if enabled).

link color: Category Link
font size: Large Font

%CATEGORY_ HORIZONTAL% is used in the template for horizontal navigation. To directly change only its font size, use this in the template.

nav.sbnav_horizontal.sb_hlinks { font-size: 1.0em }

%CATEGORY_NAVIGATION%

Shows a horizontal list, commonly called breadcrumbs, of where you are in navigation.

Link color: drill down link
Link hover color: drill down hover

Access via css

 The breadcrumb can be modified to change background color, font, etc by using css in the template. Here is an example that puts the background color a light gray and a slight margin on the bottom so images don't butt up to the breadcrumb trail:

div.breadcrumbs {background-color: #F0F0F0; margin-bottom: 2px}

%PAGES_HORIZONTAL%

Lists all active pages horizontally. Each page name is a link to that page.

link color: Page Link
link hover color: Page Hover
font size: Large Font

Access via css

To directly change only its font size, use this in the template.

nav.sbnav_horizontal.sb_hlinks { font-size: 1.0em }

Vertical

%CATEGORY_FLYOUT%

Shows a vertical list of top-level categories. If subcategories exist for a category, they will show up in a flyout menu when the cursor is hovered over the category containing subcategories.

Relevant fonts & colors

%CATEGORY_VERTICAL%

Lists all categories vertically. Also shows featured, sale, all, new links as set in Catalog Setup > Categories

sbnav_vertical

Relevant fonts & colors

Page Navigation

Horizontal

%NAVIGATION_DROPMENU%

Access via css

This example changes the font size to 1.2em

nav.sbnav_dropmenu.sb_pages.sb_hlinks {font-size: 1.2em}

Vertical

%PAGES_VERTICAL%

Lists links to all active pages vertically.

sbnav_vertical.sb_pages

Relevant fonts & colors

Horizontal navigation

Here are the font & color settings that affect horizontal navigation  bars (tab, button, bar, dropmenu).

This includes the template insert codes:

Relevant fonts & colors settings

Category

%CATEGORY_DESCRIPTION%

Category navigation

Affected template insert codes

Relevant settings

Page navigation

Affected template insert codes

Relevant settings

Forms

Relevant settings

Email a Friend

Affected template insert codes

Relevant settings

Related

Affected template insert codes

Relevant links

Featured product

Affected

ebb

Header

Affected template insert codes

Relevant settings

Pop up

Affected template include codes

Relevant settings

Mobile

Affected template include codes

Relevant settings

Social media

Affected template include codes

Relevant settings

Misc

Relevant settings

Pages

The following include codes and pages listed will show what fonts & colors affect them. The list is incomplete and will be added to frequently. Note that if something is accessed via css it will override the fonts & colors setting. For example, if the Form Button Bkgd is green and css is used to make it red, the form button background will be red.

Articles page

css access

individual menu entries

div.sb_main_articles ul li

Blog page

Affected settings

FAQ page

Home page

Template include codes

missing colors:

if certain fields have no color a default is used

if 'BodyBkgd' then #FFFFFF (white)

if ends in 'Bkgd' then #CCCCCC

if ends in 'Text' or 'Link' or label is 'HeaderColor' or label is 'AccentColor' then #000000 (black)

if 'SaleColor' then #990000 (red)

 

elseif ($lastfour == 'over')
$clrval = ${str_replace('Hover', 'Link', $clrlabel)};

 

Copyright - %COPYRIGHT%

Font size: small font

Site search - %SEARCH_SITE%

Displays search box and search button for searching the site.

search button text color: Form Button Text
search button background color: Form Button Bkgd
search button border color: Form Button Border

Access via css

How to change the 'search' button using css. This changes the background color to burgundy red and the text to white:

form input.formbutton {color: #FFF; background-color: #821518;}

Site message - %SITE_MESSAGE%

Title - %TITLE%

text size: Large Font

View Cart

Affected template insert codes

Relevant settings

 

For a more complete explanation of %include codes% click here.

***