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.
- 1 Identify what parts of the CSS to turn into properties
- 2 Turn your CSS into a Page::print_default_stylesheet function
- 3 See if you can expand your design to accomodate other popular preferences
- 4 Set the module properties
- 5 Expose the properties to the customization wizard
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
Utility CSS functions
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".