Customizing classic template - changing color theme

I followed Kevin's instructions (westhost.com/blog/2009/05/14/customizing-zen-cart-part-1/#more-283) to modify the classic template by changing the color theme.

I have chosen as a new color: grey instead the blue Kevin did use.

The problem I accoutered was that the left bar heading “Sponsors” turned out blue instead of grey. I did run it twice – same effect!


He referred to four tags, but this selection includes the one he used already, maybe there is one missing?

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
#navEZPagesTop {
.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
.productListing-rowheading {

Could somebody please explain how to change the entire template to a new color or find the missing tag?


(Zen Cart Version 1.3.8)

First of all, you shouldn't be making changes to the files in the classic folders. You should be creating your own custom template by copying the files you want to edit into your own folders. It's unfortunate that this isn't even mentioned in the tutorial you followed. Following the override/template system protects your changes from being overwritten by upgrades/updates which always include the classic folders.

Secondly, if you're working online, it's easier for us to see what's happening and advise you on how to proceed if you give us a link to your site.

Lastly, if you don't have the Firefox browser, get it and get the web developer add on for it which will allow you to tinker with the stylesheet and see the results immediately. You'll still have to save your changes locally and FTP them to your site.

Thanks afo - I will follow your guidelines and learn more about the override/template system.
My future cart will be located here: http://www.ip-192.com/cart/ and shows the style sheet in question. The website itself is a WordPress blog (http://www.ip-192.com/) and I would like to add online shopping for my customers.
I just read about the new Zen Cart version 2.0. This sounds great. Hopefully it comes soon, that I don’t have to start with the old one. I use HostGator and it would be easy for me to do a new installation before I get really online.

Don't wait for 2.0. It'll be a while before it's ready to be used on live sites. The beta hasn't even been released.

To answer your question, look for this in your stylesheet:

#bannerboxHeading {
	background-color: #0000CC;
}

and change it to

#bannerboxHeading {
	background-color: #525252;
}

Thanks, it was the missing tag.

Or, if you don't want the bannerBoxHeading to be treated differently from all the other sidebox headings, you can just delete that whole rule and it will follow the same general rules as all the other sideboxes. That makes it simpler to adjust the sidebox colors again if you want to.

You're right, it would even streamline the stylesheet.

You might also want to consider getting one of the free templates and using it as your starting point. You can see them "in action" at http://(sorry, site offline)/

Nice selection, "Mostly Grey" complements my blog website closely. It is important customers "feel like home". Now I need to change some fonts and colors to stay within the CI. Thanks so much for helping me get started quickly!

When I saw what you were trying to do, I thought several of the free templates might work for you and save you some time. It'll also help you learn about creating custom templates without having to start from the beginning.

Great advice! I’m already putting content to the cart-site walking step by step through the Zen-admin.

Thanks for your sharing.

I must do something terribley wrong, because the font size do not match the "classic" template, but I did not make any changes in this regard. I came back to this template, because the "mostlygrey" (I still like it) may not work with the products. Please help what I may have done incorrect?
(http://www.ip-192.com/cart/)

http://www.zen-cart.com/forum/showthread.php?t=136523

I did all modified files "save as" with Notepad++ (sylesheet.css, header.php, index.php and meta_tags.php. I even created sylesheet.css new from the fresh installation of ZenCard. But the font sizes are out of order. Firebug tells me no errors. Where should I look into?

How can I apply the same space between Footer (Home) and the last side box like the space between all other side boxes? http://www.ip-192.com/cart/

Move the margin from the top to the bottom of the sideboxes, and add padding to the top of the columns.

#navColumnOneWrapper, #navColumnTwoWrapper {padding-top: 15px;}

.leftBoxContainer, .rightBoxContainer {margin-top: 0; margin-bottom: 15px;}

Thanks, great - Looks much better!