S2 Cookbook: Converting a CSS design to a layout

So, you have a CSS design for a Dreamwidth style, and you want to turn it into its own style! This will let people alter properties of your style in the customization wizard, or be a step towards making the style into an official one. Even though this guide has steps in a given order, that may not be the order that's easiest. You may go through the steps several times.

Identify what parts of the CSS to turn into properties

Good candidates are:

• Color properties -- you shouldn't have any hardcoded colors into the CSS. They should all be connected to properties.
• Font properties and sizes -- official styles will need to have a base font size of 1em, customizable by the user, and fonts should be customizable too.
• Text labels

When you can, use properties that already exist in core2. That will make it much easier for everyone involved!

Otherwise, you'll have to define new properties.

Turn your CSS into a Page::print_default_stylesheet function

Stylesheets are made using the Page::print_default_stylesheet function. You'll need to define it. Inside that function, you will be printing out all the CSS needed for your style, using your property variables.

If your style is built upon Tabula Rasa, copy/paste the TB source code first then add your CSS in the print_stylesheet function.

Utility CSS functions

EXPAND

See if you can expand your design to accomodate other popular preferences

• Icons on the right or left side of the entry
• Metadata before or after the entry
• One, two, or three column arrangements
• Icon or text action links

Set the module properties

The modules system lets the user reorder and define what modules they want to use in the sidebar.

Expose the properties to the customization wizard

Just because you're using a property doesn't mean it'll show up in the wizard. You'll want to list all the properties that you want to show up in the wizard in "propgroups".

• presentation
• colors
• fonts
• images
• modules