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);
}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;
}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;
}#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;
}That should probably cover 95% of header questions, but if I've missed something, comment and I'll address it.
← Ctrl ← Alt
Ctrl → Alt →
← Ctrl ← Alt
Ctrl → Alt →