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.

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

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.

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.

***