Hi I am making some modifications to the CS-Cart Basic Template. My website can be seen at
www.microreef.co.uk
I have implemented a background and wish to keep the main area white for now, however I need to remove the white background from the header.
I have edited styles.css and I removed the colour from:-
#container {
border: 0px solid #e3ebf0;
border-width: 0 0px;
background-color: #ffffff;
}
However it removes the white from the whole central column. I just want to remove the white background from the header area. Does anybody know how this can be achieved via the CSS edits.
Thanks for your help in advance.
Matt
You would have to add another block level element to the #container with a top margin equal to the height of the header with a white background or if you have access to PSD create a repeating image with transparent to white gradient to use as a background for #container and have the transparent portion span the height of the header
[color=#282828][font=arial, verdana, tahoma, sans-serif]#container {[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]border: 0px solid #e3ebf0;[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]border-width: 0 0px;[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]background-color: #ffffff url(images/background.png) 0 0 repeat-y; /*[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]}[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]For some reason the #header div spans the entire #container element which doesn't really make it a header. If you look at the code #header contains both the #content and #footer elements.[/font][/color]
[color=#282828][font=arial, verdana, tahoma, sans-serif]I would recommend upgrading to CSC-3 as the markup and 960 grid with blocks would make this a whole lot easier.[/font][/color]
Hi, thanks for your reply. I will have a look into it. I tired upgrading before, but when I used the transfer tool that comes with cscart 3 it copied all my content etc over but it was a right mess. It seemed to create loads of additional blocks on pages and all sorts of things. This is why I have put it off due to probably having to manually transfer everything over.
I have tried implementing the above however cscart doesn't seem to like it. I have cleared the cache etc and refreshed and it just removes the white. I created a png image with a transparent to white gradient. Do you have any other suggestions?
TIA
Matt
Add this to your styles.css file and clear your cache.
[color=#000000][font=Consolas,]#content {[/font][/color]
[color=#000000][font=Consolas,]background-color:#fff!important; [/font][/color]
[color=#000000]}[/color]
[color=#000000]You will need to adjust the padding on your site or your sideboxes will have no spacing to separate them from the background image[/color]
Thanks very much for that, its done exactly what I needed, think I may just need to have a look at adjusting the width a little to make the blocks look a bit better. Thanks for your help anyway its much appreciated.
Matt