slscart logo

Fonts & Colors

Web Site > Fonts & Colors

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

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 navigation

Affected template insert codes

Relevant settings

Page navigation

Affected template insert codes

Relevant settings

View Cart

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

How fonts & colors affect pages and include codes

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

%CATEGORY_DESCRIPTION%

 

%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. I put it in, but commented it out.

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}

%CATEGORY_VERTICAL%

Lists all categories vertically. Also featured, all, new links.

link color: Category Link

%COPYRIGHT%

Font size: small font

%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}

%PAGES_VERTICAL%

Lists links to all active pages vertically.

link color: Page Link

%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%

%TITLE%

text size: Large Font

 

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

***