Background on Website Colors in Zen Cart 1.5.7 Classic Stylesheet

NOTE:If you're familiar with the methods of color and saturation in a CSS stylesheet, scroll on down to Changing the Classic Colors for a tutorial on how to change colors in the 1.5.7+ stylesheet_colors.css.

With CSS, web site colors can be specified in different ways.

Some of the color methods either require special coding for browser support or are not compatible in all browsers. For instance, HSL can be rather confusing if you are not a normal user of graphic color patterns. Although accepted by most all browsers, it's difficulty to "adjust on the fly" makes it something we'll leave to the graphic specialist. For that reason, we will not discuss HSL, HWB, or CSS4 in this tutorial.

Also, while using Color Names can be a quick method for some, the variations needed in most modern websites has one scrambling to find something between red and fuschia. For that reason, we will not be covering Color Names either.

If you wish to go more in depth on colors, there is an excellent tutorial at w3schools that fully explains hexadecimal, rgb, and hsl. A lot of the information on this page at w3schools will be discussed later.

Hexadecimal Colors.

Hexadecimal Color values are preceded by the pound sign (#). It is followed by at least three characters and as much as eight. Looking at the stylesheet for a website, you'll probably see things like #ff0000, #ffffff, and #0000ff. These are the codes for red, white, and blue. You might also see them as #f00, #fff, and #00f. The three-character method is a shorthand method for colors which allows you to enter only three character combination to represent a color.

How is this done? The six-digits of the Hexadecimal Code are really representing #RRGGBB with the first two characters being the amount of red. The next two characters are the amount of green and the last two are the amount of blue as depicted in the listing. Each of those two-digit portions of the Hexadecimal Code tell the browser how much red, green, or blue to use to "paint" the colors of your website. 00 represents the least amount (0%) of the color while ff tells the browser to use 100% of the color. We can quickly make red four different shades by using #400000 (25% red), #800000 (50% red), #c00000 (75% red), and #ff0000 (100% red). Familiarizing yourself with these things make trying colors on the fly a whole lot easier. If you wanted something between 50% and 75%, just up the hex code in the first two digits to see it on your site.

The three-color shorthand can be used if the two digits that represent a color are the same. It's easy to see that white (#ffffff) could be represented by #fff, but you might not notice that #6699cc can also be written as #69c. Since each of the rgb colors in #6699cc are the same, you can use just one of each to form #69c and all the current browsers will know what you want. #cc33333 -- #c33; #cc6600 -- #c60; #6699cc -- #69c; etc. Note that our 75% red color cannot have a shortcut as the first two characters are not the same (#c00000 makes the color ineligible for shorthand as they do not match).

We'll discuss transparency later in the tutorial when we combine rgb and hexcode for modern browsers.

RGB Colors.

The use of RGB Colors makes it a little easier for those of us who are not familiar with hexadecimal code. First of all, the code tells us that it is rgb. Then, inside parentheses, it lets us know how much of each color. rgb (255, 0, 0), rgb (0, 255, 0), rgb (0, 0, 255) are, again, the rgb codes using the most of each color. There is no shorthand in rgb color but, it is a little easier to get percentages of a color. In hexadecimal code, #co0000 was the code for 75% of red. With rgb, you simply need to take the largest value of red (255) and multiply it by whatever % you need. In our 75% example, 255 * .75 equals 191.25. rgb colors must be whole numbers so, we make the red 191. This gives us rgb(191, 0, 0) or 75% red. If you inspect the previous color example, you'll note that we used hexadecimal code versus rub to show the 7% color. Inline rgb can be a problem. It's a better practice to keep the rgb colors in the stylesheet and use hexadecimal if you need to set a font color in the html.

Making Sure the Color is There.

Now that we know a lot more about the way to tell the browser what color we want, how can we make sure it gets the message? "I set a color and it went away." "I set one color and others changed!"

Background-color is always going to be a color. Background- can be several things (like background-image). Background can be a color, OR tell a background NOT to color. It is normally used to set several background properties in one declaration. We'll stick with background-color for this tutorial.

Let's take a look at how we effect the background of a div in our stylesheet. For our purpose, we'll use the

#leftBoxHeading {
  • background-color:#c00000;
  • background-color:rgb(191,0,0);
  • }
  • Those are the two standard possibilities to create a background-color. BUT they are the same color, right? Yes, they are. However, most browsers prefer the rgb method versus hexadecimal. Maybe they find it easier to count to 255 without using hex codes 00 through ff. Anyway, when most all browsers see the coding above, they will ignore the hexadecimal property and use the rgb. So, if the browsers prefer rgb, why does the 1.5.7 Classic template use both? If you notice, the Classic template uses rgba versus plain rgb. We'll discuss that next in Site Color Saturation.

    Site Color Saturation

    While some sites prefer bold colors that jump off the screen, others prefer to soften the colors to make it look as if the colors smoothly blend into each other. The softening of a website color is known as saturation. Saturation allows both Hexadecimal and RGB Code to soften the colors that the customer sees on their screen. This is done by adding extra information to either of the methods. It's like painting red on a white wall. If you only cover 80% with the red, the white will show through and make the red look -- less red.

    While we were at it, we decided to use some new coding in the stylesheet. Web colors can be a little harsh on the eyes and sometimes the contrasting colors are just a little overwhelming. With the arrival of HTML5 and newer browser versions, we can change {background-color:#6699cc);} to {background-color#6699cc;background-color:rgba(102,153,204,0.6);}. Both are calls for "Blue Danube" but the real difference is the fourth item in the rgba version. The r, g, and b are the standard numbers for the blue with an added item for opacity. The number can be from 0 to 1 and is called in tenths. 0 means the color is not seen while 1 means that blue is the only thing you can see. 0.5 would only half way hide the color behind it. This feature can lead to some very interesting color combos. One of those interesting results is on mobile devices where the site still shows through the navigation menu as you scroll.

    Multiple Color Calls in Zen Cart Classic Template.

    As of version 1.5.7, Zen Cart's color stylesheet is presented with double-listing colors for each instance. For example, earlier we mentioned the #leftBoxHeading call in the stylesheet. In stylesheet_colors.css around line 222, it looks like:

    If the browser recognizes the rgba property, it will take the blue and soften it to only 60% saturation. In the rare instance that the browser does not recognize rgba code, the browser will use the color with the hex code and present the full blue. Unfortuntely, as mentioned earlier, making the hex code above be #6699cc99 might not be accepted by the customer's browser and cause problems. So having the hex code at eight digits and the rgb with the added a code might result in no color showing at all. That's why none of the stylesheet_colors.css hexadecimal color codes have eight digits.

    Again, you can change the saturation from 0.0 to 1. But, if you are going to use 1 (100% saturation) anyway, you might as well comment out the rgba property to look like:

    Changing the Classic Colors

    The 1.5.7+ Classic Template is based upon using nine different colors for a Zen Cart site. The following will explain the whys and hows of 1.5.7+ colors.

    Of the nine colors used in the template, you can automatically assign four of the nine colors as defaults. Red for links/visited, Orange for warnings, white for text on dark backgrounds, and black for text on light backgrounds. These have been standard for some time in Zen Templates.

    That leaves five colors to be decided and, two of those are once again considered standard. They are two different shades of gray to be used for selection or form input items/fields. One item of note is that all grays will be same hex code for each of the RGB places of the code. In other words, grays are formed with equal amounts of red, green, and blue.

    We find ourselves left with a final three colors that are really the main part of a website's theme. These three colors create our "look" in headings/menus, site backgrounds, and site pages. Using the three in darkest-, dark-, and light-colors gives us a standard theme based on one color as the starting point. In the 1.5.7+ Classic Template, that basic color is #6699cc. In order to make it lighter, we remove the first two digits and add ff to the remaining code. The darkest, #6699cc, is changed to #99ccff for the dark color. #99ccff is changed to #ccffff for the lightest color. The ability to quickly come up with a different-colored theme, is the best part of this template.

    Before we go on, just a quick mention about web-safe colors. There are 216 different colors on the color chart that are unofficially known as web-safe. It's believed that these colors are better for website use as they will render better than colors that are not web-safe. The list is NOT official and not everyone follows its guidelines. For instance, there's not a single gray that's considered web-safe. For the 1.5.7 Classic Template, we used web-safe colors except for the two shades of gray.

    So, for quick review, this template has the following nine colors installed:

    Note that all the rgba calls have 0.6 as the a (transparency) setting. You can easily adjust each one of these to suit your taste. And, with six of the nine colors as standard, you would only need to replace the three main colors to have a totally different template. The above color scheme can be seen at the color swatch listing for this template provided by dbltoe.

    Under this template system, you would simply search for and replace as many of the nine hex- and rgba-codes above as needed to make your site use your own colors. You would need to search and replace the hex- and rgba codes separately as they are not always combined for opacity as in the examples above. Be sure to use a text editor that does not add code to the result. Something like Notepad++ would work just fine.

    Let's say that you want to change the headings and menus on your site from #6699cc to a darker #3366cc. Here are the steps using Notepad++ as the editor:
    1. Open the file includes/templates/classic/css/stylesheet_colors.css in Notepad++ or some other editor that does not embed code when saved.
    2. Click on the Search menu and, then, select Replace. (Notice this step has a key combination in Notepad++ and can be done by using Ctrl + H).
    3. In the Find what block, enter #6699cc.
    4. In the Replace with block, enter #3366cc.
    5. Click on Replace All and your former #6699cc color is now #3366cc.
    6. Save the file includes/templates/classic/css/stylesheet_colors.css. (if you have an override folder for your template, be sure to place a copy of the file in that folder.)
    For the rgba color change, we simply repeat the steps but use the rgba code:
    1. Open the file includes/templates/classic/css/stylesheet_colors.css in Notepad++ or some other editor that does not embed code when saved.
    2. Click on the Search menu and, then, select Replace. (Notice this step has a key combination in Notepad++ and can be done by using Ctrl + H).
    3. In the Find what block, enter 204,102,0,0.6 if you want to change the saturation and 204,102,0 if you do not. (Remember that the 0.6 a attribute is the saturation.)
    4. In the Replace with block, enter 51,102,204,0.8 if you want to change the saturation to 80% and 51,102,204 if you do not want to change the saturation. (51,102,204 is the rgb code equivalent of #3366cc)
    5. Click on Replace All and your former 204,102,0 color (#6699cc) is now 51,102,204 (#3366cc).
    6. Save the file includes/templates/classic/css/stylesheet_colors.css. (if you have an override folder for your template, be sure to place a copy of the file in that folder.)
    NOTE: starting with version 1.5.7, a new stylesheet has been added to the css folder for classic template. That file is in includes/templates/classic/css/stylesheet_zcustom.css. In the original of this file are some color calls. Most significantly is the color for the top, menu-portion of your mobile display. You will need to make the same color adjustments to stylesheet_zcustom.css that you make to stylesheet_colors.css.

    Why the Extra Stylesheet in Classic

    As noted above, the 1.5.7+ Classic Template has an added stylesheet. Stylesheet_zcustom.css was added for convenience for the designer. Virtually all changes to the site's CSS can be done in this file. Imagine that it's upgrade time. All you will need to move to the next site is the two stylesheets and you are done with the new site looking like the old site.

    I'm Still Not Sure I Get It

    There's a sticky support link in the forum, a great color tutorial at w3schools, and the template color sample for this template provided by dbltoe. Please feel free to discuss or suggest additions/deletions/changes to this template in the forum. Please do not PM the author as mail boxes are few and, it's better to have it in the forum where everyone can benefit from the discussion.