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:
- 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.
- 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 https://stackoverflow.com/questions/...70174#25170174. 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:
- line 173 uses flot versus the correct float.
- line 342 remove the extra colon (:) after #navMainWrapper:
Line 619 of that file
Code:
div.search {display:block; margin:0 auto;min-height:40px;max-width;100%}
Should be
Code:
div.search {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.
Bookmarks