Ive been able to adjust the space between the top bar( where the logo is located) and the top of the homepage content box, but where is the adjustment for the height of the BAR across the the top?

Comments

bwv’s picture

This is from your style sheet:

#header-region {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#E1E1E1 url(bg-navigation.png) repeat-x scroll 50% 100%;
min-height:1em;
}

Change min-height to increase or decrease the height of the top bar.

BNDAZ’s picture

thank you...what is em? I.E 1em can i change it to px?

bwv’s picture

Yes,, you can use px instead.

BNDAZ’s picture

i cant find that block of code...
I fopund this:
#header-region {
min-height: 1em;
background: #e1e1e1 url(bg-navigation.png) repeat-x 50% 100%;

im using notepad++ what line approximately?

bwv’s picture

That's the correct block... I'm using Firebug.

pbarnett’s picture

That's the line. Firebug adds stuff, but that's the line.

Change the min-height to however many pixels you want.

em scales to pixels, but the exact scaling tends to vary between browsers.

Pete.

BNDAZ’s picture

just curious before i change anything, it seesm to me that line indicates a MINIMUM height. 1em translates in to 1 px and is set a such now, how/why is the bar much taller than "1" now, is that because of the height of the image in the header?

vm’s picture

using firefox with firebug addon you can remove the line that calls the image and test your theory directly in your browser without physically changing the css file in the theme until you are ready to.

BNDAZ’s picture

i installed firebug, ill mess with this method, whats the navigation to to that? What i right click and choose inspect element im not getting a full style sheet.

vm’s picture

you won't you only get the css used in that element. Firebug documentation and videcasts found on the web may help speed up the process of learning how to employ it.

pbarnett’s picture

Click on the blue arrow in the Firebug toolbar, then click on the element on the page.

You'll see the style for the element in the right hand pane of Firebug, and the source in the left.

If you click in the source window, you can scroll up and down with the arrow keys and the styles will follow the highlighted source.

See http://mongolia.charityrallies.org/sites/all/files/Screenshot-Michigan-R...

Pete.

pbarnett’s picture

1em = 1px? 1em is the default font size!

See http://jontangerine.com/silo/css/pixels-to-ems/

The div will expand to contain the image if there's no explicit height defined.

Pete.

BNDAZ’s picture

Very nice, thank you

BNDAZ’s picture

ok in changing that attribute i find that it adds space ABOVE the "title bar" so to speak. what i want to change is the height of the colored area in which the title of the site is contained. It that as simple as just modifying the image that is used?

pbarnett’s picture

Don't quote me, as I can't look at the site, but I'd say so.

Pete.

BNDAZ’s picture

Hmmm, tried changing the image height and nothing seemed to change.
Is there anything else i need to do once i replace the image in order for it to work?
i resaved the theme settings and refresh the browser...

BNDAZ’s picture

push, still looking a way to do this..

pbarnett’s picture

The header height is set by

#wrapper #container #header {
height:80px;
}

at line 360 of Garland's style.css

Pete.

BNDAZ’s picture

i changed it to 40px, cleared cache ran cron, no change...

pbarnett’s picture

Garland isn't the easiest of themes to mess with, but the change affected my Garland theme as soon as I reloaded the page.

Pete.

bwv’s picture

Do you have the color module enabled? If so, take a look at this:

http://drupal.org/node/725532#comment-2645246