Change the Height of the Header Image

[sayontan]

In Suffusion there are two concepts - a header and a header container. The header is the block where you display your blog title and description and the header-container is the block that holds your header, the navigation bar and the widget area on the right of your navigation bar.

The way the theme is built, "header" has a height of 55px and additional padding of 15px above and below, giving it a total height of 85px. The "navigation bar" is 35px high, so the "header container" is effectively 120px high (actually it is 122px if you include the 1px border).

Now, if you want to change the height of your header section, you can go to "Custom Styles" under "Custom CSS, JavaScript and RSS" and put in:

Code: Select all

#header {
        height: 55px;
        padding-top: 15px;
        padding-bottom: 15px;
}


Replace these values with the height and padding that you want.

Note that there is a quirk in the implementation. Your header image is really a header background image, so it is defined in the "#header-container" as opposed to the "#header". As a result it will lie behind your navigation bar as well. I plan to add a feature that will let you define different images for the header and the header background.