Tips for Templates
Tips on creating slscart templates. For enhancing the store's looks, check out using css on the store's template.
- Center a header image
- Get rid of underline in links
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. 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">
3. 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.
4. To go back to choosing a template via dropdown bar, clear the custom template and update it.
Ignore the warning about permissions.
5. How to choose a built-in template
When choosing a template via dropdown, choose template then click 'Apply'
6. Google recommends the following when it comes to font and responsive design:
- Use a base font size of 16 CSS pixels (16px). Adjust the size as needed based on properties of the font being used.
- Use sizes relative to the base size to define the typographic scale.
- Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em.
- Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.
7. 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>
8. Note which fonts & colors affect insert codes.
9. How to center the page title
There are three classes: txtleft, txtcenter, txtright available. Put the <div> and </div> around %PAGE_TITLE%
<div class="txtcenter">%PAGE_TITLE%</div>
10. 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>
***