Difference between revisions of "S2 Cookbook: Converting a CSS design to a layout"
From Dreamwidth Notes
(added a few details) |
Foxfirefey (Talk | contribs) m (switched from the foxfirefey hack to the dreamwidth site) |
||
| Line 5: | Line 5: | ||
## Or, new properties can be defined. | ## Or, new properties can be defined. | ||
# Write a <code>Page::print_default_stylesheet</code> function that prints out CSS using the defined properties. | # Write a <code>Page::print_default_stylesheet</code> function that prints out CSS using the defined properties. | ||
| − | ## If your style is built upon Tabula Rasa, copy/paste the [http://www | + | ## If your style is built upon Tabula Rasa, copy/paste the [http://www.dreamwidth.org/customize/advanced/layersource?id=551 TB source code] first then add your CSS in a <code>print_stylesheet</code> function. |
# Expose the used properties to the customization wizard. | # Expose the used properties to the customization wizard. | ||
# Expand your design to include popular preferences, if possible, such as: icons on the left or right side; different column layouts; metadata on the top or bottom of the entry; icon or text action links. | # Expand your design to include popular preferences, if possible, such as: icons on the left or right side; different column layouts; metadata on the top or bottom of the entry; icon or text action links. | ||
Revision as of 00:00, 18 August 2010
The basic steps to converting a CSS design to a layout are:
- Identify what parts of the CSS can be turned into properties i.e. all the things that users can customize in the Customize interface. For instance, colors should always be properties, instead of being "hardcoded" into the CSS.
- The
core2layer has a lot of built in properties that can be used. - Or, new properties can be defined.
- The
- Write a
Page::print_default_stylesheetfunction that prints out CSS using the defined properties.- If your style is built upon Tabula Rasa, copy/paste the TB source code first then add your CSS in a
print_stylesheetfunction.
- If your style is built upon Tabula Rasa, copy/paste the TB source code first then add your CSS in a
- Expose the used properties to the customization wizard.
- Expand your design to include popular preferences, if possible, such as: icons on the left or right side; different column layouts; metadata on the top or bottom of the entry; icon or text action links.
- Set other necessary housekeeping properties, such as modules.
