March 17th, 2005

[paidaccount] Creating and Using a Theme Layer

Contents: [Introduction] [Creating a Theme Layer] [Setting Properties in a Theme Layer] [Using a Theme Layer to Replace a Function from the Layout Layer] [Applying a Theme Layer to Your Style]

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.

Introduction

Many advanced S2 customizations require you to create and edit a theme layer, in order to set properties or replace functions from the layout layer. Using a theme layer allows you to change many parts of the layout without having to create an entire layout layer. This tutorial explains how to create a theme layer, set properties, and replace functions.

Creating a Theme Layer

S2 layers are managed through the Advanced Customization area. To create a theme layer, go to this area and click on "Your Layers". At the bottom of the Your Layers page, under the heading "Create layout-specific layer", select "Theme" from the drop-down box for layer type. Then select the name of the layout you wish to customize from the drop-down box for layout, and click the "Create" button.

A link to your new theme layer will appear in the list of layers, under a heading that includes the name of the layout for which this theme layer was created. For example, a theme layer for the Generator layout will be under a heading that says "Child of layer 6: Generator".

The line which lists your theme layer will contain the layer's ID number in the column labeled "LayerID", the word "theme" in the column labeled "Type", and the word "(none)" in the column labeled "Name". This line also contains some buttons for working with your layer. In order to edit a theme layer, click the "Edit..." button next to the layer's name. This will lead you to the S2 compiler page, where you can add code for the customizations you wish to make.

When you edit a newly created a theme layer, the following code will already be displayed in the compiler:

layerinfo "type" = "theme";
layerinfo "name" = "";

So that you can easily identify this layer in your list of layers, you should give it a unique name by placing this name between the final set of quotation marks. For example, if you name your layer "Testing Layers", then the code will look like this:

layerinfo "type" = "theme";
layerinfo "name" = "Testing Layers";

Now you can click the "Compile" button to save the layer with its new name. Any further code which you place in your layer should be located below the two layerinfo lines, and you will need to click "Compile" each time you wish to save your work.

You can only use one theme layer at a time. If you want to use colors from a theme layer other than the layout default, you will need to copy the settings into your new theme layer. You can view the source code of theme layers for the system layouts at the Public Layers page.

Click on the "[# children]" link below the name of the layout layer you are using to see a list of the theme layers for that layout, then click on the name of the theme you wish to copy to see information about that theme. For example, you can see the layerinfo and properties of the Mint Chocolate Chip theme for the Generator layout.

To copy the properties from the theme layer you have chosen, click on the "Raw Source Code" link at the top of this information page. Copy all of the code from this page, except for the lines which begin with layerinfo, and paste it into the bottom of your custom theme layer.

After you have saved your changes, you can select your new theme layer for use. Go to the Customize Journal page and ensure that you are using the layout for which you created your theme layer, then select the new theme layer from the "Themes" dropdown list and click the "Change" button.

Setting Properties in a Theme Layer

One use of a theme layer is to set a property. Many properties can be set in a user layer, which is automatically generated when you use the "Change Individual Settings" section of the Customize Journal area. However, some layouts do not allow all properties to be overridden by the "Change Individual Settings" interface. If you wish to change these properties, you will need to set them in your theme layer instead. For example, if you are using the A Sturdy Gesture layout and want to change the text for previous and next skiplinks, you can do so by placing the following code in your theme layer:

set text_page_prev = "Go backwards";
set text_page_next = "Go forwards";
property name
Name given to the property when it was defined in either the core or layout layer. At any place in the layout where this property name is referred to, it will be replaced with the text or option which you set for the property.
property value
Text or an option setting which will replace the property name within the layout.

There are three types of properties: bool, string, and int.

  • A bool property can have a value of either true or false. This type of property is used to enable or disable a particular feature of the layout, such as the use of styled comment pages.
  • A string property can have any value, the text of which will appear in place of the property wherever it is used in the layout. This type of property is used for things such as setting the name of a link or a stylesheet attribute such as the URL of a background image. The value of a string property must be placed in quotation marks.
  • An int property can have a value which is a positive whole number. This type of property is used to set options such as how many entries appear on your Recent and Friends pages.

You also may wish to set properties in a theme layer if you plan to always use those property settings together. For example, you could create a bee theme for your journal, where yellow and black colors, a background picture of a beehive, and comment link text such as "3 bees buzzed | join the buzzing" are all part of the theme layer. Then you would be able to select all of those options in one easy step by changing to that theme layer.

Using a Theme Layer to Replace a Function from the Layout Layer

A more powerful use of a theme layer is to replace functions created in the layout layer. This allows you to add extra functionality to your style, or make significant changes to its appearance.

In order to override a function, you will need to copy the entire existing function from the layout layer into your theme layer, and then make the appropriate changes. Make sure that you copy everything down to and including the closing bracket, which will be the last character before the beginning of the next function.

For example, the Variable Flow layout does not have property settings for changing the text of the current music and current mood. In order to change this text in Variable Flow, you must override the metadata_title function, which looks like this:

function metadata_title(string which) : string
"Until core provides a function for this, i18n layers should override this."
{
  if ($which == "music") {
    return "Current Music";
  }
  elseif ($which == "mood") {
    return "Current Mood";
  }
  else {
    return $which;
  }
}

In this code, you would change Current Music and Current Mood to the text you wish to display next to your current music and current mood.

Most of the customization tutorials in s2howto will require you to create a theme layer and replace a function from your layout layer. In these tutorials, you will be given the necessary code to copy for that function. However, if you wish to replace a function for which there is no tutorial, you can find the function within the layout's source code at the Public Layers page.

To view the source of a layout layer, first click on the name of the layout, then on the "Raw Source Code" link at the top of the page. Please note that some system layouts, such as Component and The Boxer, are "closed source". This means that it is not possible to view the source code of these layouts in order to copy functions from them. However, it is still possible to override these functions by using tutorials provided in s2howto or by using trial-and-error to determine what the existing functions are.

Applying a Theme Layer to Your Style

Once you have finished creating your new layer, 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's name in the "Themes" section of the Customize Journal page.

Contributed by phoenixdreaming and alsatia

[haven] Transparency and Opacity

This tutorial explains how to make various sections of the Haven layout be transparent or semi-transparent with custom CSS. This code can be entered in the 'Custom stylesheet' field in the Custom CSS section of your Custom Options.

If you wish to make all areas of the layout completely transparent, place all of the code from the box below in your 'Custom stylesheet' field.

  /* Makes header and footer transparent. */
  .title, .navigation {
    background-color: transparent !important;
  }

  /* Makes tabs above sidebar and content boxes transparent. */
  .tabs, .sidebar_box th {
    background-color: transparent !important;
  }

  /* Makes sidebar and content boxes transparent. */
  .sidebar_box, .content {
    background-color: transparent !important;
  }

  /* Makes calendar days with posts transparent. */
  .day_with_posts {
    background-color: transparent !important;
  }

  /* Makes comment headers transparent. */
  .comment_bar_screened, .comment_bar_one, .comment_bar_two {
    background-color: transparent !important;
  }

  /* Makes "Powered by" note transparent. */
  #footer {
    background-color: transparent !important;
  }

You can remove sections of this code as necessary to make only some areas of your journal transparent. To remove a section, delete everything from the /* before the description of what that section does to the } before the next section begins. For example, to have everything except the header and footer be transparent, you would remove the following lines:

/* Makes header and footer transparent. */
.title, .navigation {
  background-color: transparent !important;
}

If you wish to make all areas of the layout semi-transparent, place all of the code from the box below in your 'Custom stylesheet' field.

  /* Makes header and footer opaque. */
  .title_navigation {
    filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8;
  }

  /* Makes tabs above sidebar and content boxes opaque. */
  .tabs, .sidebar_box th {
    filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8;
  }

  /* Makes sidebar and content boxes opaque. */
  .sidebar_box, .content {
    filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8;
  }

  /* Makes "Powered by" note opaque. */
  #footer {
    filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8;
  }

The opacity level, set to 80 (or 0.8) in the above example, can be changed to any number under 100 (or 1.0). Lower numbers will make your journal more transparent. Using this filter will change the opacity of the entire table, including the text within it so you will need to choose an opacity level that still allows the text to be visible.

Setting the opacity to 100 (or 1.0) will make the background completely opaque. If you want your background to be a solid color, you do not need to use an opacity filter at all.

As with the transparency tutorial, you can remove sections of the code in order to apply the opacity filter to only some areas of your journal.

Once you have finished adding the code above, click "Save Changes" button at the bottom of the page to apply your customizations.

NOTE: Opacity filters are a resource intensive customization. Use of an opacity filter can cause older browsers, computers with lower resources, and computers where much of the system memory is already in use to freeze, crash, or otherwise behave unexpectedly. If you begin experiencing a problem with your journal loading slowly (or not at all), your browser freezing, or your operating system freezing, please try removing the opacity filter from your theme layer and reloading your journal page to see if the problem persists before submitting a Support request.

Contributed by alsatia. Adjusted for all account types by camomiletea.

[paidaccount] Randomized Background Images

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.