Zen Cart Stylesheets (CSS) System

November 22, 2008 in CSS, Zen Cart Guides

Is this useful? Like it.

A while ago, I’ve got a client who asked me why modifications to his CSS file won’t change the look of his Zen Cart e-commerce website (The CSS files for a template are located in the \includes\templates\YOUR_TEMPLATE\css\ ). Anyway, I checked and found that he made a copy of the original CSS file and rename the original file to stylesheet.bak.css, so the new and old CSS files were both in the same folder.

The reason that modifications to the stylesheet.css do not affect the site is because Zen Cart sends BOTH CSS files to the browser. Stylesheet.css is loaded first, then stylesheet.bak.css — The latest loaded file will have the priority over the files before. And, if a CSS selector appears in multiple files (multiple times in a same CSS file), the one loaded last will always be the one used by the browser.

If you’d like to keep a backup copy of your CSS file in the same folder, just add ‘.bak’ to the end of the filename (well, anything, as long as the filename does not end with .css)

The Zen Cart Per-Page system of handling CSS is more than just the above. It can be used to give different styling to different pages, different selected language etc.

In case you’ve not read the documentation included in the Zen Cart download, here it is in full (included in the Zen Cart v1.3.8 download):

————————————————–

(a large part of this functionality has been adapted from a contribution by Juxi Zoza 03/15/05)

Zen Cart Stylesheets

Zen Cart(tm) stylesheets are located in this folder: /includes/templates/YOUR_TEMPLATE/css

What follows is a description of how one can use Zen Cart’s built-in power to pull certain stylesheets for certain conditions.

The CSS files are sent to the browser in this order: (and alphabetically within each case of more than one match):

style*.css // are always loaded and at least ONE should contain site-wide properties.
language_stylesheet.css // changes to ALL pages, when that language is used
page_name.css // changes to one page (use index_home.css for “just the home page”)
language_page_name.css // changes to one page, when that language is used
c_??.css // changes to all info pages in a category
language_c_??.css // changes to all info pages in a category, when that language is used
m_??.css // changes to a manufacturer’s listing page
language_m_??.css // changes to a manufacturer’s listing page, when that language is used
p_??.css // changes to a product’s info page
language_p_??.css // changes to a product’s info page, when that language is used
print*.css // printer-friendly global usage site-wide changes for printing-only
The ‘stylesheet.css’ always loads first and should contain the bulk of your CSS selectors. Each file loaded takes priority over previously loaded file(s). To save loading time, only new selectors or selectors whose properties you wish to change should be in the subsequent optional CSS files. You can have different overrides for the same page, in different languages, because the two would never be called at the same time.

If someone selected the French language on your site, the ‘french_stylesheet.css’ would also be loaded. It should only contain the site-wide changes you want to make to ‘stylesheet.css’. For example, change a ‘background-image’ for your French customers.

If someone went to any of the other pages, that page’s CSS file would be loaded. Possibly you want different ‘background-image’ & ‘background-color’ on each of ‘page_x’ pages. Possibly you do not want a border around ‘.plainBox’ most of the time, but on a couple of pages you do… and on one of those pages you want it in black and the other in red.

Possibly you created a NEW tag and did a <span class=”newtag”> in your Privacy Statement. It is defined in only one CSS file, ‘german_privacy.css’ as ‘.newtag { text-transform: uppercase }’ Because, in Germany, that phrase must be in all CAPS, but not in other countries.

Use your CSS files and the standard tags as much as possible, just change their properties when needed. If possible, DON’T HACK the core code. Use your CSS files to do the work for you. When the style coding has been removed from the Zen Cart code and people have to decide if they want to go without the upgrade ~or~ undo all their hacks and finally learn about CSS… your site will still be up and running.

————————————————–

Premium Zen Cart templates from $22 only. Guaranteed unbeatable value! Give your business an advantage over others! Click to see now!

Comments

6 Responses to “Zen Cart Stylesheets (CSS) System”

latina america business on December 2nd, 2008 6:58 pm

latina america business…

Great Post! I am planning to write sometihng like this on my blog! I want emphatize this to Latin American Market! Keep it up! PS: Already Bookmarked!…
Dudley on December 10th, 2008 9:44 am

Hello and Thank You so much for you free design you have designed. I wanted to remove the have you got yours yet on the index page but can’t seem to find it can you please help.

PS
Before I installed your new teplate I was able to remove it.
admin on December 10th, 2008 11:06 am

The “have you got yours yet” advertisement is the default content of define_main_page.php for Zen Cart installation … it has nothing to do with the template. You can edit the “define_main_page.php” file in Admin > Tools > Define Pages Editor

(I think most probably your old template has an override version of the define_main_page.php … therefore, you need to copy the old define_main_page.php file)
Kieren on June 2nd, 2009 4:00 pm

Fantastic mate, just what I was looking for!
Younghun Son on December 17th, 2010 9:11 am

I want to change categories menu…
I want to remove l_ mark that is attached to subcategory..
how to do this ?
Thanks for providing beautiful template…
I want you to let me know as soon as possible..
^_^
admin on December 17th, 2010 9:16 am

Younghun Son,

It is controlled by your admin:

Admin > Configuration > Layout Settings > Categories Separator between the Category Name and Sub Categories

Leave a Reply

Latest Update: Dec 31, 2011

7 Days A Week E-mail Support - Including All Public & National Holidays

Testimonials

I just thought I would write to you in appreciation of your themes and their excellent affordable prices with no link back required also. - Andy

I've had a lot of fun over the past few months customizing this template and learning Zen Cart. The template integrates perfectly with Zen Cart and it looks SO much better than most of the templates out there...and your support is top notch. - Kevin

The ZenFlavor Templates are some of the best around. Unmatched designs combined with unmatched after sales service to provide excellent above average value for money. - JB Webb-Benjamin @ Z01 Studios

Your templates are beautiful, very reasonable, and an awesome timesaver! Thanks! - Support4Business

I just purchased the Zen Cart Template from you. I must say, it kicks major ass. Really easy to customize, loads fast, organized great. Loving it. - Chris

I have had so many compliments on my KILLER template that you designed!! It is great!! - Tina

Just a quick line to say thank you very, very much for providing a superb template which is very easy to customise and for your un rivalled after sales service. Compared to other Zen Cart template vendors you are in a league of your own - superb! - Mark S

You're awesome, thanks a lot - Mike

I purchased your wonderful template because I liked the rollover image effect - Steve

Love the great prices on the premium templates - Charles

It all worked out just as you said! Thanks again for your quick response and great support! - Allan

Attract More Sales With Our Premium Templates. View Now.