[paid accounts] My First Theme Layer (adding a theme layer to existing layouts)
This tutorial is for
- paid account users
- who never worked with layers or any other advanced options before
- who want to add some "paid only" tutorials to their journal while keeping their current layout.
Step 1
Go to Your Layers.
You should probably bookmark this site, you'll be needing it quite often to manage your layers.
In the list you find all layers that have already been created before, which your journal worked with without you even noticing.
At the bottom of the page, there's a form that allows you to create a Layout-specific layer. You want a Type: Theme and Layout: Flexible Squares. Select those, and click create.
Step 2
Now, the page reloads, and you see that the list has an added line: a layer that is Type: Theme and Name: (none).
Click on that layer's Edit button. The page which opens allows you to change the coding of the layer.
Interlude A
On the left is a frame that will show links to different functions as they are added.
The bottom right frame shows the output of the compiler, which checks the layer's coding upon saving. If any errors occur, they'll be displayed there.
The biggest frame is on the upper right, showing the actual coding of the layer.
In the Code frame, you will only see two lines, the so-called layerinfo statements:
layerinfo "type" = "theme";
layerinfo "name" = "";
Imagine the code to be a language. A statement is then like a sentence in spoken text. In English, sentences end with a period, but in code, statements always end with a semicolon.
Sometimes, tutorials might ask you to add so-called set statements to the theme layer. Those begin, as the name suggests, with the word set. They should always be put right after the layerinfo statements.
Any further coding, ie. functions, are then added at the bottom, below both layerinfo and set statements.
Step 3
Now you can name the theme layer whatever you want. (e.g. "my first theme layer") The layerinfo statements then would look like this:
layerinfo "type" = "theme";
layerinfo "name" = "my first theme layer";
Click Save&Compile. The whole page refreshes, and the Compiler frame will now hopefully say:
S2 Compiler Output at actual day and time
Compiled with no errors.
Step 4
Go back to Your Layers and have a look at the table now. You should see your new theme layer with its new name in the list.
Another layer you should see in that list is a Type: User and Name: Auto-generated Customizations. That one's the layer which holds all the information about your current journal layout (the custom CSS, texts, colors, background images, etc).
Interlude B
What we did so far is creating the necessary theme layer, in which we'll be able to put some functions later.
Just because we created the theme layer doesn't mean that it also gets applied (actually affects the journal's layout) though. The great thing is that you can have many different layers for many different layouts saved, e.g. one theme layer for a standard layout and others for season-specific layouts. Not all of them take effect at once. For this small yet incredible feature to work, we need something else, something that tells LJ which layers are supposed to be applied right now, and which to ignore. And THAT is where styles come in.
Step 5
Go to Your Styles, and bookmark the page for further heavy use ;)
The page shows a list of all styles that have been generated automatically before, without you even noticing. You might see many different wizard-something styles in that list.
At the bottom of the page where it says Create Style, enter a name, and click Create.
Step 6
You'll get to a new page, where it asks you which Language (i18nc) layer, and which Layout Layer to use. Leave the language layer box empty, and set Layout: to Flexible Squares. Click Change.
Step 7
Underneath, new dropdown boxes appear, another one for Language (i18n), one for user layers and one for theme layers.
Again, you can ignore the language part. The others contain lists of all user and theme layers that you have, which were created for the Flexible Squares layout.
In Theme: select the new theme layer you created before. (The one I called "my first theme layer" back in Step 2.)
In User: select Auto-generated Customizations. That layer holds all the information of your current layout (as explained in Step 3).
Click Save Changes.
Interlude C
You will be sent back to the Your Styles page. In the list, your new style will show up.
Each style in that list has three buttons next to it:
Edit, to change the settings of which user and theme layer to use in that style.
Delete, to delete the whole style. (Beware: Due to a bug in LJ, deleting a style also deletes its user layer. Therefore, before deleting a style, edit it and make sure that no user or theme layers are attached.)
Use, to tell LJ to actually use that style (= apply all the CSS and function overrides from the layers that are attached to this particular style when somebody goes to your journal). The style which already is currently active has that button greyed out and unclickable.
There is also the option of previewing a style, to see how it would look like on your journal's recent entries page. That is the link on the style number right next to the style's name: Style Name (#1234567) The link itself would look like this: http://yourusername.livejournal.com/?s2id=1234567
If you have problems with a new style, you can share that preview link in s2flexisquares. That way others can see its behavior live, without forcing you or your friends to see your posts in an unfinished/not working layout.
Step 8
You can preview your new style now, see if so far everything displays alright. Actually, there should be no visible difference to how your layout looked before... not yet. If everything looks okay, you can now click the Use button next to your new style, and start following other coding tutorials. Congratulations!
- paid account users
- who never worked with layers or any other advanced options before
- who want to add some "paid only" tutorials to their journal while keeping their current layout.
Step 1
Go to Your Layers.
You should probably bookmark this site, you'll be needing it quite often to manage your layers.
In the list you find all layers that have already been created before, which your journal worked with without you even noticing.
At the bottom of the page, there's a form that allows you to create a Layout-specific layer. You want a Type: Theme and Layout: Flexible Squares. Select those, and click create.
Step 2
Now, the page reloads, and you see that the list has an added line: a layer that is Type: Theme and Name: (none).
Click on that layer's Edit button. The page which opens allows you to change the coding of the layer.
Interlude A
On the left is a frame that will show links to different functions as they are added.
The bottom right frame shows the output of the compiler, which checks the layer's coding upon saving. If any errors occur, they'll be displayed there.
The biggest frame is on the upper right, showing the actual coding of the layer.
In the Code frame, you will only see two lines, the so-called layerinfo statements:
layerinfo "type" = "theme";
layerinfo "name" = "";
Imagine the code to be a language. A statement is then like a sentence in spoken text. In English, sentences end with a period, but in code, statements always end with a semicolon.
Sometimes, tutorials might ask you to add so-called set statements to the theme layer. Those begin, as the name suggests, with the word set. They should always be put right after the layerinfo statements.
Any further coding, ie. functions, are then added at the bottom, below both layerinfo and set statements.
Step 3
Now you can name the theme layer whatever you want. (e.g. "my first theme layer") The layerinfo statements then would look like this:
layerinfo "type" = "theme";
layerinfo "name" = "my first theme layer";
Click Save&Compile. The whole page refreshes, and the Compiler frame will now hopefully say:
S2 Compiler Output at actual day and time
Compiled with no errors.
Step 4
Go back to Your Layers and have a look at the table now. You should see your new theme layer with its new name in the list.
Another layer you should see in that list is a Type: User and Name: Auto-generated Customizations. That one's the layer which holds all the information about your current journal layout (the custom CSS, texts, colors, background images, etc).
Interlude B
What we did so far is creating the necessary theme layer, in which we'll be able to put some functions later.
Just because we created the theme layer doesn't mean that it also gets applied (actually affects the journal's layout) though. The great thing is that you can have many different layers for many different layouts saved, e.g. one theme layer for a standard layout and others for season-specific layouts. Not all of them take effect at once. For this small yet incredible feature to work, we need something else, something that tells LJ which layers are supposed to be applied right now, and which to ignore. And THAT is where styles come in.
Step 5
Go to Your Styles, and bookmark the page for further heavy use ;)
The page shows a list of all styles that have been generated automatically before, without you even noticing. You might see many different wizard-something styles in that list.
At the bottom of the page where it says Create Style, enter a name, and click Create.
Step 6
You'll get to a new page, where it asks you which Language (i18nc) layer, and which Layout Layer to use. Leave the language layer box empty, and set Layout: to Flexible Squares. Click Change.
Step 7
Underneath, new dropdown boxes appear, another one for Language (i18n), one for user layers and one for theme layers.
Again, you can ignore the language part. The others contain lists of all user and theme layers that you have, which were created for the Flexible Squares layout.
In Theme: select the new theme layer you created before. (The one I called "my first theme layer" back in Step 2.)
In User: select Auto-generated Customizations. That layer holds all the information of your current layout (as explained in Step 3).
Click Save Changes.
Interlude C
You will be sent back to the Your Styles page. In the list, your new style will show up.
Each style in that list has three buttons next to it:
Edit, to change the settings of which user and theme layer to use in that style.
Delete, to delete the whole style. (Beware: Due to a bug in LJ, deleting a style also deletes its user layer. Therefore, before deleting a style, edit it and make sure that no user or theme layers are attached.)
Use, to tell LJ to actually use that style (= apply all the CSS and function overrides from the layers that are attached to this particular style when somebody goes to your journal). The style which already is currently active has that button greyed out and unclickable.
There is also the option of previewing a style, to see how it would look like on your journal's recent entries page. That is the link on the style number right next to the style's name: Style Name (#1234567) The link itself would look like this: http://yourusername.livejournal.com/?s2id=1234567
If you have problems with a new style, you can share that preview link in s2flexisquares. That way others can see its behavior live, without forcing you or your friends to see your posts in an unfinished/not working layout.
Step 8
You can preview your new style now, see if so far everything displays alright. Actually, there should be no visible difference to how your layout looked before... not yet. If everything looks okay, you can now click the Use button next to your new style, and start following other coding tutorials. Congratulations!