How to make a style based on Tabula Rasa

From Dreamwidth Notes
Revision as of 18:56, 12 August 2015 by Kaberett (Talk | contribs)

Jump to: navigation, search

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

stylename/layout          layout(core2base/layout)    core2
stylename/themes          theme+                      stylename/layout


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: ~/dw/styles/core2base.

On Dreamwidth itself you can find the 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:

layerinfo type = "theme";
layerinfo name = "Theme Name";
layerinfo redist_uniq = "stylename/themename";
layerinfo author_name = "someuser";

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 _child to the name of each propgroup (tab). For example, an option for the presentation tab of the wizard goes in propgroup presentation_child, like this:

propgroup presentation_child {
    property use special_option;
}

Stylesheet

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

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

##===============================
## Stylesheet
##===============================

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 Page::print_default_stylesheet(), any other new functions in your code (eg overriding Page::print()) will likely not be redundant. Add these to the Newbie_Guide:_How_to_Patch_Styles_and_Themes#Special_case:_custom_functions section of your layout layer.