Making Wabi Header Taller [#252246]

I wanted to increase the height of the Wabi header to 105px, so I tried adjusting the style.css this way:

table#header {
	width: 100%;
	padding: 0px;
	margin: 0px;
	vertical-align: top;
	line-height: 0em;
	height: 105px;
}

This works to a point, but now there are some little glitches around the ends of the menu table (see attached image and the yellow arrows). I'm just wondering what other properties I would need to adjust to correctly heighten the header area (where the logo goes). I can go through some trial and error to figure this out, but I figured someone might quickly be able to point me in the right directions. Thanks in advanced for any tips.

Comment	File	Size	Author
	menu_trouble.jpg	51.63 KB	bomarmonk

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

pixture CreditAttribution: pixture commented 29 April 2008 at 00:36

Hi,

Wabi theme uses the body stylesheet to realize top and bottom portion of the background.

body {

background: #5b90c4 url("images/bg-header.png") repeat-x top left;

}

To address your issue, you need to stretch the bg-header.png from the 112px height (current) to 112 + (105-80) = 137px height.

The original height of the bg-header.png is 112px (80px header height + 32px menubar height). Once you do this, you need to place this to the correct directory for your color scheme.

Please refer to my article about customizing recolorable theme for more details about "correct directory for your color scheme". In addition, be sure to edit the correct bg-header.png file according to the article below.

http://en.pixture.com/drupal/node/14

The best way to address this is to modify the color/base.png file. But I guess this is not easy. Good luck!

Comment #2

bomarmonk CreditAttribution: bomarmonk commented 9 May 2008 at 21:44

An easy way to increase the header height by 25 pixels, in this case: edit color.inc. I believe, since there is really no information stored in "body.png" for the header.png part of this (I'm using a custom logo stored outside the theme), you can simply edit the color.inc file this way: change

	'images/bg-header.png'		=> array(  0,   0,   8, 112),

	'images/bg-header.png'		=> array(  0,   -25,   8, 137),

This seems to work rather well, but I may have missed something that makes this problematic. Let me know if anyone sees anything problematic with this approach.

Comment #3

aklu CreditAttribution: aklu commented 17 June 2008 at 21:11

I haven't modified anything in the css files of the wabi theme, but I am seeing the same issues as reported here. Has anyone found a solution to this?

Here's my site if you want to see for yourself: www.omahashots.com

Aklu