How to change colors.

[wmorris]

I just installed the latest newest version of Zen Cart 2.0

Right now I only have the default responsive template. How can change the color from black to another color like in the bar on the top and the sideboxes and the footer? Something for now.


Thanks
Wade

[simon1066]

If you're planning to customise/create your own template using the Zen Cart Responsive Template as a base then the recommended way would be to clone it using this plugin - https://www.zen-cart.com/downloads.php?do=file&id=2087.

Also, it would now would be a good time to learn how to use your browser's Developer Tools function. With that you can identify the styles (within your stylesheet) that need editing. Start by reviewing this from the Docs - https://docs.zen-cart.com/user/templ...lors-and-fonts and the following, as an example:



Inspecting the top bar (right click -> inspect) you can see in the above screenshot that that element has an id of 'navMainWrapper' which is styled (in the right column) with a background:#333 (black)

You would, in this case, remove #navMainWrapper from line #46 of /includes/templates/responsive_classic/css/stylesheet_colors.css

and create a new entry of

#navMainWrapper {
background: #FF0000;
}

to change it to red, for example.

The path to stylesheet_colors.css is obviously for responsive_classic and would be different once you have cloned it.

[swguy]

If you switch to the Bootstrap template:
https://docs.zen-cart.com/user/template/bootstrap/

Color changing is built into your admin. So no file changing required.

[dbltoe]

If you switch to the Bootstrap template:
https://docs.zen-cart.com/user/template/bootstrap/

Color changing is built into your admin. So no file changing required.

Agreed.

If, however, you just gotta on responsive_classic, I would first use lat9's clone a template to make a copy of responsive_classic to have a fallback for testing etc.

Then, create stylesheet_zcustom.css in the new CSS folder and put all extra styles there.

Makes the next upgrade sooo much easier and you know exactly where to find changes you made.

[swguy]

Admittedly, when you gotta, you gotta.