By egizzi on

I just uploaded the garland them. I want to make some visual changes.

1) The header is too short vertically. I would like a taller header (the blue horizontal area). I increased the body.png size but that didn't solve it. Any tips?

2) Also, I would perhaps like to make a white horizontal section above the existing header. How can I do that?

I imagine this will involve making changes to the page.tpl.php file and some css change, but some help/ideas would be greatly appreciated!

⋅ Categories: Drupal 5.x

Comments

nancydru’s picture

nancydru
she/her/hers
Primary language English
Location Boston
commented

Above the header, there is already a header region defined, so you can use that. Change the min-height and background.

#header-region {min-height: 1.0em; background: #fcf6fd url(bg-navigation.png) repeat-x 50% 100%;}

The heading bar height is set here:

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

Nancy W.
Drupal Cookbook (for New Drupallers)
Adding Hidden Design or How To notes in your database

NancyDru

egizzi’s picture

egizzi commented

Hi Nancy-

That worked well. Thanks for your quick and accurate response!

-Elio

egizzi’s picture

egizzi commented

I have successfully made the header taller. But the placement of logo.png needs adjusting. I've looked at the style.css and I'm not sure what to modify. I'd like the new logo to be placed at an absolute position of (0,0) in the header (so no margins). How can I do this?

Lastly, what file would I have to modify to make the file name "logo.jpg" instead of "logo.png". jpeg files I think are smaller than png files.

Thanks!

nancydru’s picture

nancydru
she/her/hers
Primary language English
Location Boston
commented

Unfortunately, the logo is stuck inside the H1 tag, so CSS will only move it relative to the tag, not the header area.

When you change the logo in the Admin >> Site building >> Themes, you can specify any .png, .gif, or .jpg to replace the standard. I never monkey with the distributed logo.

Nancy W.
Drupal Cookbook (for New Drupallers)
Adding Hidden Design or How To notes in your database

NancyDru

egizzi’s picture

egizzi commented

Hi Nancy-

I simply removed the h1 tags from page.tpl.php and that solved it.

Duh to me for the logo.jpg.

Thanks.

nancydru’s picture

nancydru
she/her/hers
Primary language English
Location Boston
commented

Nancy W.
Drupal Cookbook (for New Drupallers)
Adding Hidden Design or How To notes in your database

NancyDru

snerky’s picture

snerky commented

Hi
I tried altering the line in style.css:

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

I changed the 80 to 180 but it made no difference. CAN SOMEONE PLEASE give a simple solution to changing the header height in garland? I'm amazed there doesn't appear to be a simple way to change headers within themes, as it is the first thing anybody who installs Drupal would want to do and Drupal does so much to ensure people shouldn't have to fiddle with code. I'm not knocking anyone here (respect to all involved in creating these wonderful tools) but this is such a basic requirement for simple users starting out. Maybe there is a module or something that does it that I don't know about?

By the way, for those who haven't caught it, this is a useful tip for IE:

#wrapper #container #header #logo-floater {
position: absolute;
z-index: 10; /* add this as instructed in http://drupal.org/node/109292 */
/* the effect of this is to bring the logo to the front in IE*/

snerky’s picture

snerky commented

I found out how to make the height change!!!
Here's how......

AFTER changing the style.css, you have to log in as Admin and make a CHANGE of some kind to the Theme settings. For example, I unchecked the display of the Site Name. Save this and as if by magic the css change has taken effect. Then you can just change the Theme setting back the way it was. Easy! if bewildering.

No idea why this works, but it does.
My previous point still stands however - this has to be easier for newbies.

That's all folks.