main content background different to the site background

Developers Frontend
1

Hi everyone.



i am looking to get [color=#000088][font=Monaco, monospace][size=2]<[/size][/font][/color][color=blue][font=Monaco, monospace][size=2]div[/size][/font][/color][color=#000088][font=Monaco, monospace][size=2]class[/size][/font][/color][color=#000088][font=Monaco, monospace][size=2]=“[/size][/font][/color][color=#FF0000][font=Monaco, monospace][size=2]container_16 [/size][/font][/color][color=#000088][font=Monaco, monospace][size=2]”> background and the [/size][/font][/color][color=#000088][font=Monaco, monospace][size=2]<[/size][/font][/color][color=blue][font=Monaco, monospace][size=2]div[/size][/font][/color][color=#000088][font=Monaco, monospace][size=2]class[/size][/font][/color][color=#000088][font=Monaco, monospace][size=2]=“[/size][/font][/color][color=#FF0000][font=Monaco, monospace][size=2]grid_16 central-area[/size][/font][/color][color=#000088][font=Monaco, monospace][size=2]”> to be two different colors[/size][/font][/color]



i have tried many different bits of code i have found around the place but nothing works.



at the moment the grid_16 central-area appears to be transparent. I want to make only that bit white.

The site i am working on is vspace.net.au/beachpool



I am using the following to make my header extend down past the menu an that is what is setting the main background





.main {

background-color:#ccedfc;

background-image:url(http://vspace.net.au…/central_bg.png);

background-position:0 0;

background-repeat:repeat no-repeat;

}

2

Just getting a server not found error on that URL.

3

reply i must be dyslexic tonight it is vspace.net.au/beachpool



i have fixed in the above post too

4

Create two new CSS classes.



.header-background {
background: #000000;
}
.central-background {
background: #FFFFFF;
}


In Design>Blocks>Default, the Grid 16 for the 'Header' area should have the custom “header-background” CSS class applied. Likewise for the central content.



That should do it.

5

I have done that and it has worked a treat.

However the top menu is a bit shorter on each side than the central block



A way around it for the font page was to create a new 16 inside the central block and replicate all the existing blocks and move them.

This seems like the hard way to do it though. There must be an easier way to make the menu bigger rather than trying to make the central area smaller



you can see what i mean here on a product page

http://vspace.net.au…&product_id=244



it looks like i need the topmenu_dropdown.tpl to be the same width as the block_manager/render/grid.tpl

6

I suggest you revert the widths and margins you have changed for containers (grids) as this doesn't happen in the default install. I note there are changes to certain widths and margin-left and margin-right added where it isn't necessary.

7

It is a clean install and i have not changed anything in that aspect.

8

Give the grid which contains your top main menu a custom CSS class name, eg. header-menu



Create the relevent CSS in your stylesheet.



Set the styling as follows:



.header-menu {

width: 960px;

margin-left: 0px;

}

9

THanks so much that did the trick.

I had to set the left margin to -10px but that was all.



You are a life saver!



Now to figure out all the other tweeks i want

10

Glad to hear you solved the problem.

11

Beachpool site is looking good. :) If you want to affect the curves of the search box, (they’re more rounded than any other design element in the v3 skin and look ‘off’ IMHO) Look for; .search-input class in styles.css - change the various “border-radius” properties (theyre for each browser) down to around 3px



Sorry for throwing my 2c in!



-Scott.

12

Thanks scott i used your advice. i also combined the search box into the menu as well.

I have it with the same radius as the actual menu

13

[quote name='Confusion' timestamp='1363344176' post='157837']

Thanks scott i used your advice. i also combined the search box into the menu as well.

I have it with the same radius as the actual menu

[/quote]



Looks great!

14

Great design on your store Confusion!