I figured that since almost all of the tutorials in s2howto were for paid users, it'd be nice to include one for free users for once.
[ tranquility II ] Adding a header image
Tranquility II is unusual in that it offers a box in Edit Customisations in which any user can input CSS. This is unlike most s2 styles where CSS customisation is restricted to paid users through the use of custom layers.
To add a header image to Tranquility II using this box, go to Edit Customisations and choose the tab labelled Presentation. Please first make sure that your image is be a valid format (.jpg, .gif, .png, etc.) and hosted by a website which allows remote loading. This code will remove the journal title displayed on the page and replace it with a header image.
Copy and paste the code below into the box labelled "include any CSS here to override the default CSS":
#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.