slscart logo

Tips for Templates

Tips on creating slscart templates.

1. Put %META_TAGS% before %TITLE_TAG%. Included in the meta tags include code is the character set designation which needs to be before the <title> tag.

<head>
%META_TAGS%
<title>%TITLE_TAG%</title>
%STYLE_SHEET%
</head>

2. Put CSS before javascript in the <head> area.

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

3. For images, add the image's width and height in the specification. The web page will load faster since the browser does not have to calculate the actual image's width and height on-the-fly.

<img src="%SITE_URL%/images/Paypal.png" alt="payment methods" width="177" height="57">

4. For images, add an alt attribute with a good description of what the image represents.

If you add your own images to the template don't forget to use the alt attribute with the <img> tag. Here's why.

5. To go back to choosing a template via dropdown bar, clear the custom template and update it.

Ignore the warning about permissions.

6. How to choose a built-in template

When choosing a template via dropdown, choose template then click 'Apply'

7. Google recommends the following when it comes to font and responsive design:

8. Ability to use small font in the template

The small font size is set in Font & Colors in the storeadmin. The smfont class can be used to set text to the small font.

 <footer>
%COPYRIGHT%
<div class="smfont">
Hosted by <a href="http://www.mydomain.com" target="_blank">My Hosting</a>
</div>
</footer>

9. Change background color on breadcrumbs

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%

 <style>
.breadcrumbs {background-color: #F0F0F0;}
</style>

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

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>

11. Note which fonts & colors affect insert codes.

Visit the fonts & colors page

12. Get rid of underlined links.

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

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

13. 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;
}

14. How to center the page title

There are three classes: txtleft, txtcenter, txtright available.

<div class="txtcenter">%PAGE_TITLE%</div>

xx. 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 }

15. Add an ajatix menu to slscart

Adding the menu has advantages because it is compact and has dropdown capability.

Drawbacks

View cart can't be used in the menu because it is dynamically assembled, depending on what page you are on.

Any time a new category is added, the menu needs to be updated.

Initially

* Create a menu folder

* Create horz menu in Expression Web or Dreamweaver in the menu folder

* Upload all the files except the menu in the menu folder

* Copy this to <head> area:

<link rel="stylesheet" href="%SITE_URL%/twm_menu/ajxmenu.css" type="text/css">
<script src="%SITE_URL%/twm_menu/ajxmenu.js" type="text/javascript"></script>

* Copy and paste menu code into slscart template under <sb_hpages>

Modifications

* Made mods to horz menu

* Upload all files

* Copy and paste menu code into slscart template under <sb_hpages>

***