The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Next Entry
[smooth sailing] Adding a Header Image
howto_user wrote in s2howto

Smooth Sailing offers an option in the Custom Options for anyone to enter their own custom stylesheet information. This tutorial explains how to add a header image to Smooth Sailing using this feature. Please note that your image should be in a valid format (.jpg, .gif, .png, etc.) and hosted by a website that allows remote loading.

To add a header image to the top of your journal, you will need to add the following code to the 'Custom stylesheet' field in the Custom CSS section of Custom Options.

.pageheaderblock { 
     background-image: url("http://www.example.com/image.jpg"); 
     background-position: top center; 
     background-repeat: no-repeat; 
     padding-top: 150px; 
    }

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 150 with the height of your image in pixels, plus any additional space you might want.

If you don't want the image centered, you can align it to either side of your journal by replacing the word "center" above with either "left" or "right".

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

Contributed by camomiletea, based on a tutorial by masterslacker.


Comments Disabled:

Comments have been disabled for this post.

?

Log in

No account? Create an account