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.

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

Here's why.

4. 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="http://www.mydomain.com/images/Paypal1.png" alt="payment methods" width="177" height="57">

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

Ignore the warning about permissions.

6. 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 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

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

header {margin-top:0}
.topbanner {background-color: #008000; color: #FFF; padding:0.5%}

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

 <div class="topbanner txtcenter">ebb and oww</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>
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>

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>

***