Newbie here..simple question

I installed the zencart and have it running. So far am very happy with it.

A simple terminology question though.

I tried searching the FAQs and the forums..but I think I am not using the correct search terms.

I have the Classic Contemp. Green template installed.
Everything is fine,but I would like to know how to change all the Green category bars to blue?

Do I find this in a CSS file? What search term do i use to search for this information.

Below is a photo showing what I would like to change to blue.

Thanks for any help.
[email protected]

Image removed*

Yes, that's in the stylesheet (css), but please review the information in the tutorials/FAQ about creating your own custom template. If you make changes to the classic green template, all your changes will be lost with the next upgrade/update.

In case you didn't know, there are free templates available for Zen Cart. You can view them at http://(sorry, site offline)/.

Welcome to the forum, and good luck with your new online venture!

The forum is full of useful information and you will find that there is plenty of help available, through the FAQ/TUTORIALS and WIKI, as well as postings on the forum itself.

Before you concern yourself with customisations, I'd like to suggest that you create your own CUSTOM template folder system first.

The reason for this is to preserve your changes when you make edits to standard template files. Later on, when you UPGRADE, your customised files will be preserved, allowing you to upgrade your ZC software without the risk of over-writing any changes you have made.

You are well advised to follow the CUSTOM template protocols whenever you consider making a core-code change to your site. Most of the time, these changes will be to TEMPLATE, LANGUAGE and CSS files, though occasionally you may wish to make some adjustments to other files.

To start you off on the process of CUSTOMISATION, read this tutorial first:-

https://www.zen-cart.com/tutorials/index.php?article=142

You will create and administer your CUSTOM template largely through your FTP client, or via your host C-PANEL interface. This is because you will be working with directory folders and files within your website root directory.

After you have read and enacted the steps in the above tutorial, you are well advised to spend some time looking through the ZC directories on your server - particularly those in includes/templates and includes/languages...

... wherever you see a folder titled "classic", you should create another folder at that level, named with your CUSTOM template name.

In this way, your sit3e will be physically structured for editing files and placing them in your CUSTOM folder(s).

The process of populating your CUSTOM folders is called OVER-RIDES, and you will often see references in the forum to the OVER-RIDES system.

It's also advisable to read the FAQ for more clarity on HOW the over-rides system works, and the functional purpose of your CUSTOM template set-up.

Thank u for the replies. However, I would simply like to know what line of code, etc is responsible for this single item.

I did read a lot of the tutorials and have a nicelt modified template..I'm just confused on what controls this single color item.

Joel

Okay, so you have your CUSTOM template - or as AFO suggested, you have another template you've installed.

In that template's main folder will be a folder called images.

Inside the images folder is one called tile_back.gif

That is the image that is tiled across the headers you describe, currently giving the green shade.

Simply make a copy of that file (so you know its dimensions) then paste it in an image editor (photoshop, paintshop, etc) and create one of identical size - but of a colour of your choice. Save it as a gif and FTP it back to the same images folder, overwriting the original standard tile_back.gif.

If you want to change the format of the image, including its name and file-type (eg: jpg), then you can create such an image and send it to the same folder.

If you go this route, you will then have to change its reference in the style declaration in your templates stylesheet.css file. Call it up for editing, then look for tile_back.jpg . Change this name to that of your new file.

Download and install Firefox...then add web developers tool kit..that will show all information about zencart templates, including images and stylesheet.

schoolboy,
Thanks...that's the simple answer I was looking for....I did a simple Photoshop color change and it worked.....however :(

Unfortunately that brought up another change.
I think this answer is in the CSS.
Can you tell me where????

giant image removed

Thanks - Joel

You'll have to spend time learning how the stylesheets govern the displays. Follow Misty's advice and use Firefox with the developer toolkit, colorzilla and firebug addons.

Using these tools will allow you to find, edit and manipulate your stylesheet declarations OFFLINE, and to view the real-time effects changes will have on your displays.

This will save you hours of time and stop you from bashing your head against the wall.

For now:

.leftBoxContainer, .rightBoxContainer {
	margin: 0em;
	border: 1px solid #9a9a9a;
	border-bottom: 5px solid #336633;
	margin-top: 1.5em;
	}

That green bar is border-bottom, and the declaration is saying:

"put in a border at the bottom, make it solid, 5 pixels deep and give it a puke green (#336633) colour."

Thanks again...and I am following all the advice given.....thanks god..my head is hurting from the hard wall I keep banging it against!

Joel

PS - some interesting linksabout me:
https://www.joellipperini.com
https://www.racelabz.com
search google keywords: Joel Lipperini