Customisation - Templates - CSS

From Zen Cart(tm) Wiki
Jump to: navigation, search

How do I make edits to my stylesheet?

Scenario 1:

I have a website with a left column of 150px showing some sideboxes, which naturally appear on every page. However, my footer is centered across the whole site, and I would like the footer content to be centered beneath the content to the right of the sideboxes, rather than centered across the whole site.

1. Open the page in your browser

2. Using your browser's Edit menu, View Source (usually a right-click gives you this option too)

3. Look for your footer contents (ie: "powered by" is typical of some of the text in your footer)

4. Note the DIV "id" related to that section is "siteinfoLegal"

5. Add padding for that selector in the stylesheet, equal to the width of your left column (which we said was 150px):

 #siteinfoLegal { 
   padding-left: 150px;
 }

6. Next you'll be back to ask the same question about your "home" link. So, do the same thing, searching for "Home". Hint: since it's in the footer, it'll be just a few lines above the siteinfoLegal id you found earlier. You'll see that it's contained inside the "navSuppWrapper" div.

7. Add padding for that selector to your stylesheet.

8. You'll notice that 150px seems to be too much for that ... so try 80:

 #navSuppWrapper { 
   padding-left: 80px; 
 }


For most other customizations to visual appearance, use the same concept.