Using CSS in Templates

Ideas on using css in slscart templates to enhance your store's looks. Unless indicated, the css will go within the <style> tags (you may have to add these yourself). The example below shows a typical <head> section of a template. It shows where the css in 'Get rid of underlined links' goes. Most templates will have css added by the template designer.

<head>
%META_TAGS%
<title>%TITLE_TAG%</title>
%STYLE_SHEET%
<style>
/* next line gets rid of underline links */
a {text-decoration: none;}
</style>
</head>

Ideas

1. Put CSS before javascript in the <head> area of template.

This is a performance issue. Note that %STYLE_SHEET% has both css and javascript in it.

3. Add a centered text banner at the top of the page

Starting in version 10.7.0 this feature is built-in to slscart.

Add the lines below in between the <style> tags. Note the text color, background color can be set.

.topbanner {background-color: #008000; color: #FFF; padding:0.5%}

Add the <div> line directly above the <header> tag in the existing template

 <div class="topbanner txtcenter">Banner text to display</div>

4. Get rid of underlined links.

Put it below %STYLE_SHEET% in the <head> section. The bold line is the one.

/* next line gets rid of underline links */
a {text-decoration: none;}

5. Adjust space between between left sidebar menu options

default: 5px

You may want more space between menu selections for mobile devices.

.sidebar_left ul li a {
margin-top: 2px;
margin-bottom: 2px;
}

6. How to center the header image

The default is for the header image to be left-justified.

/* center desktop logo image */
img.logo_img { margin:0 auto; display: block; }
/* center mobile logo image */
.mobile_logo { margin:0 auto; display: block; text-align: center }

7. Put white space below blog search bar

Adjust the 20px for the amount of white space you want.

#blogsearchform { margin-bottom: 20px; }

Breadcrumbs

Change background color on breadcrumbs

Note that starting with version 10.40.0 the background breadcrumb color can be adjusted in Fonts & Colors > Drill Down Bkgd.

Breadcrumbs are generated by using %CATEGORY_NAVIGATION% tic in the template. This will change the background color to a light gray. Put this just after %STYLE_SHEET%. #F0F0F0 is a light gray.

div.breadcrumbs {background-color: #F0F0F0;}

Change size of breadcrumb text

div.breadcrumbs { font-size: 0.8em; }

Add whitespace above or below breadcrumb text

div.breadcrumbs { margin-top: 5px; margin-bottom: 20px; }

***

Using CSS in Templates

Menu

Ideas

Breadcrumbs