?

Log in

No account? Create an account

The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Next Entry
[paidaccount] Randomized Background Images
howto_user wrote in s2howto
Paid Accounts Only
The following tutorial requires creating and editing a custom style, which in turn requires a paid, permanent, or early adopter account. Please read What are the paid account benefits? and How do I buy a paid account? to learn about the paid account benefits and how to buy a paid account.

This tutorial requires the creation of a theme layer. If you already have a theme layer, you will need to edit it and add the code below. If you do not have a theme layer, you will need to create one by following the instructions in the Theme Layer tutorial.

LiveJournal's FAQ 214 contains basic information about adding a background image in S2, which you may wish to read before using this tutorial. Of particular importance, any background image that you use must be uploaded to a webhost which allows remote loading to LiveJournal.

The code to add randomized background images will override the print_custom_head function. If your theme layer already contains a print_custom_head function, you will need to merge it with the following code.

First, copy the code below, making sure to include everything contained in the box, and paste it into your theme layer:

function Page::print_custom_head() {
  var string[] backgroundurl;
  $backgroundurl[0] = "http://www.example.com/yourimage.jpg";
  $backgroundurl[1] = "http://www.example.com/yourimage.jpg";
  $backgroundurl[2] = "http://www.example.com/yourimage.jpg";
  $backgroundurl[3] = "http://www.example.com/yourimage.jpg";
  $backgroundurl[4] = "http://www.example.com/yourimage.jpg";
  var int randomurl;
  $randomurl = rand(0, ((size $backgroundurl) - 1));

  """
  <style type="text/css">
    body {
      background-image: URL($backgroundurl[$randomurl]) !important;
    }
  </style>
  """;
}

Next, replace each instance of http://www.example.com/yourimage.jpg with the URL of an image you wish to use as your journal's background. The code in this tutorial allows you to use five background images, but you can add or remove lines as necessary if you wish to have more than or less than five images. Please note that if you specified a background image in the "Change Individual Settings" section of the Customize page, this image will not be included among the ones that are displayed at random.

Once you have edited the image URLs, you can save your theme layer by clicking on the "Save & Compile" button at the top of the screen. Your changes will not take effect until you apply your theme layer by selecting it on the Customize page.

If you wish to change other attributes of your background images, such as making them fixed or non-repeating, you can combine the code from this tutorial with that in the Background Images tutorial. Please note, however, that these attributes will apply to all of the images you have selected. You will not be able to have one image be fixed and the others be scrolling, for example.

Contributed by alsatia.


Comments Disabled:

Comments have been disabled for this post.