Log in

No account? Create an account

The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Flag Next Entry
[flexible squares] Adding a Header Image
howto_user wrote in s2howto

This tutorial provides a method of adding a header image in the S2 style Flexible Squares with custom CSS. Before beginning this customization, make sure you have the picture in a valid image format and uploaded to a website that allows remote loading.

To add a header image to the top of your journal, go to the Custom Options tab of the Journal Display area. You can find the option to add your CSS in the Custom CSS section.

You will need to add the following code, which will allow you to customize the size and position of your header image.

	.headerimage {
		height: 150px;
		background-image: url("http://example.com/headerimage.png") !important;
		background-repeat: no-repeat !important;
		background-attachment: scroll !important;
		background-position: center !important;

		margin-bottom: 15px;

After pasting this code, you must edit the height attribute to the height of your image.

The lines in blue above show the different CSS declarations available to customize your header image. A separate tutorial explains how you can modify each background attribute. Only the background-image: attribute is necessary, but if you choose to use any, they must be in the order shown above.

You must replace the URL in lavender with the URL of your image. Please remember that the website your image is stored on must allow remote loading to LiveJournal.

The code in green is not needed, but it does prevent your header image from directly touching the content of your LiveJournal by adding extra space. If you do decide to use it, the number 15 can be adjusted.

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

Contributed by deadmantalks. Some elements taken from a tutorial by phoenixdreaming and camomiletea. Adjusted for all account types by camomiletea.

Comments Disabled:

Comments have been disabled for this post.