The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Next Entry
[all accounts][expressive/mixit] Changing the Header Image
howto_user wrote in s2howto
Most of the themes in the Expressive/Expressive Winter/Mixit family already feature header images. This tutorial explains how users can replace these header images with his or her own using the Custom Stylesheet option. Before beginning this customization, note that your image should be in a valid format (.jpg, .gif, .png, etc.) and hosted by a website that allows remote loading. For best results, your image should be 940 pixels wide, but the image height is not restricted.

The Custom Stylesheet option can be found in the Customize Journal Style area by clicking on the "Custom CSS" link in the left sidebar. You will need to add the following code to the "Custom Stylesheet" field:

#header-inner { 
    background-image: url("http://www.example.com/image.jpg");
	height: 200px;
}


#header {
    background-image: none;
}


You will need to replace the URL address in orange with the actual URL of your image. You will also need to replace the number 200 with the height of your image in pixels, plus any additional space you might want. The code in blue is required for some themes to suppress the original header image.

Depending on the "base" theme of your journal, you may need to add additional codes to prevent additional images from displaying. If you are using a style based on one of these themes, add the lines appropriate to your theme.

Bunnylicious, Weston, Cherry Blossom, Clouds
#header-content { 
     background-image: none; 
}


Fleur
#header-content-inner { 
     background-image: none; 
}


Bloom, Playful Robots, Poe
.layout-tw #header { 
     background-image: none; 
}


For these themes, replace the orange text according to your column layout:
Two-column, sidebar on left: tw
Two-column, sidebar on right: wt
Three-column, content in middle: twt
Three-column, sidebars on right: wtt

Click the "Save Changes" button at the bottom of the page to apply the customizations to your journal.



Contributed by av8rmike.

Comments Disabled:

Comments have been disabled for this post.

?

Log in

No account? Create an account