Extend Black Area in Dark Whiteness Theme

I am just starting CS-Cart and starting to modify dark whiteness theme to see if I can meet my website style. I have replace the header image with an all back .gif successfully but I cannot find the color adjustments for the side portions of the header left and right in any css style sheet?

Could someone advise how to change their color setting?

Please see image


I´ve never used that skin before…

normally the background it´s a repeated image… I´m just checking in the demo site of cs-cart and, yes, it´s a repeated image…

To change that grey color to black, just modify this file:


with photoshop or any image program.

Hey thanks, that sort of did the trick, I still have the very top left and right sections left with the old gray color must be more settings or images? Any clues? I looked at them all and didnt find a match please see new screenshot…


Hi jaghh

I´m just trying to fix your problem … but… I dont know really what happened… it should work doing what I said you…

Did you change the image size of your:



I have tried to do it in my computer locally and it worked. Remember if you changed the high size of any image in your header.


Hey nice to see it working for someone, no I didnt change the size of the header image just opened it in Photoshop and blacked it out and resaved it so I dont know whats gone wrong :frowning:

No… I mean you change the high size of this image:


or check if you change any margin top or padding top of any image in your header of the css file

I didnt think I cropped the high size but to test I added more black to the image canvas today and it fixed the problem, must have been tired haha…thanks so much for your help!!!

I think I got everything how I want it hopefully this is my last question but I want to shrink the overall height of the black part of the header (about 15%) so it is not quite as think to match my existing site. Any thoughts on where I could take it out of in code?? Tried experimenting with the css styles but couldnt find the right value.

I dont know really what you really mean, could you please post any image or just try to explain it in a different way? (simple) , my english is not good enough

No problem, where are you from anyway? I post an image of my existing site and also of my “cs-cart store site” I just want the headers to match a little more, doesnt have to be exact, just want to shrink down the height of extra black space on cs-cart site, but I do not want to change the logo size.

existing site.png


Ok I got it… I´ll try to work on it later on jhagg, now I´m little bit busy.

I´m from Spain.

Oh very good thank you…and Pao Gasol one of my favorite players!! :slight_smile:

jejeje… yes Pau it´s a good boy!!!

About the header, just change the image I have tried header.jpg to 1000 x 100 px

then I have changed to this my css menu :

/* top styles */

#top_menu {

padding: 0px 8px 0 0;

text-align: center;


#top_menu ul li.first-level, #top_menu ul li.first-level.cm-active {

height: 43px;


#top_menu ul li.first-level a, #top_menu ul li.first-level a:hover, #top_menu ul li.first-level.cm-active a, #top_menu ul li.first-level.cm-active a:hover {

display: block;

font: bold 108%/123% Arial, Helvetica, sans-serif;

padding: 13px 40px;

color: #bfbfbf;


#top_menu ul li.first-level:hover, #top_menu ul li.first-level:hover a, #top_menu ul li.first-level a:hover, #top_menu ul li.first-level.cm-active a, #top_menu ul li.first-level.cm-active a:hover {

color: #ffffff;

background: #232129 url(images/top_tab_active_bg.gif) repeat-x left top;


#top_menu ul ul {

margin-top: 0;

padding-top: 3px;

padding-bottom: 4px;

text-align: left;


#top_menu ul li.first-level:hover ul li a, #top_menu ul li.first-level ul li a, #top_menu ul li.first-level ul li a:hover, #top_menu ul li.first-level.cm-active ul li a, #top_menu ul li.first-level.cm-active ul li a:hover {

background-color: transparent;

padding: 5px 20px 4px 2px;

font: bold 100% Arial, Helvetica, sans-serif;


I doesnt have to much margin for make it small, but you will save almost 50px

Hope it helps

Thank you as always for help…our results were not so good with this code, it did shrink the header height perfect but caused other issues maybe their is bug in code you can look at? I attach image before and after with comment on after image.



latest code.png


It works perferct for me… maybe you have made a lot of changes to Dark Whiteness…

but it works for me in IE and Mozilla, not tested in chrome

[quote name=‘Telemaco78’]Jhagg

It works perferct for me… maybe you have made a lot of changes to Dark Whiteness…

but it works for me in IE and Mozilla, not tested in chrome[/QUOTE]

I tested carefully again today and got same result in any browser, I havent made any changes to the template but the ones we are discussing here, so its odd…

Finally got this working and solved it was an error in how I was pasting it in, your code was perfect Telemaco!

Hey buddy, so I got it perfect in Chrome thanks to you,. but Internet Explorer is still messed up…is there different code I need to inject for that or something in ie.styles.css?

Please see attached images



Is anyone else able to help me figure out how to shorten the header height for Internet Explorer? Telemaco’s advice worked perfectly for Chrome and other browsers but IE apparently needs separate code??

Relevant Page:


In what version of IE the image is misplaced?