howto_user (howto_user) wrote in s2howto,

[all accounts][expressive/mixit] Changing the Header Image

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("");
	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; 

#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.
Tags: - expressive, - mixit, all accounts, free accounts, header image

Comments for this post were disabled by the author