[paid accounts] What are layers and styles?
The very first, fundamental thing to understand about LiveJournal layouts is how they work.
By "changing a journal's layout" we generally mean two different things:
What are layers?
This FAQ explains a lot about the different layers there are. here's an additional brief summary.
If you read the LJ documentation on layers, you might notice that I left out the so-called Internationalization layers. Most of the time they are not needed for layout customizations.
What are styles?
After layers, the second important thing about LJ layouts are the so-called styles.
You used layers to tell LJ how your journal is supposed to look like: You decided on a basis layout (Flexible Squares), and created user and theme layers. Those layers you already filled with coding that changes the look of your journal, or you will do so later.
The cool thing about LJ is that you can have many layers saved at the same time, all of which would make the journal look different (e.g. one layer that includes CSS and coding for a spring-themed layout, another layer for your birthday, and yet another for a standard layout that you use the rest of the year). Of course, not all of these layers are applied to your journal at the same time, since that wouldn't make any sense.
Therefore, you need something to tell LJ which layers are supposed to be active right now. This is where styles come in.
Styles allow you to set three layers active at the same time:
a layout layer (e.g. Flexible Squares)
a user layer (e.g. your Auto-generated Customizations layer which holds the Customization Wizard information) and
a theme layer (e.g. one of LJ's color themes for that layout, or one of your own).
Continuing with the previous example, you'd have to create three different styles. All three would use Flexible Squares as the layout layer, but one style would be called "Spring" and would use the layer for the spring-themed layout, the second style would be called "Birthday" and use the appropriate layers, and the third would probably be called "Standard" and use the layers which make up the all-year layout.
let's see how that could look like:
Don't forget, this is just an example. It is supposed to stress a few things:
If you click Delete, LJ will delete the style, and due to a bug in the system also the attached user layer (but not the theme layer).
Use will make LJ apply a style, so that when people take a look at your journal, they will see it look like you coded in the layers. The style which is currently active is bolded, and the Use button is greyed out and unclickable.
Last but not least, you can also preview a style, i.e. see how your journal would look like if you clicked the Use button next to that style. You reach this preview by clicking on the link that is the style number: Style Name (#1234567).
The link itself would look like this: http://yourusername.livejournal.com/?s2id=1234567
You can also share this link with others, e.g. to get help at s2flexisquares if you encounter problems that you don't know how to fix. That way you can show others what goes wrong without forcing yourself or your friends to work with an unfinished layout.
By "changing a journal's layout" we generally mean two different things:
- changes to the page's CSS, which affects the display of the journal (e.g. borders, background images, text colors).
CSS is already a pretty powerful tool to customize journal layouts. This tutorial explains how to change it and how to add custom CSS to one's journal.
there are hundreds of CSS tutorials online explaining how CSS works, and irinafan made an extensive guide to show what classes are available in Flexible Squares. therefore, they are not explained any further in this tutorial.
- changes to the page's source code, e.g. additional links in the comment bar, an image map, or other HTML code.
Adding anything to a journal site's source code is only possible in layers. Sadly, free and plus users are denied access to the Advanced Customizations Area, where layers and styles can be found. Hence these accounts cannot make any changes to the source code.
What are layers?
This FAQ explains a lot about the different layers there are. here's an additional brief summary.
If you read the LJ documentation on layers, you might notice that I left out the so-called Internationalization layers. Most of the time they are not needed for layout customizations.
- Core Layer:
The core layer is the very basis for all LJ journals, no matter which layout you decided to use. It offers the necessary functions to display the different journal views (e.g. the recent entries or friends page). Look here to see what a journal looks like with just the core layer active.
Of course we all want our journals to look prettier than that, changing parts of the source code (e.g. to add a sidebar) and the CSS. It is not possible to modify the core layer directly, but this is where the other layers come in. - Layout Layer:
The layout layer makes a layout from scratch (hence the name). It takes what the core layer has to offer, adds functions (e.g. to display a sidebar), or modifies (=overrides) the existing ones to make the journal display different. They also offer a user interface to the Customizations Wizard, that allows free and plus accounts to change certain parts of the layout without actually needing access to the layers. Here you can see what a journal looks like with just the core and the Flexible Squares layout layer active. - User Layer:
The user layer is for the Customizations Wizard.
Layout layers offer sets of options to adjust the journal colors, fonts, the display of certain parts of the journal (e.g. usericons, sidebars), and the texts which are to be displayed (e.g. 'listening to' instead of 'Current Music'). Those adjustments can be made in the Customizations Wizard, and are saved in the user layer. - Theme Layer:
The theme layer is what we are working with 99% of the time. It is not possible to add new functions (like in the layout layer), but we can override the functions which the core and the layout layers provide.
To find overrides, or to find help with changing your journal's layout, head over to s2flexisquares.
What are styles?
After layers, the second important thing about LJ layouts are the so-called styles.
You used layers to tell LJ how your journal is supposed to look like: You decided on a basis layout (Flexible Squares), and created user and theme layers. Those layers you already filled with coding that changes the look of your journal, or you will do so later.
The cool thing about LJ is that you can have many layers saved at the same time, all of which would make the journal look different (e.g. one layer that includes CSS and coding for a spring-themed layout, another layer for your birthday, and yet another for a standard layout that you use the rest of the year). Of course, not all of these layers are applied to your journal at the same time, since that wouldn't make any sense.
Therefore, you need something to tell LJ which layers are supposed to be active right now. This is where styles come in.
Styles allow you to set three layers active at the same time:
a layout layer (e.g. Flexible Squares)
a user layer (e.g. your Auto-generated Customizations layer which holds the Customization Wizard information) and
a theme layer (e.g. one of LJ's color themes for that layout, or one of your own).
Continuing with the previous example, you'd have to create three different styles. All three would use Flexible Squares as the layout layer, but one style would be called "Spring" and would use the layer for the spring-themed layout, the second style would be called "Birthday" and use the appropriate layers, and the third would probably be called "Standard" and use the layers which make up the all-year layout.
let's see how that could look like:
Don't forget, this is just an example. It is supposed to stress a few things:
- It is possible for theme layers, user layers, and styles to have the same name. You will notice, though, that it's not very practical as you'll easily confuse them.
- Many styles can all use one and the same layer. In this example we have one theme layer that includes all the overrides we want, for example aligning the metadata and adding links to the entry comment bar. The different user layers hold the CSS, background images, link texts, and so on, to change the "standard" colors to the pastel colors for the "spring" layout.
- One style can use the user layer that is generated by the Customization Wizard ("Auto-generated Customizations"), while others use manually generated user layers.
- You can rename layers at any time, the styles will keep working.
If you click Delete, LJ will delete the style, and due to a bug in the system also the attached user layer (but not the theme layer).
Use will make LJ apply a style, so that when people take a look at your journal, they will see it look like you coded in the layers. The style which is currently active is bolded, and the Use button is greyed out and unclickable.
Last but not least, you can also preview a style, i.e. see how your journal would look like if you clicked the Use button next to that style. You reach this preview by clicking on the link that is the style number: Style Name (#1234567).
The link itself would look like this: http://yourusername.livejournal.com/?s2id=1234567
You can also share this link with others, e.g. to get help at s2flexisquares if you encounter problems that you don't know how to fix. That way you can show others what goes wrong without forcing yourself or your friends to work with an unfinished layout.