Thread: Changing colors

Results 1 to 3 of 3
  1. #1
    Join Date
    Jul 2009
    Plugin Contributions

    Default Changing colors

    Hey guys, I did a search but could not find what I was looking for so I am sorry if this is a redundant question. My website is What I am trying to figure out is that I want to change the pages so that they do not have a white background. I am fine with the blue stars on the outer shell, but want to put a different color for the rest of the page. What CSS page or where do I go to change this. I have tried a couple different areas but it did not change. Any advice would be greatly appreciated. I am running Zen v1.5.7b
    Thanks in Advance

  2. #2
    Join Date
    Sep 2009
    Stuart, FL
    Plugin Contributions

    Default Re: Changing colors

    To your template's stylesheet2.css, line 304, add a background-color: blue; (or whatever color you want) to the definition for #main-container.

  3. #3
    Join Date
    Jan 2004
    N of San Antonio TX
    Plugin Contributions

    Default Re: Changing colors

    With the way you are your template have set your colors, it can create a problem in visualization during load. I know you've seen sites that have certain areas flash colors from one to the next as they "appear" on the screen.

    Also, too many colors can slow down propagation of a page to the public. Of course, there are ways of pre-loading to stop the jumping colors and other "distractions" but they often can be avoided by simply placing the colors in the right place.

    Consideration also needs to be used with colors that will have some degree of opacity. If a color is somewhat "see through" you have to take into account the color "behind" it.

    Let's take a walk through changing your site by removing colors and adding opacity.

    You have two colors and an image currently involved in the creation of the "look" for the main-container. The body tag has an image and a color while the main container has another.

    My point being... There are many ways to accomplish your goal. If it is to have stars throughout the pages, the color to use is actually 'none'.

    For example:
    1. In stylesheet2.css line 1, take out the #000000 background on line one.
      • Comment out the color call (/*background:#000000;*/)
      • Tell it not to use a color (background:none;)
      • Delete the background call completely.

    2. In stylesheet2.css line 304, tell it not to use a color (background:none;)

    Now you have a site that uses the stars almost exclusively and, you did it by taking away colors rather than adding to them. At this point the purists would advocate leaving the #000000 background just in case the stars image is lost so that at least a semblance of the "effect" would remain. It's a consideration but not used in this demo.

    Changing background to none on line 25 of stylesheet_module_tabs.css gives you an even fuller version of the stars.

    For a more interesting background for that area, make the existing #fff into #ffffff80. This throws an opacity into the mix. The last two digits are hexadecimal just like the color numbers and follow a chart found at That's why I used 80. It's really the 50% mark on opacity. If your colors are rgb, they would change to rgba with .00 being the lowest and 1 being the highest.

    Of course, you will need to make sure any items in the foreground meet the requirements for accessibility but, you see how often it is really a matter of taking away color.

    As you can see, sometimes taking a color away can be the answer. Sometimes it can be opacity. Change the call on line 1184 of stylesheet2.css to #ffffff80 takes us even closer to a unique look. Changing line 1 of stylesheet_footer_menu.css really makes life interesting. Line of stylesheet_betterCategoriesEzInfo.css to #ffffffe80 is just a whole new world.

    Above all, keep in mind that your stylesheet may never give a correct look unless it's code is correct.

    Your responsive.css has nine calls using *zoom which is totally non-standard and was used as a work-around for old versions of IE.

    Also, in that stylesheet:
    1. line 173 uses flot versus the correct float.
    2. line 342 remove the extra colon (:) after #navMainWrapper:

    Line 619 of that file
    Code: {display:block; margin:0 auto;min-height:40px;max-width;100%}
    Should be
    Code: {display:block; margin:0 auto;min-height:40px;max-width:100%;}
    Not many errors but each one can make a big difference in the "look" of the site. Different browsers react differently to mistakes.



Similar Threads

  1. How can I change link colors in header, without changing all other link colors?
    By coreyalderin in forum Templates, Stylesheets, Page Layout
    Replies: 9
    Last Post: 20 Jun 2012, 03:17 AM
  2. changing colors
    By pearljamgurl in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 1 Jan 2008, 01:18 AM
  3. Changing colors
    By geovino in forum Basic Configuration
    Replies: 1
    Last Post: 1 Jul 2006, 10:15 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
Zen-Cart, Internet Selling Services, Klamath Falls, OR