Home : Support : Frequently Asked Questions : FAQ Question #177

FAQ Question #177

» How do I create a custom S2 style?

Users with Paid, Permanent, and Early Adopter accounts can create S2 styles. If you are interested in purchasing a paid account, see http://www.livejournal.com/support/faqbrowse.bml?faqid=21. For information on customization available to free users in S2, see http://www.livejournal.com/support/faqbrowse.bml?faqid=170.

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. More information can be found at http://www.livejournal.com/support/faqbrowse.bml?faqid=176.

In order to create a custom style, you must first create and design a Layout layer. To do this, first go to the Advanced Customize area (http://www.livejournal.com/customize/advanced/) and click on "Your Layers". Under "Create top-level layer", select the type Layout, and click Create. This will take you to the Layer Editor, where you are presented with a blank layer.

Now you have created your Layout layer, you will need to design, or "code" it. This involves knowledge of the S2 programming language, which is explained in the official S2 documentation (http://www.livejournal.com/doc/s2/). 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 Advanced Customization 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 "Download" to view the raw source code, or "View as HTML" to see the raw source code in a colour-coded format. Note that you cannot view the source code of paid-only styles, such as Component and The Boxer. 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.

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 "Compile", so it can 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 (such as Notepad or TextEdit) 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 (http://www.livejournal.com/customize/advanced/layers.bml). At any time, you can return to this page and edit your new Layout layer to your liking, providing you remain a paid user. More importantly, you can now use your new Layout layer to create a custom style.

Going back to the Advanced Customize area, click on "Your Styles". Under "Create Style", choose a name for your custom style and click "Create". You will then be asked to choose a base language (optional), and a Layout Layer: here, choose the Layout Layer you just created, and click "Change". On the next page you will be asked to choose a layout-specific Language, Theme and User layers; these are all optional and do not need to be defined. Click "Save Changes", and you will be taken back to the Your Styles page where your new custom style will be listed alongside its assigned ID number.

This ID number can be used to see how your new S2 style will look before you actually start using it with your journal. Appending "?s2id=" plus this ID number (for example, "?s2id=19871") 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=". Additionally, for security reasons you can only preview your style as it would appear if applied to your own journal pages.

Once you are satisfied that your custom style is ready for use with your journal, 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.

Last Updated:
lyspeth, 2003-09-19


Back to the parent FAQ category.
Back to the FAQ.
Back to the support area.
English • Español • Deutsch • Français • Русский • →