[ tranquility II ] Adding a header image

[howto_user]

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.