How do I create a custom style from scratch? (original) (raw)

Before you begin to create a custom style in S2, you should become better acquainted with S2's structure and terminology, even if you have prior experience in creating custom S1 styles. Because the S2 style system uses layers, there are a number of different levels of customization that are possible.

Creating a Custom Layer

In order to make advanced customizations to your journal, you will need to create and design a layer. To do this, go to the Developer Area and click on "Your Layers". The type of layer you want to create depends on the amount of customization you want to do.

If you want to code a layout completely from scratch, or create a completely custom style, you will need to create a layout layer. Under "Create top-level layer", select the type Layout, and click Create. You can create up to 150 custom layers.

If you want to build off of an existing layout, mainly using existing code but adding or changing some of the elements, you can create a theme layer instead. Under "Create layout-specific layer", select the type Theme, select the layout you want to use as a base, and click Create.

Note that while it is possible to create a user layer, this should only be used to specify settings that can be changed in the Customize Journal Style area. Do not put additional code in a user layer -- anything extra will be removed with no warning, if you use the Customize area at all, and there is no way to recover lost code. (Theme and layout layers are not automatically overwritten, and so custom code should go in one of these layer types.)

Once you create a layer, you will be taken to the Layer Editor, where you are presented with a blank layer. You will need to design, or "code", the customizations you want. This involves knowledge of the S2 programming language, which is explained in the official S2 documentation. For many users, the documentation alone will not be of much help in understanding S2. You can also learn by looking at the source code of existing public layers and referring back to the documentation from time to time.

To view the source code of a public layer, go to the Developer Area and click on "Public Layers". On the Public Layers page, click on the name of the layout of your choice, then click on either "Raw Source Code" to view the raw source code, or "Syntax Highlighted" to see the source code in a color-coded format. If you do not feel comfortable creating a Layout layer from scratch, you are free to copy a Layout layer's source code in its entirety and tweak things to your liking.

Making Your Layer Public

By default, your S2 layers are privately owned and viewable only by you. If you want to make the source code of a layer available to others, you will need to add the following line near the top of the layer code:

layerinfo source_viewable = 1;

Public layers can be incorporated into any account with Professional package of service's custom S2 style, providing the user knows the layer ID number. To make a layer public, add the following line near the top of the layer code:

layerinfo is_public = 1;

Compiling Your Layer

When you have designed your layer to your liking in the Layer Editor, you will have to pass it through the S2 compiler by clicking "Save and Compile", to check for any errors in your code. Your layer will not be saved on LiveJournal's servers until it has passed through the S2 compiler without encountering errors. You should use an external text editor to design and store your layers locally, so you do not lose your work if either your computer or web browser crashes.

Once the S2 compiler reports "No errors", your layer will be saved on LiveJournal's servers and can be seen on the Your Layers page. At any time, you can return to this page and edit your layer to your liking, provided your account still has Professional package of service. More importantly, you can now apply the new layer to your journal, or use it to create a custom style.

Using a Custom Layer

Custom layout and theme layers can be selected in the Your Custom Layers section of the Select Journal Style page.

You can also manually create a custom style; this is especially useful if you would like to easily be able to switch between different layouts or different themes, or if you would like to preview a layout without selecting it as the active style for your journal. Custom styles can be created or viewed at the Advanced Customization area, under "Your Styles". There is a limit of 50 custom styles per account; if you already have 50 styles created (most likely from using or customizing system styles), you will need to delete or edit an existing style in order to make a new style.

Under "Create Style", choose a name for your custom style and click "Create". You will need to select a layout layer, and optionally a base language layer, and click "Change". You will then be able to choose layout-specific language, theme, and user layers; these are all optional, and can be left blank. Click "Save Changes" when you are done, and you will be taken back to the Your Styles page where your new custom style will be listed alongside its assigned s2id number, which links to a preview of your journal using that style.

Once you are satisfied that your custom style is ready for use with your journal, you can go back to the Your Styles page and click the "Use" button next to your desired custom style. Your journal will then appear in your custom style.

Previewing Your Style

You can use a style's ID number to see how your style will look. Appending ?s2id= plus this ID number (for example, ?s2id=12345) to one of your journal pages will cause the page to be displayed in your custom style. Note that if the URL of a page already has an argument attached such as ?nc= or ?mode=reply, you will need to add &s2id= rather than ?s2id=.