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
• Category navigation
  • Horizontal
    • %CATEGORY_HORIZONTAL%
    • Drop menu
  • Vertical
    • %CATEGORY_FLYOUT%
    • %CATEGORY_VERTICAL%
• Page navigation
  • Horizontal
    • Pages horizontal %PAGES_HORIZONTAL%
  • Vertical
    • pages vertical %PAGES_VERTICAL%
• Category
  • Category description
• Copyright
• Email a Friend
• Featured product
• Forms
• Header
• Misc
• Mobile
• Pages
  • Articles
  • Blog
  • FAQ
  • Home
• Popup
• Related
• Search site
• Site Message
• Social media
• Title %TITLE%
• View Cart

EBB

Explanation of each font & color setting.

'ProductLink'=>'The color of links within product layouts',
'ProductHover'=>'The hover color of links within product layouts (leave blank for no hover)',
'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)',

'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',

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
Background color: drill down bkgd

Read more about breadcrumbs.

%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

• Nav Button Text - text color of nav link
• Nav Button Background - background color of nav link
• Nav Border - border color of flyout menu
• Active Nav Text - text color of currently selected category
• Active Nav Bkgd - background color of currently selected category
• Hover Nav Bkgd - background color of nav link when cursor hovers over it
• Hover Nav Text - text color of hovered nav link. The text is also made bold to stand out better.

%CATEGORY_VERTICAL%

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

sbnav_vertical

Relevant fonts & colors

• link color: Category Link
• Category hover
• sub category link
• sub category hover
• end category link
• end category hover

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

• link color: Page Link
• hover color: Page Hover

Horizontal navigation

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

This includes the template insert codes:

•  %CATEGORY_DROPMENU%
•  %NAVIGATION_DROPMENU%

Relevant fonts & colors settings

• Nav Button Text: The color of the text if using tab, button or bar navigation styles
• Nav Button Bkgd: The color of the background if using tab, button or bar navigation styles
• Active Nav Text: The color of the text of the active tab, button or bar
• Active Nav Bkgd: The color of the background of the active tab, button or bar
• Hover Nav Text: The hover color of the text if using tab, button or bar navigation styles (leave blank for no hover)
• Hover Nav Bkgd: The hover color of the background if using tab, button or bar navigation styles (leave blank for no hover)
• Nav Border: The color of the border if using tab, button or bar navigation styles

Category

%CATEGORY_DESCRIPTION%

Category navigation

Affected template insert codes

• %CATEGORY_BAR%
• %CATEGORY_BULLETS%
• %CATEGORY_BUTTONS%
• %CATEGORY_DROPMENU%
• %CATEGORY_HORIZONTAL%
• %CATEGORY_LIST%
• %CATEGORY_TABS%
• %CATEGORY_VERTICAL%

Relevant settings

• Category Link: The color of the main category links for vertical or horizontal text links
• Category Hover: The hover color of the main category links for vertical or horizontal text links (leave blank for no hover)
• Sub Cat Link: The color of the sub category links for vertical or horizontal text links
• Sub Cat Hover: The hover color of the sub category links for vertical or horizontal text links (leave blank for no hover)
• End Cat Link: The color of the last end category links for vertical or horizontal text links
• End Cat Hover: The hover color of the last end category links for vertical or horizontal text links (leave blank for no hover)
• Drill Down Link: The color of the drill down category navigation links
• Drill Down Hover: The hover color of the drill down category navigation links (leave blank for no hover)

Page navigation

Affected template insert codes

• %PAGES_BAR%
• %PAGES_BULLETS%
• %PAGES_BUTTONS%
• %PAGES_HORIZONTAL%
• %PAGES_VERTICAL%

Relevant settings

• Page Link: The color of page navigation links
• Page Hover: The hover color of page navigation links (leave blank for no hover)

Forms

Relevant settings

• Form Button Border: The color of the border for form buttons like order or search buttons (leave blank to use standard form buttons)
• Form Button Text: The color of the text for form buttons like order or search buttons (leave blank to use standard form buttons)
• Form Button Bkgd: The color of the background for form buttons like order or search buttons (leave blank to use standard form buttons)

Email a Friend

Affected template insert codes

• %EMAIL_FRIEND%

Relevant settings

• Email Link: The color of email a friend links
• Email Hover: The hover color of email a friend links (leave blank for no hover)

Related

Affected template insert codes

• %CONTENT%

Relevant links

• Related Link: The color of related product links
• Related Hover: The hover color of related product links (leave blank for no hover)

Featured product

Affected

• %FEATURED_

ebb

• Feature Link: The color of featured product links
• Feature Hover: The hover color of featured product links (leave blank for no hover)

Header

Affected template insert codes

• %SITE_LOGO%

Relevant settings

• Header Font: The size of the company name header font (if no logo image)
• Header Color: The color of the company name header font (if no logo image)

Pop up

Affected template include codes

• %CONTENT%

Relevant settings

• Pop Up Link: The color of pop up page links
• Pop Up Hover: The hover color of pop up page links (leave blank for no hover)

Mobile

Affected template include codes

• %MOBILE%

Relevant settings

• Mobile Link: The color of the navigation links that appear on the drop down in a mobile device
• Mobile Bkgd: The background color of the links that appear on the drop down in a mobile device
• Mobile Hover Link: The hover color of the navigation links that appear on the drop down in a mobile device
• Mobile Hover Bkgd: The hover background color of the links that appear on the drop down in a mobile device

Social media

Affected template include codes

• %SOCIAL_MEDIA%

Relevant settings

• Social Text
• Social Bkgd
• Social Hover
• Social Border

Misc

Relevant settings

• 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
• Large Font: The size of the larger page name font
• Body Bkgd: The color of the page background
• Body Text: The color of the main text on the page
• Anchor Link: The color of the main links on the page
• Anchor Hover: The hover color of the main links on the page (leave blank for no hover)
• Line Color: The color of the horizontal lines between products (leave blank for no lines)
• Sale Color: The color of sale prices and error messages
• Accent Color: The color of tables with accents, such as the events calendar
• Highlight Text: The color of highlighted text
• Product Link: The color of links within product layouts
• Product Hover: The hover color of links within product layouts (leave blank for no hover)

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

• menu (vertical set of links to articles) - Accent Color
• menu font size - Large Font

css access

individual menu entries

div.sb_main_articles ul li

Blog page

Affected settings

• menu (vertical set of links to articles) - Accent Color
• menu font size - Large Font
• category list - Font Size

FAQ page

• menu (vertical set of question links to answers) - Accent Color
• menu font size - Large Font

Home page

• text: Font Size

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
Text color: body text

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

• %VIEW_CART%, %VIEW_CONTENT%

Relevant settings

• Cart Link: The color of the view cart link
• Cart Hover: The hover color of the view cart link (leave blank for no hover)

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

***