Hi

www.leadbetters.co.uk/newsite/index.php/home
J 3 Responsive template

Client is driving me mad changing the background colours. He wants the site to work like this:
www.basilfry.co.uk

I've got half way there using this css:

#mainWrap, #navwrap {
background: #27417a;
}

#gradient, #grid1wrap, #grid4wrap, #headerwrap, #footerwrap, #topwrap, .zen-container
{background:#27417a;}

But I can't get the centre of the page to go white.

Also, I need to add some padding to make the menu and footer bars work.

Is this possible? Has anyone any ideas?

Thanks

Ian

This is one

#grid1wrap .zen-container {
background: #fff;}

Another two

#footerwrap .zen-container {
background: #fff;
}

#grid4wrap .zen-container {
background: #fff;
}

With the center of the page do you mean the article content area?

Hi Paul - thanks for getting back to me.
Not the actual article content, but the colour behind it needs to be white.
Haven't had time yet to check out your suggestions - I'll have to do it later.
Thanks again
Ian

Hmm. That doesn't seem to have done anything...

You need to add your own colour value of #27417a

Hi Paul - thanks for getting back to me.
I'm not making myself clear enough
I've attached a screenshot with two areas marked in red.
In the lower area, I need all the blue background to show white as in the header and footer, which work more or less fine.
The upper area outlined in red shows how the shadow on the nav bar is not working because the whole central area needs some extra padding around it.
Is this possible?
Sorry if this is all a pain...
Thanks
Ian

#mainWrap .zen-container {background: #fff;} gives you the main content area

You have inline styling for the bottom menu

<div style="background-color: #27417a; border: 1px solid #27417a; border-radius:5px; font-size: 100%; color: #ffffff; text-align: center; padding: 5px 0px 5px 0px; box-shadow: #888888 5px 5px 5px; margin-bottom: 10px;"><strong>High Wycombe • Marlow • Maidenhead • Henley • Gerrards Cross • Beaconsfield • Slough • Chesham</strong></div>

The main menu has custom styling

#navwrap ul.nav {
background-color: #27417a;
border: 0px solid;
border-radius: 5px;
border-color: #004f9d;
font-size: 110%;
text-align: center;
box-shadow: #888888 5px 5px 5px;
}

and also you may need #navwrap .zen-container {background: #fff;} but it will depend on what you do with above

Cheers
Paul

Cracked it! Thank you paul.
The navbar and bottom bar are fine - I don't think I need to change them.
Last challenge is the padding. I need to have 20px white space on either side of the whole thing now. Any ideas?
Thanks again,
Ian

However, he'll probably take one look, and change it all back again.
Luckily for him, I've worked with him for years, he's a really nice guy and he pays his bills
Ian

You need to add padding to the container elements

.zen-container {padding:20px}

#grid1wrap .zen-container {padding: 20px 20px;}

you may trip up on IE with the images space wise - not sure on that

Cheers
Paul

Hi Paul - this doesn't seem to make any difference…
Thanks
Ian

Ah, sorry - working in bits. I'll have another look…
Thanks
Ian

Hi Paul - the code you gave me didn't seem to work.
But I've managed to get the bottom of the page right using
#mainWrap .zen-container {background: #fff; padding-left:20px; padding-right:20px}
I still can't sort out the header and the menu…
Thanks
Ian

Hi Ian,

Both styles work but I think your problem is they are being overridden by code further down the custom.css file

with the menu you want space like the other rows to the left and right?

Cheers
Paul

Hi Paul - that's right, and left and right of the four modules under the menu as well.
I'm sorry I'm n to clever enough to work this out for myself.
Any idea which custom css is overriding the new code? Chances are he'll want to change it all back once it's working so I'll need to know what to put back…
Thanks
Ian

Hi Ian,

Add the snippet at the bottom of the css file with it wrapped in a comment

I work with parts of the site in a commented area

Then we can best see what is happening

Cheers
Paul