S2 Guide: Style System Overview

Layers

Every style is composed from a set of layers. Things in later layers override things in earlier layers; the first layer is called the core layer and everything builds on top of it.

<graphviz caption='Order of layers'> // This is just a wee graph of the order of layers! digraph layers { rankdir = "LR";

core_layer [shape="doubleoctagon" color="#002F74" fontcolor="black" label="Core"]; i18nc_layer [shape="Mdiamond" color="#017313" fontcolor="black" label="i18nc"]; layout_layer [shape="doubleoctagon" color="#444F96" fontcolor="black" label="Layout"]; i18n_layer [shape="Mdiamond" color="#01A313" fontcolor="black" label="i18n"]; theme_layer [shape="doubleoctagon" color="#886FA8" fontcolor="black" label="Theme"]; wizard_layer [shape="doubleoctagon" color="#BB8FCA" fontcolor="black" label="Wizard"];

subgraph {

 rank = same;
 core_layer;
 i18nc_layer;

}

subgraph {

 rank = same;
 layout_layer;
 i18n_layer;

}

core_layer -> layout_layer core_layer -> i18nc_layer i18nc_layer -> layout_layer layout_layer -> theme_layer layout_layer -> i18n_layer i18n_layer -> theme_layer

theme_layer -> wizard_layer } </graphviz>

Core layer

The core layer is the foundation everything else builds on. It can:

• Define classes
• Define builtin functions that are present in the backend
• Define global functions that don't belong to a class
• Define class methods
• Define and set properties

Dreamwidth has two different core layers.

• core1 is inherited from LiveJournal and allows people to import their LiveJournal layouts.
• core2 is Dreamwidth's core layer, that includes extra features built in, like modules. Plain Tabula Rasa is the base style put out by core2.

If you're making a layout on Dreamwidth, you'll probably want to use core2. You can't make your own core layer as a site user.

Layout layer

If you want to make a brand new layout, start with a layout layer. Layout layers can:

• Define builtin functions that are present in the backend
• Define global functions that don't belong to a class
• Override existing class methods
• Define new class methods; the method name must have the prefix lay_ to avoid future namespace collisions if the core layer expands
• Define and set properties
• Set up properties for the customization wizard

Theme layer

A theme layer goes on top of the layout layer and tweaks it. Start with a theme layer if you like a certain layout and just want to make some changes to it.

A theme layer can:

• Override existing functions
• Override names and descriptions of properties

It's usually used to make different versions to a base layout, such as different color schemes.

Wizard layer

All a wizard layer can do is set existing properties. Since a lot of layouts have many properties, this can change a lot of things!

Expand: Need to talk about how wizard layers get automatically generated, what to do to prevent them being wiped by the customization area, etc.

It's meant to be edited using the customize interface on the site, but can also be created or edited manually. (If you're familiar with styles on LiveJournal, this was called the "user layer".)

Many new layout themes have originated from people sharing wizard layers in dreamscapes!

Internationalization layers

Unless you're translating a layout into another language, you won't have to worry about these layers. The i18nc layer overrides text properties in the core, translating them into a specific language. It also overrides the default short, medium, and long date and time formats and functions which do things like return ordinal numbers from cardinal numbers and map item counts onto their plural form.

To achieve this goal, language layers can:

• Set properties
• Override the names and descriptions of properties
• Override existing functions

i18nc: core

This layer translates text properties in the core into a specific language, overrides the default date and time formats, and changes functions that do things like make pluralized item count statements--all things that can change according to different languages or standard conventions!

i18n: layout

This layer does the same as i18nc, but only for new properties or functions added by a layout.

Layerinfo

Available layerinfo settings

All possible layerinfo settings

Name	Use
type (required)	type is the only required layerinfo value. It needs to be a string of one of the following values: "core", "layout", "theme", "user" (refers to the wizard layout).
name	This is a string of the name of the layer.
author_email	This is a string of the author's email.
author_name	This is a string of the author's name.
des	A string describing the layer.
is_public	If this is present and set to 1, that means the layer is available for other users to use in their own S2 styles. That doesn't mean they can view the source, though; see source_viewable.
source_viewable	If this is present and set to 1, that means the layer's source is viewable to others. That doesn't mean they can use this layer like with is_public, although if they can see the source they can make a layer of their own with the code.
majorversion	FILL IN
minorversion	FILL IN
previews (system)	If a layer is going to be included in the main system, this indicates what preview image to use in the style selector.
redist_uniq (system)	If a layer is going to be included in the main system, it needs a unique identifier as a string.

Examples of using layerinfo settings

layerinfo "type"            = "theme";
layerinfo "name"            = "Sheep Sky";
layerinfo "author_email"    = "bwoolly@dreamwidth.org";
layerinfo "author_name"     = "B. Woolly";
layerinfo "des"             = "A layout featuring sheep as clouds.";
layerinfo "is_public"       = 1;
layerinfo "source_viewable" = 1;
layerinfo "majorversion"    = 2;
layerinfo "minorversion"    = 4;
layerinfo "previews"        = "test/test.jpg";
layerinfo "redist_uniq"     = "test/layerinfo";

Creating and managing layers

You can create and manage layers on the Your Layers page.

Using the layer editor

Clicking the "Edit" button next to any layer on the layer list will bring you to the layer editor.

The sidebar will help you navigate through your code; it lists property groups or functions present, and clicking on one will take you to that position in your code.

In order to save your layer, click on Save & Compile at the top. Only valid code will save--if you have syntax errors in your code, it will give you an error. The Troubleshooting page might give you some advice on how to fix it.

Creating and managing styles

You can create and manage styles at Your Styles.