Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
des:sahana_theme [2008/12/16 01:27] tim created |
des:sahana_theme [2009/11/25 20:27] (current) greg |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Sahana Themes ====== | ||
- | ===== Clean Theme ===== | + | **Please note, this page is incomplete. Feel free to contribute where you can.** |
+ | |||
+ | ===== Introduction ===== | ||
+ | |||
+ | This page is focused at enabling designers to produce themes for the Sahana Disaster Management System. If you are looking for themes to change the look of your Sahana experience, please feel free to scroll to the "Theme Directory" | ||
+ | |||
+ | Themes are pure CSS and do not use a template engine. This decreases the weight of the application as a whole, but means we don't have some of the functionality that a template engine would provide. | ||
+ | |||
+ | |||
+ | ===== Sahana HTML Document Tree ===== | ||
+ | |||
+ | Sahana makes heavy use of the following structural divisions: [image to follow] | ||
+ | |||
+ | ^# | ||
+ | | ^# | ||
+ | | | ^# | ||
+ | | | ^# | ||
+ | | ^# | ||
+ | | | ^ # | ||
+ | | | | ^# | ||
+ | | | | ^# | ||
+ | | | | ^# | ||
+ | | | | ^# | ||
+ | | | | ^# | ||
+ | | | | ^# | ||
+ | | | | ^# | ||
+ | |||
+ | There are also several divisions, such as #result that are include within the #content div. They will be included in this tree shortly. | ||
+ | |||
+ | |||
+ | ===== Fixed Layout Example ===== | ||
+ | |||
+ | #container { } | ||
+ | #header { } | ||
+ | # | ||
+ | #language { } | ||
+ | #wrapper { } | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | ===== Liquid Layout Example ===== | ||
+ | |||
+ | #container { } | ||
+ | #header { position: | ||
+ | # | ||
+ | #language { } | ||
+ | #wrapper { } | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | ===== Internet Explorer CSS Hacking ===== | ||
+ | |||
+ | Newly introduced to Sahana framework is the mechanism for providing Internet Explorer specific stylesheets (currently in trunk). As many web designers know, there are many headaches caused by supporting multiple versions of Internet Explorer in a web site's template/ | ||
+ | |||
+ | If these stylesheets exist in the theme, Sahana will add references to them in the < | ||
+ | |||
+ | <!--[if IE 6]> | ||
+ | <link rel=" | ||
+ | < | ||
+ | <!--[if IE 7]> | ||
+ | <link rel=" | ||
+ | < | ||
+ | <!--[if IE 8]> | ||
+ | <link rel=" | ||
+ | < | ||
+ | <!--[if IE 9]> | ||
+ | <link rel=" | ||
+ | < | ||
+ | |||
+ | To take advantage of this new feature, simply create a css file in your theme folder for the specific version of ie you wish to create a custom stylesheet for: | ||
+ | |||
+ | / | ||
+ | / | ||
+ | / | ||
+ | / | ||
+ | |||
+ | The important thing to remember is that the files MUST be named in this convention: (ie6.css, ie7.css, ie8.css, ie9.css) or else they will be skipped over and not referenced in the HTML < | ||
+ | |||
+ | ===== Custom Theme Footer ===== | ||
+ | |||
+ | As with the above new feature added to Sahana, this one involves handling more customization with themes. In certain instances, it may be preferable to have different content in the site's footer. However, before this patch was introduced, the user was left to hacking up the / | ||
+ | |||
+ | Technically, | ||
+ | |||
+ | / | ||
+ | |||
+ | Simply create the footer.php file in your theme and populate it with any php/html that is needed in your customized footer. | ||
+ | |||
+ | |||
+ | ===== Help Required - Right to Left Theme ===== | ||
+ | |||
+ | As part of the [[http:// | ||
+ | |||
+ | Here are some links that I have found: | ||
+ | |||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | |||
+ | |||
+ | ==== Challenges ==== | ||
+ | |||
+ | Here are are few things that are unlikely to be something that can be dealt with CSS, although they can be feed upstream for thought. | ||
+ | |||
+ | **Forms** will be difficult, as labels generally appear on the left of the inputs field. **Frames**, and **table columns** have to be reversed in order. | ||
+ | |||
+ | ==== Outline ==== | ||
+ | |||
+ | This theme shouldn' | ||
+ | |||
+ | - Realign menus to float: right ; | ||
+ | - Rotate images (this will mean that references to the original images will need to be amended | ||
+ | - Flip asymmetrical padding and/or margins in //all// elements | ||
+ | - Test | ||
+ | |||
+ | |||
+ | ====== Theme Directory ====== | ||
+ | |||
+ | ===== Classic ===== | ||
+ | |||
+ | Classic was the original default theme. It has now been replaced with the default theme. | ||
+ | |||
+ | == Derivatives == | ||
+ | |||
+ | * Default | ||
+ | |||
+ | ===== Default ===== | ||
+ | |||
+ | This is the current default theme. It features an attractive left-menu system and a strong blue, green and grey palette. The menu is fixed with, which ensures that it will be correctly rendered in all screen sizes. | ||
+ | |||
+ | == Derivatives == | ||
+ | |||
+ | * Green | ||
+ | * Clean | ||
+ | |||
+ | |||
+ | ===== Green ===== | ||
+ | |||
+ | [content to follow] | ||
+ | |||
+ | |||
+ | ===== Clean ===== | ||
=== Version 0.6 === | === Version 0.6 === | ||
{{des: | {{des: | ||
- | This theme makes heavy use of gradients to produce a smooth, finished look. It is designed to be able to be read for long periods of time (e.g. no black text on white) and for the content to have a larger impact than the menus. | + | This theme makes heavy use of gradients to produce a smooth, finished look. It is designed to be able to be read for long periods of time (e.g. no black text on white) and for the content to have a larger impact than the menus. Fonts will look different when you run Sahana, as this theme is tolerant of user settings. |
The archive is in .zip format, and should open in all operating systems. | The archive is in .zip format, and should open in all operating systems. |