Hi There
Managed to figure a lot of our problems out for myself but there's something small still bugging me. I want to have my main body background in #333333 the same as my header and footer, but not underneath the main content of the site. I need to add a background colour to the grid system so that the site content will have a white background and will only be grey outside the 960px fixed width.
[attachment=6436:Screen Shot 2013-02-03 at 22.01.01.png]
Thanks
Spadge
So you want everything between the top navigation menu (Desktops/Laptops, Components, etc) and the top of the footer to have a white background?
There was a thread posted a couple of days ago with a few hints on the solution for this. Here it is - that should give you a fair indication of what you will need to do to get this right.
Yep, exactly. Thanks very much for getting back to me.
Should the #container class exist in styles.css or will I have to add it and point the block to the new class?
Spadge
The specific 'container' classes for grids (such as 'container_16') are set in /skins/yourskin/customer/css/960/960.css - not sure if there is already a 'container' class specified anywhere or not. If you're going to add a CSS class name to a particular grid, you would be best staying away from typical CS-Cart naming conventions as this may be confusing if and when CS-Cart change class names if you decide to upgrade.
Set a a class for the full-width 16 col grids on the “Products” pages.
I used the following to set the class to product-main in the block custom css class for the following site:
http://shyne.myclien…ew&product_id=1
[size=4][font=“arial, helvetica, sans-serif”].product_main {[/font][/size]
[font=arial, helvetica, sans-serif]background-color:#000;[/font]
[font=arial, helvetica, sans-serif]}[/font]
Additionally, setting the css of #container_16 will affect the header, footer and nav blocks as well.
I have already set colours for header and footer classes in the styles.css sheet. Will the container background overwrite these classes? If so how do I get them back on top?
Thanks very much for all the help so far. I will be attempting this when home from work in 2 hours
Spadge
Done it, thanks guys
Though if anyone knows the class which control the Headers (eg: Demo Store, My Account, Customer Service) for the footer menu's that would be greatly appreciated.
Spadge
[quote name='Spadge' timestamp='1360005068' post='154449']
Done it, thanks guys
Though if anyone knows the class which control the Headers (eg: Demo Store, My Account, Customer Service) for the footer menu's that would be greatly appreciated.
Spadge
[/quote]
I know this is a petty, minor issue however when we look at other CS-Cart sites with coloured backgrounds like ours the content background loads first before the main background and all text is instantly legible. With ours there seems to be a flash as the backgrounds load from the different CSS files. I know it's short but if it's not doing it for other people then obivously there's a problem in our coding. As I say, it's so short it shouldn't be worth bothering with but we're investing a lot of time and money into this and would like it to be perfect.
The site is here
[url=“http://www.1stoppcshop.net/index.php”]http://www.1stoppcshop.net/index.php[/url]
Spadge
[quote name='Spadge' timestamp='1359994092' post='154438']
I have already set colours for header and footer classes in the styles.css sheet. Will the container background overwrite these classes? If so how do I get them back on top?
Thanks very much for all the help so far. I will be attempting this when home from work in 2 hours
Spadge
[/quote]
Did you get this sorted out? If I understand what you're saying I've got the same problem. I have a background colour that runs the full width of the screen and I want the central column (outlined in blue in attached image) to have a different background colour. Firebug identifies the css class of that area as cm-template-box but changing that has no effect and neither does creating a user-defined css class and applying it to that grid - it's like main background colour is over-riding those things - which is ridiculous - its a background - ie. its in the back … so what was the solution?
[attachment=6524:background.png]
Use !important to override other definitions.
ie.
.your-class {
font-color: #000000 !important;
}
Seems to make no difference
Discovered what the problem is - for some reason it's not reading the url of the background image - which is strange because its reading the url I have for the footer background image.