a cat named Tempest (isabeau) wrote in lj_userdoc,
a cat named Tempest
isabeau
lj_userdoc

Draft rewrite - FAQ 177

I've been wanting to rewrite FAQ 177 (creating a custom S2 style) for a while... if nothing else, to incorporate the possibility of theme layer customization, and to warn about user layer stuff.

Draft here, comments welcome. And yes, I know I'm using a bastardized BBcode type thing instead of HTML; that's semideliberate and semi just laziness.

[paid disclaimer]

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

[cut]

[header]Creating a Layer[/header]

In order to make advanced customizations to your journal, you will need to create and design a layer. To do this, go to the [link:http://www.livejournal.com/customize/advanced.bml]Advanced Customization area[/link] and click on [link:http://www.livejournal.com/customize/advanced/layers.bml]"Your Layers"[/link]. 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 [b]layout layer[/b]. Under "Create top-level layer", select the type Layout, and click Create.

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 [b]theme layer[/b]. 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 [link:http://www.livejournal.com/customize/options.bml]Custom Options[/link] area. [i]Do not put additional code in a user layer[/i] -- anything extra can be removed with no warning, if you use the Custom Options area at all, and there is no way to recover lost code.

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 [link]S2 documentation[/link]. 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 [link]Advanced Customization area[/link] and click on "[link]Public Layers[/link]". 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.

[header]Making Your Layer Public[/header]

--as written, unless this should be moved to a howto tutorial or something?

[header]Compiling Your Layer[/header]

--as written, more or less

[header]Using a Layer[/header]

Custom theme layers can be selected from the [link:http://www.livejournal.com/customize/style.bml]Look and Feel[/link] area, under "Themes". The drop-down will list custom layers under the system layers; select the new theme layer, and click Save Changes.

Custom layout layers need to be made into a custom style, before they can be used. Going back to the Advanced Customization area, click on "Your Styles". There is a limit of 50 custom styles per account. If you already have 50 styles created (most likely from 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 then be asked to choose an optional base language layer 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 layout-specific Language, Theme and User layers; these are all optional and can be left blank. 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 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.

[header]Previewing Your Style[/header]

You can use your style's ID number to see how your style will look. Appending [b]?s2id=[/b] plus this ID number (for example, [b]?s2id=12345[/b]) 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 [b]&s2id=[/b] rather than ?s2id=.

For security reasons, previewing your style is limited. When logged in, you can preview your style when applied to any journal. However, other users can only preview your style when it is applied to your journal.

[header]Further Reading[/header]

--as written
Subscribe

  • Post a new comment

    Error

    Comments allowed for members only

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 6 comments