Difference between revisions of "S2 Cookbook: Converting a CSS design to a layout"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) |
(added a few details) |
||
| Line 1: | Line 1: | ||
The basic steps to converting a CSS design to a layout are: | The basic steps to converting a CSS design to a layout are: | ||
| − | # Identify what parts of the CSS can be turned into properties. For instance, colors should always be properties, instead of being "hardcoded" into the CSS. | + | # 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 <code>core2</code> layer has a lot of [http://www.foxfirefey.hack.dreamwidth.net/customize/advanced/layerbrowse?id=core2#table_layerbrowse_properties built in properties] that can be used. | ## The <code>core2</code> layer has a lot of [http://www.foxfirefey.hack.dreamwidth.net/customize/advanced/layerbrowse?id=core2#table_layerbrowse_properties built in properties] that can be used. | ||
## 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. | ||
| − | # Expose the used properties to the customization wizard | + | ## If your style is built upon Tabula Rasa, copy/paste the [http://www.foxfirefey.hack.dreamwidth.net/customize/advanced/layersource?id=551 TB source code] first then add your CSS in a <code>print_stylesheet</code> function. |
| − | # 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 | + | # Expose the used properties to the customization wizard. |
| − | # Set other necessary housekeeping properties, such as modules | + | # 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. | ||
[[Category: S2 Cookbook]] | [[Category: S2 Cookbook]] | ||
Revision as of 10:04, 12 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.
