Picking up on "Header changes" (closed at http://drupal.org/node/228783) on how to use a custom background header graphic as a fixed masthead & logo image containing the site name and slogan -- yet with Sky's style-based logo, name, and slogan options disabled, I'm stuck!

Jacine gave the following clue: "...you would have to change the background image with CSS. Changing the location of the background image for the header, and setting the height manually should work fine."

As for setting height manually, in theme/sky/style.css, I changed the height variable to the exact height of my image (195px),

From,

#header {
background:#5B789F url('images/bg-header.jpg') no-repeat left top;
border-bottom:#eee;
height:auto;
}

To,

#header {
background:#5B789F url('images/bg-header.jpg') no-repeat left top;
border-bottom:#eee;
height:195px;
}

However, as for moving the header bg image location, this looks like a PHP matter, which goes beyond my scope... so any help is much appreciated!

Thanks,
Toby.

Comments

chrisindallas’s picture

chrisindallas commented

I'm also playing with this. My header is about twice as big as the default in the Sky theme.

I have changed the height, and that seems to have moved the content down correctly, but the primary links bar is in the middle of the header. Also, I would prefer to keep the site name in the same place relative to the content and add the height to the top of the page, if that makes sense.

I don't see what determines the placement of the navigation bar with respect to the rest of the header.

Any help with this would be greatly appreciated.

Thanks,
Chris

chrisindallas’s picture

chrisindallas commented

OK, figured out I could move the primary links bar to the bottom of the new image by adding

height: 160px;

in the #header .site_name section

This was in addition to adding height: 200px; in the #header section as described by Toby (pulicme).

These changes were for a 960px by 200px image.

Chris

jacine’s picture

jacine
she/her
Location New York
commented
Status: Active » Closed (fixed)

The 6.x-2.x-dev version now includes a setting to set the height of the header manually from the theme settings page. It should be available on the project page for download shortly.