Changing Header Image and Related How-tos
Since a number of these questions have come up over time, I decided to try to compile all the issues into one post.
How do I Change the Header Image?
The CSS to change the header image is pretty simple, just copy and paste into the Custom CSS box or into your theme layer:
#header-inner {
background-image: url(http://URL TO YOUR IMAGE);
}Be sure that your image is uploaded to a host that allows remote linking (like ScrapBook, Photobucket, Flickr, etc.) Just replace the red text with the appropriate URL.
Removing the Previous Images
Where things will get interesting, however, is in disabling the existing header image in the theme layer. Some of the base themes put the image specification in #header instead of #header-inner. Other themes have images in both ID blocks, and still others have one or more transparent images on top of a background color (Bunnylicious, for instance). There are simply too many themes and too many possible combinations to give detailed directions for all of them. If part of the base theme's image is still showing up, the following CSS should take care of it:
#header, #header-content {
background-image: none;
}The yellow text is optional, depending on the base style.
Adjusting the Header Height
The base themes use varying combinations of margins and padding on the header content and text boxes to "stretch" the header box vertically and accommodate images of different sizes. As above, there is a simple fix that does not require you to calculate margins or padding. In the #header-inner {} block specified above, add a height property, replacing the xxxs with the height of your new header image:
#header-inner {
background-image: url(http://URL TO YOUR IMAGE);
height: xxxpx;
}Don't forget the "px;", it's mandatory. Do NOT place the "height:" line in #header. Because of the way the #header and #header-inner blocks are positioned, an explicit height setting in the outer box can actually push the inner box outside the outer and hide the header text, although this behavior differs across browsers and in different themes.
Adjusting the Layout Width
For uniformity on Vox's site, all the layouts default to 940px wide. The sidebars default to 190px wide, leaving 750px for the main content column in the 2-column layout, and 560px in the 3-column layout (the actual column with is 40px less, because of 20px margin on either side). Therefore, to scale the journal content to the correct width (assuming the sidebars remain the same width) take the width of your new header image and subtract 190px for each sidebar you plan to have in your layout. This number will be the new width of the #alpha column, excluding margins. Then change the widths of the overall journal container, the header container, the main content column, and (in a 3-column layout) the position of the second sidebar. This calls for an example.
Say the new header image is 850 pixels wide, and uses the two-column "sidebar on left" layout. The new container width will be 850px, and the main content width will be 850 - 190 = 660px. This is the CSS to make these changes (with optional comments):
#container-inner, #header-inner {
width: 850px; /* Change the width of the header and overall container boxes*/
}
#alpha {
width: 660px; /* Overall width minus sidebar width*/
}
.layout-tw #alpha-inner {
width: 620px; /* Width of #alpha minus 40px margins*/
}
Moving the Header Text
The location of the header text (i.e. linkbar, journal title and subtitle) is another property that is not defined consistently across all Expressive themes. The header text boxes are contained in #header-content (and #header-content-inner), and most of the layouts use a four-way margin specifier in one of the two blocks to position the box. For example, the Cityscape parent uses:
#header-content-inner {
margin: 20px 15px 117px 20px;
}With four numbers, the margins go [top, right, bottom, left]. To move the text down, increase the first number; to move the text right, increase the last number. However, be careful when changing the default numbers because the top and bottom margins (in this case) are being used to size the header image vertically. Thus, the third number would have to be reduced to keep from stretching the header block. Check the settings in the base theme stylesheet to see where the margins are applied and change that block accordingly.
That should probably cover 95% of header questions, but if I've missed something, comment and I'll address it.
How do I Change the Header Image?
The CSS to change the header image is pretty simple, just copy and paste into the Custom CSS box or into your theme layer:
#header-inner {
background-image: url(http://URL TO YOUR IMAGE);
}Be sure that your image is uploaded to a host that allows remote linking (like ScrapBook, Photobucket, Flickr, etc.) Just replace the red text with the appropriate URL.
Removing the Previous Images
Where things will get interesting, however, is in disabling the existing header image in the theme layer. Some of the base themes put the image specification in #header instead of #header-inner. Other themes have images in both ID blocks, and still others have one or more transparent images on top of a background color (Bunnylicious, for instance). There are simply too many themes and too many possible combinations to give detailed directions for all of them. If part of the base theme's image is still showing up, the following CSS should take care of it:
#header, #header-content {
background-image: none;
}The yellow text is optional, depending on the base style.
Adjusting the Header Height
The base themes use varying combinations of margins and padding on the header content and text boxes to "stretch" the header box vertically and accommodate images of different sizes. As above, there is a simple fix that does not require you to calculate margins or padding. In the #header-inner {} block specified above, add a height property, replacing the xxxs with the height of your new header image:
#header-inner {
background-image: url(http://URL TO YOUR IMAGE);
height: xxxpx;
}Don't forget the "px;", it's mandatory. Do NOT place the "height:" line in #header. Because of the way the #header and #header-inner blocks are positioned, an explicit height setting in the outer box can actually push the inner box outside the outer and hide the header text, although this behavior differs across browsers and in different themes.
Adjusting the Layout Width
For uniformity on Vox's site, all the layouts default to 940px wide. The sidebars default to 190px wide, leaving 750px for the main content column in the 2-column layout, and 560px in the 3-column layout (the actual column with is 40px less, because of 20px margin on either side). Therefore, to scale the journal content to the correct width (assuming the sidebars remain the same width) take the width of your new header image and subtract 190px for each sidebar you plan to have in your layout. This number will be the new width of the #alpha column, excluding margins. Then change the widths of the overall journal container, the header container, the main content column, and (in a 3-column layout) the position of the second sidebar. This calls for an example.
Say the new header image is 850 pixels wide, and uses the two-column "sidebar on left" layout. The new container width will be 850px, and the main content width will be 850 - 190 = 660px. This is the CSS to make these changes (with optional comments):
#container-inner, #header-inner {
width: 850px; /* Change the width of the header and overall container boxes*/
}
#alpha {
width: 660px; /* Overall width minus sidebar width*/
}
.layout-tw #alpha-inner {
width: 620px; /* Width of #alpha minus 40px margins*/
}
Moving the Header Text
The location of the header text (i.e. linkbar, journal title and subtitle) is another property that is not defined consistently across all Expressive themes. The header text boxes are contained in #header-content (and #header-content-inner), and most of the layouts use a four-way margin specifier in one of the two blocks to position the box. For example, the Cityscape parent uses:
#header-content-inner {
margin: 20px 15px 117px 20px;
}With four numbers, the margins go [top, right, bottom, left]. To move the text down, increase the first number; to move the text right, increase the last number. However, be careful when changing the default numbers because the top and bottom margins (in this case) are being used to size the header image vertically. Thus, the third number would have to be reduced to keep from stretching the header block. Check the settings in the base theme stylesheet to see where the margins are applied and change that block accordingly.
That should probably cover 95% of header questions, but if I've missed something, comment and I'll address it.