View source for How to make a style based on Tabula Rasa

It's encouraged to create each new style as ''child'' of Tabula Rasa. This layout sets up the basic conditions needed to make a functional journal, leaving you to code the appearance of your new style. Layouts which inherit the basic set-up from Tabula Rasa are easy to update later on. When someone makes a change to the way journals are displayed in S2, it will automatically be applied to child styles, without having to patch each one individually.  


== Adding your style to s2layers.dat ==

<syntaxhighlight lang="perl">
stylename/layout          layout(core2base/layout)    core2
stylename/themes          theme+                      stylename/layout
</syntaxhighlight>


== Using the layer editor ==

Find the layout code for Tabula Rasa. NB this layout is named core2base in the file system. 

On Dreamhacks the file you want is: <code>~/dw/styles/core2base</code>.

On Dreamwidth itself you can find the [http://www.dreamwidth.org/customize/advanced/layersource?id=551 Tabula Rasa layer source].

Start by copying and pasting everything in this file into the S2 layer editor. Then on a new line, start the code for your new style using the normal headings, eg: 

<syntaxhighlight lang="s2">
layerinfo type = "theme";
layerinfo name = "Theme Name";
layerinfo redist_uniq = "stylename/themename";
layerinfo author_name = "someuser";
</syntaxhighlight> 

When you have finished you will have a layout layer with the complete code for Tabula Rasa followed by the complete code for your new style.

== Editing files directly ==

Work in [[Newbie_Guide:_How_to_Patch_Styles_and_Themes#Create_layout.s2]] exactly as for any style. 

You don't need to paste the Tabula Rasa code in in this case. The backend will automatically create a layer which combines the Tabula Rasa code with your code.

== Code alterations for Tabula Rasa based styles ==

=== Propgroups ===

If you want to add extra properties to appear in the customization wizard, you need to sort them into tabs. Tabula Rasa sets up most of the obvious ones already, but your style may need some extra. 

Add the suffix <code>_child</code> to the name of each <code>propgroup</code> (tab). For example, an option for the presentation tab of the wizard goes in <code>propgroup presentation_child</code>, like this:

<syntaxhighlight lang="s2">
propgroup presentation_child {
    property use special_option;
}
</syntaxhighlight> 

=== Stylesheet ===

If your style has custom CSS defined in <code>Page::print_default_stylesheet()</code>, you need to change that to a new function, <code>print_stylesheet ()</code>

Add all the code to generate your CSS to the Stylesheet section, which should look like this: 

<syntaxhighlight lang="s2">
##===============================
## Stylesheet
##===============================
</syntaxhighlight>

This will apply the basic Tabula Rasa stylesheet, which controls some general positioning, and then your custom stylesheet which will give the page its finished appearance. The inheritance should work automatically. If you style an element which is already in Tabula Rasa's stylesheet, the style-specific one will take priority. 

== Remove redundancy ==

If you repeat code from Tabula Rasa in your style code, it will still work. Repeated code can cause problems later on, though. Compare the Tabula Rasa layer with your style layer, and remove 
*any options which Tabula Rasa already sorts into propgroups
*any CSS instructions which are identical to the ones in Tabula Rasa's stylesheet.

Since Tabula Rasa doesn't have any functions apart from <code>Page::print_default_stylesheet()</code>, any other new functions in your code (eg overriding <code>Page::print()</code>) will likely not be redundant. Add these to the [[Newbie_Guide:_How_to_Patch_Styles_and_Themes#Special_case:_custom_functions | custom functions]] section of your layout layer.

[[Category: Styles]]