Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Help to identify area at top of header image

Help to identify area at top of header image

Views: 626

Results 1 to 4 of 4
18 Jul 2012, 6:54 AM
#1
irori avatar

irori

New Zenner

Join Date:
Jun 2012
Posts:
42
Plugin Contributions:
0

Help to identify area at top of header image

Hello everyone,

a simple question i hope.

Please have a look at my shopping cart https://www.ishafairtrade.com.au/zencart

There is a white area at the top of the header image. Where do I change the colour for this in the stylesheet.css?

Thank you so so much in advance!

18 Jul 2012, 8:07 AM
#2
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: Help to identify area at top of header image

irori:

Hello everyone,

a simple question i hope.

Please have a look at my shopping cart https://www.ishafairtrade.com.au/zencart

There is a white area at the top of the header image. Where do I change the colour for this in the stylesheet.css?

Thank you so so much in advance!

The "white area" is actually a BACKGROUND IMAGE that is part of your template. It's in the HEADER DIV.

If you want to NOT have an image there, and have the background where that image sits, be your background colour, then in your stylesheet css, find:

/bof header/
#headerWrapper {background:#2B1915 url(../images/header-bk.jpg) no-repeat center top;margin-top:25px;}

... and remove the reference to the image.
/bof header/
#headerWrapper {background:#2B1915;}

If this leaves too big a gap, you could always try:
/bof header/
#headerWrapper {background:#2B1915; margin-top: -30px;}
(change the "minus 30px" to a higher value to make the gap smaller)

Or you could change the image:
header-bk.jpg
... to reflect your own colours and rounded corners.

19 Jul 2012, 9:36 AM
#3
irori avatar

irori

New Zenner

Join Date:
Jun 2012
Posts:
42
Plugin Contributions:
0

Re: Help to identify area at top of header image

schoolboy:

The "white area" is actually a BACKGROUND IMAGE that is part of your template. It's in the HEADER DIV.

If you want to NOT have an image there, and have the background where that image sits, be your background colour, then in your stylesheet css, find:

/bof header/
#headerWrapper {background:#2B1915 url(../images/header-bk.jpg) no-repeat center top;margin-top:25px;}

... and remove the reference to the image.
/bof header/
#headerWrapper {background:#2B1915;}

If this leaves too big a gap, you could always try:
/bof header/
#headerWrapper {background:#2B1915; margin-top: -30px;}
(change the "minus 30px" to a higher value to make the gap smaller)

Or you could change the image:
header-bk.jpg
... to reflect your own colours and rounded corners.

Thank you so much, will give these a whirl and see how I go :)

19 Jul 2012, 10:02 AM
#4
irori avatar

irori

New Zenner

Join Date:
Jun 2012
Posts:
42
Plugin Contributions:
0

Re: Help to identify area at top of header image

Ok , your first suggestion worked a treat, the centre column goes right up to the top of the screen but that suits me fine and there is not gaps, I didn't have to try the others but may just change the image colour later if I decide that I like the rounded edges :) Thankyou