why can't I change table header colors in stylesheet.css

[makeit4me]

in fact ANY color I change within the stylesheet.css DOES NOT take effect? what more do I have to do? I load each page NOT from cache but new page each time, plus to make sure not going crazy, call someone who's never even heard of site to load page and still the original blue colors are shown

[♥14steve14]

If you are using 2.3.1 the stylesheet.css does not control the colours. As there are no TD calls now, they and a lot of other parts should have been deleted from the stylesheet. You now need to look in the catalog/ext/jquery/ui/redmond/jquery-ui-1.8.6.css. It is recommended that you do not alter this file, but go to themeroller and create a new theme. If you require to use a different theme i uploaded a package that included all the themes at the time. It can be found at http://addons.oscommerce.com/info/7757

[makeit4me]

it baffles me as to why the most basic thing is done in the most complicated way - the table header is actually a background image or SEVERAL background images involving MULTIPLE .js files!!!!!!!

 

don't know which one I can delete w/o disrupting layout. TOTALLY FRIGGIN' STUPID AND NON-CUSTOMIZABLE! I'm not a graphics artist, this commerce (key word being COMMERCE) tool doesn't indicate graphic design required either

[npn2531]

Actually the way it is done is to make it simpler to customize from the admin, in other words to customize the site if you are not familiar with CSS or html editors.

 

However if you want to start with a kind of blank slate, and get a sense of what is going on with the blue headers and backgrounds go to file mentioned by Steve above, catalog/ext/query/ui/redmond/jquery-ui-1.8.6.css and change this:

/* Component containers
----------------------------------*/
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

to this:

/* Component containers
----------------------------------*/
/*.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }*/
.ui-widget {}
.ui-widget .ui-widget {}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { }
.ui-widget-content { border: 1px solid #FF0000; color: #000000;  margin-bottom:10px;}
.ui-widget-content a {color: #FF0000; }
.ui-widget-header { border: 1px solid #000000;  color: #000000; font-weight: bold; }
.ui-widget-header a { color: #FF0000;}

 

With some patience you can use that single file and change a great deal of what the site looks like. Just keep a backup of that file or know how to download a new one from the JQuery site, or your original OSCommerce install.

[multimixer]

You don't need to be any graphic designer, all you need to do is, to go to themeroller, create a new theme and drop it into your store. You don't need to worry if or how many css or js files are involved (I made a post here about that), alternatively you can use "theme switcher" addon.

 

Other option is you do as above (just saw the post) or you can also add additional rules to your stylesheet.css file, targeting ui-widget-header (for the heading stuff) and adding anything you want to it, replacing in that way any previous settings.

 

Really many options

[makeit4me]

thanks for letting me know where the problem child was. I simply entered the html color code I wanted, removed the background url code, and got what I wanted. pretty lame to have an option to set colors WITHIN the stylesheet.css and it does nothing! perhaps for future build, place a comment - to change this area's color go to this file, this area to make changes!!!

[makeit4me]

thanks for this info, I try this later, for now I simply have the table's header color, border and cell colors I wanted including styled (ridge, groove, etc.) if changing that destroys anything then man, talk about bad

 

You don't need to be any graphic designer, all you need to do is, to go to themeroller, create a new theme and drop it into your store. You don't need to worry if or how many css or js files are involved (I made a post here about that), alternatively you can use "theme switcher" addon.

 

Other option is you do as above (just saw the post) or you can also add additional rules to your stylesheet.css file, targeting ui-widget-header (for the heading stuff) and adding anything you want to it, replacing in that way any previous settings.

 

Really many options

[♥14steve14]

it baffles me as to why the most basic thing is done in the most complicated way - the table header is actually a background image or SEVERAL background images involving MULTIPLE .js files!!!!!!!

 

don't know which one I can delete w/o disrupting layout. TOTALLY FRIGGIN' STUPID AND NON-CUSTOMIZABLE! I'm not a graphics artist, this commerce (key word being COMMERCE) tool doesn't indicate graphic design required either

 

 

I certainly hope things will be improved if ever version 3 is made stable and released.

[npn2531]

thanks for letting me know where the problem child was. I simply entered the html color code I wanted, removed the background url code, and got what I wanted. pretty lame to have an option to set colors WITHIN the stylesheet.css and it does nothing! perhaps for future build, place a comment - to change this area's color go to this file, this area to make changes!!!

 

It actually not a problem at all, nor lame, but pretty well thought out. If you are adding a color to an element in the stylesheet and are using proper form (just standard CSS) and nothing changes, it is because there is another element in one of the other stylesheets (or same stylesheet) that is overriding your color. It just takes learning the CSS in OSC. Tedious, but not rocket science.