Adding a header image

Apr 27, 2007 13:55

(Note the first: Not formatted really, since I'm lazy and that can be done later. And there also isn't much code as such.)

(Note the second: This is related to this and this; not sure whether it would be best to have it as a s2howto tutorial or as a FAQ. Am doing it as a tutorial for now, can be changed. A lot of it is a link to other tutorials, rather than a tutorial in its own right, so I don't know if that works well enough)

(Note the third, which isn't directly relevant to this -- why is Quite Lickable listed as a layout that supports header images? it doesn't, not really. you can set an image for the top heading, but that heading area contains the journal title (and subtitle as appropriate) as well as the image, so the only way to have a clean header image is to redefine lay_print_heading() to be blank.)

***

This tutorial provides information on adding a header image in S2. The exact method of doing so -- a layout-specific setting, custom CSS, or a combination of the two -- depends on the particular layout. All customizations will be made through the Custom Options page.

Layouts that specifically support header images are listed here. The header option can usually be found under either "Presentation" or "Images". You will need to enter a height (such as "300px") as well as the URL of the header image.

For other layouts, the easiest way to have a header image is to add it as a background image, specify the background image properties so that it appears at the top of the journal and does not repeat, and then shift the journal contents down so they start below the image. Layouts that support both adding a background image and specifying the image properties are listed here. Layouts that support adding a top margin, which will shift the journal down, are listed here.

For layouts that do not offer some or all of the above customization options, you can use CSS to add a background image and shift the journal down. CSS can be added in the Custom CSS section of the Custom options page.

More tutorials for adding a header image can be found under the 'header image' tag of this community.

[free], @ status-resolved, [s2], [all layouts]

Up