Customisation - Templates - Stylesheets - Styles For Individual Pages

From Zen Cart(tm) Wiki
Revision as of 03:29, 18 July 2012 by DrByte (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

If you want to modify the way one page looks the preferred way to do so is with a stylesheet. It is much easier to keep track of a stylesheet than hacks in the source code.

When Zen Cart loads a page it first looks for a stylesheet with the same name as your page.

You can see what Zen Cart calls each page by looking at your url. It should be something like your_domain/index.php?main_page=index. main_page tells the cart what page to display. This example would be index.

Note: your home page is index_home


1.Say you want to hide the breadcrumbs on your home page.

2.Create a new stylesheet in your templates css directory named index_home.css

3.Add the styles for your home page. The style required to hide the breadcrumbs is:

#navBreadCrumb{ display: none; }

4.Upload the file

Refresh your browser. If the new style is not applied first empty your cache on the browser. If it still is not displaying right check to make sure you uploaded it to the correct css directory (it has to be for the template you are using.)

For more information check out Customisation_-_Templates_-_Stylesheets_-_Per-Page-Rules.