The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Next Entry
[ tranquility II ] Adding a header image
howto_user wrote in s2howto

This tutorial explains how to add a header image in Tranquility II with custom CSS.

Please first make sure that your image is a valid format (.jpg, .gif, .png, etc.) and hosted by a website which allows remote loading.

Now you will need to add the following code to the 'Custom stylesheet' field in the Custom CSS section of Custom Options. This code will remove the journal title displayed on the page and replace it with a header image.

#banner {
     background-image: url(http://www.example.com/header.jpg); 
     width: 100px;
     height: 100px;
     margin: 0 auto;
    }
#banner h1 {display: none;}

Replace the example URL in yellow with the URL of your header image, and replace the height and width in blue with the height and width of your image. The code in purple centres the header image; if you do not want the header image to be centred, remove all of the purple code.

Once this is done, click the save button at the bottom to apply this to your journal.

Additional References
What is remote loading?

Contributed by dandelion.


Comments Disabled:

Comments have been disabled for this post.

?

Log in

No account? Create an account