Intro to Layers / HTML in Free Text Boxes
This tutorial will teach you how to create a theme layer for advanced customisations, and it will show you how to use it by showing you how to put HTML in your free text boxes. This will only work for paid/permanent users or early adopters as the advanced customisation area is not available for free users.
[29 July 2006]: Edited to reflect the new Customize interface.
About Layers
Livejournal has four types of layers that are used when making a style for your journal:
1. The Core layer - Currently there is only one core layer and it contains the most basic code necessary to show a journal. Nobody is allowed to edit this.
2. Layout layers - These are user written layouts that use parts of the core to create a journal style. Smooth Sailing, Component, and Generator are all examples of layout layers that have been made public.
3. Theme layers - These layers usually contain colour customisations for layout layers. The Advanced Customisation area lets you create your own theme layers for a system layout layer or for your own layout layers. You can override functions in theme layers as well, which we will use in the tutorial.
4. User layers - These layers contain the customisations generated by the Customisation Wizard. Although functions are allowed to be put inside these layers, the layers get overwritten whenever you go through the Customisation Wizard and you will lose all your functions. For this reason we use Theme layers for advanced customisations.
Step 1: Copy your Colour Theme
For this tutorial to work you will have to create a new theme layer for yourself. This means you won't be able to use one of the system's theme layers that contain colour information. This process will get you to copy the colour theme you want into your user layer.
Part A: In one browser window, go to the Public Layers and locate the colour theme you are using, and click on it. The layer information page for it will open and click on the Raw Source Code link that appears at the top. You will now see the contents of that theme layer, usually a few layerinfo statements and a few set statements.
Part B: In another browser window, go to Your Layers and look in the table for a user layer under the heading "Child of layer 4601331: Smooth Sailing", and click the Edit button next to it.
Part C: Copy all and only the set statements from the theme layer code you opened in part A into your user layer that you just opened in part B. Make sure you paste the set statements directly after the layerinfo statements and before any set statements in your user layer. When you are done pasting, click the Save & Compile button at the top of the text area. This will check your layer for errors, and if none exist, save it for you, otherwise it will report errors.
The colour theme is now part of the user layer and you can create a new theme layer.
Step 2: Create a new Theme layer
Go to Your Layers and scroll to the bottom of the page. Under "Create layout-specific layer", create a new layer of type "theme" and for layout "Smooth Sailing". The page will refresh. Locate this new theme layer under the heading "Child of layer 4601331: Smooth Sailing" and click on the Edit button next to it. This will open the layer for editing. You should see the following in the text area:
layerinfo "type" = "theme";
layerinfo "name" = "";Type in a name for your theme layer that you will remember. This name will appear on the Customisation page as an option once the theme layer is created. For example:
layerinfo "name" = "Smooth Sailing Customisations";
Step 3: Adding the Function Overrides
Paste the following code into your theme layer:
function Page::lay_print_sidebar_freetextbox_2() {
var string myhtml = " LJ homepage";
$this->lay_print_sidebox_top($*text_sidebox_freetext_2_title);
"""
$myhtml""";
$this->lay_print_sidebox_bottom();
}In this example we are overriding freetext box #2. You can use any of the boxes from 2 to 10 by replacing all three occurances of 2 with whatever number you like. You can also use as many of the free text boxes as you would like by pasting these lines as many times as you want, making sure each copy of the function uses a unique number. If you would like to use the unnumbered free text box, use this code:
function Page::lay_print_sidebar_freetextbox() {
var string myhtml = " LJ homepage";
$this->lay_print_sidebox_top($*text_sidebox_freetext_title);
"""
$myhtml""";
$this->lay_print_sidebox_bottom();
}Replace the value of the variable $myhtml, as shown in blue, to whatever HTML you would like to have in your sidebox. For any quotation marks in your HTML please use a single quote (') instead of double quotes (") which will interfere with the string setting and cause errors when compiling. Please also note that all HTML you enter will go through a Livejournal HTML cleaner. You are not allowed to use javascript or iframes, so these elements will be removed.
When you are done modifying your layer, hit the Save & Compile button, which will check the code for errors, and if there are none, it will save the layer.
By default all the free text boxes are hidden. To activate each box, you will have to go to the Customise page, click on Custom Options, and in the Sidebar section, use the Free Text Position properties to identify where you want each box to appear. Also use the Free Text Title properties to set the title for each box.
Step 4: Using the new Theme layer
Go to the Customise page, click on Look and Feel, and under "Themes", choose the theme you just created from the drop down menu. It will appear as the name you gave it above, and should be at the bottom of the drop down menu under the new inner heading "Custom Layers". Hit the Save Changes button at the bottom of the page when you're done. That's it. You are done. Assuming you properly set the title and position settings for this sidebox in the Custom Options, you will see the new box with the HTML in your sidebar when you refresh your journal.
Notes
For any future advanced customisation you have to use the Theme layer that you just created to insert any functions or setting overrides. You won't need to do Steps 1, 2, or 4 ever again.
[29 July 2006]: Edited to reflect the new Customize interface.
About Layers
Livejournal has four types of layers that are used when making a style for your journal:
1. The Core layer - Currently there is only one core layer and it contains the most basic code necessary to show a journal. Nobody is allowed to edit this.
2. Layout layers - These are user written layouts that use parts of the core to create a journal style. Smooth Sailing, Component, and Generator are all examples of layout layers that have been made public.
3. Theme layers - These layers usually contain colour customisations for layout layers. The Advanced Customisation area lets you create your own theme layers for a system layout layer or for your own layout layers. You can override functions in theme layers as well, which we will use in the tutorial.
4. User layers - These layers contain the customisations generated by the Customisation Wizard. Although functions are allowed to be put inside these layers, the layers get overwritten whenever you go through the Customisation Wizard and you will lose all your functions. For this reason we use Theme layers for advanced customisations.
Step 1: Copy your Colour Theme
For this tutorial to work you will have to create a new theme layer for yourself. This means you won't be able to use one of the system's theme layers that contain colour information. This process will get you to copy the colour theme you want into your user layer.
Part A: In one browser window, go to the Public Layers and locate the colour theme you are using, and click on it. The layer information page for it will open and click on the Raw Source Code link that appears at the top. You will now see the contents of that theme layer, usually a few layerinfo statements and a few set statements.
Part B: In another browser window, go to Your Layers and look in the table for a user layer under the heading "Child of layer 4601331: Smooth Sailing", and click the Edit button next to it.
Part C: Copy all and only the set statements from the theme layer code you opened in part A into your user layer that you just opened in part B. Make sure you paste the set statements directly after the layerinfo statements and before any set statements in your user layer. When you are done pasting, click the Save & Compile button at the top of the text area. This will check your layer for errors, and if none exist, save it for you, otherwise it will report errors.
The colour theme is now part of the user layer and you can create a new theme layer.
Step 2: Create a new Theme layer
Go to Your Layers and scroll to the bottom of the page. Under "Create layout-specific layer", create a new layer of type "theme" and for layout "Smooth Sailing". The page will refresh. Locate this new theme layer under the heading "Child of layer 4601331: Smooth Sailing" and click on the Edit button next to it. This will open the layer for editing. You should see the following in the text area:
layerinfo "type" = "theme";
layerinfo "name" = "";Type in a name for your theme layer that you will remember. This name will appear on the Customisation page as an option once the theme layer is created. For example:
layerinfo "name" = "Smooth Sailing Customisations";
Step 3: Adding the Function Overrides
Paste the following code into your theme layer:
function Page::lay_print_sidebar_freetextbox_2() {
var string myhtml = " LJ homepage";
$this->lay_print_sidebox_top($*text_sidebox_freetext_2_title);
"""
$myhtml""";
$this->lay_print_sidebox_bottom();
}In this example we are overriding freetext box #2. You can use any of the boxes from 2 to 10 by replacing all three occurances of 2 with whatever number you like. You can also use as many of the free text boxes as you would like by pasting these lines as many times as you want, making sure each copy of the function uses a unique number. If you would like to use the unnumbered free text box, use this code:
function Page::lay_print_sidebar_freetextbox() {
var string myhtml = " LJ homepage";
$this->lay_print_sidebox_top($*text_sidebox_freetext_title);
"""
$myhtml""";
$this->lay_print_sidebox_bottom();
}Replace the value of the variable $myhtml, as shown in blue, to whatever HTML you would like to have in your sidebox. For any quotation marks in your HTML please use a single quote (') instead of double quotes (") which will interfere with the string setting and cause errors when compiling. Please also note that all HTML you enter will go through a Livejournal HTML cleaner. You are not allowed to use javascript or iframes, so these elements will be removed.
When you are done modifying your layer, hit the Save & Compile button, which will check the code for errors, and if there are none, it will save the layer.
By default all the free text boxes are hidden. To activate each box, you will have to go to the Customise page, click on Custom Options, and in the Sidebar section, use the Free Text Position properties to identify where you want each box to appear. Also use the Free Text Title properties to set the title for each box.
Step 4: Using the new Theme layer
Go to the Customise page, click on Look and Feel, and under "Themes", choose the theme you just created from the drop down menu. It will appear as the name you gave it above, and should be at the bottom of the drop down menu under the new inner heading "Custom Layers". Hit the Save Changes button at the bottom of the page when you're done. That's it. You are done. Assuming you properly set the title and position settings for this sidebox in the Custom Options, you will see the new box with the HTML in your sidebar when you refresh your journal.
Notes
For any future advanced customisation you have to use the Theme layer that you just created to insert any functions or setting overrides. You won't need to do Steps 1, 2, or 4 ever again.