This is an old revision of the document!
Table of Contents
Sahana Themes
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” section. Particular focus of the documentation is to enable each organisation to create its own theme. Each theme is easily plugged in by the client.
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]
#container | Structural only. Follows <body>. No content of its own. | |||
---|---|---|---|---|
#header | Container that includes the header content <h1> and | |||
#incident_changer | Small form that allows users to change incidents. | |||
#language | Small form that allows users to change languages. | |||
#wrapper | Structural only. | |||
#wrapper_menu | Structural container that contains all menus. | |||
#menuwrap | Container for the main Sahana menu, which enables users to switch modules. | |||
#modmenuwrap | Container for each individual module. | |||
#breadcrumbs | Navigational aids. Be careful here, the “Home” breadcrumb is not rendered as the others, and needs to be bolded. | |||
#loginform | The main login form. Points to note include the use of <center> tags within the HTML markup. Also, unlike the other menus, the header “Login” is a legend, not a header tag. | |||
#openid_login | Replaces the #loginform, when OpenID login is selected. | |||
#content | Structural division. | |||
#footer | Footer. |
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 { } #incident_changer { } #language { } #wrapper { } #wrapper_menu { position:relative; } #menuwrap { width: 200px; float: left; clear: left; } #modmenuwrap { width: 200px; float: left; clear: left; } #breadcrumbs { } #loginform { width: 100px; float: left; clear: left; margin-top: 1em; margin-bottom:6.2em; padding: 0 10px; } #openid_login { width: 122px; padding-left: 18px; } #content { margin: 0 0 0 200px; padding: 10px; } #footer { margin: 0; padding: 10px; clear: both; }
Liquid Layout Example
#container { } #header { position:relative; height: 5em; } #incident_changer{ } #language { } #wrapper { } #wrapper_menu { position:relative; } #menuwrap { width: 10%; float: right; clear: right; margin: 1%; } #modmenuwrap { width: 10%; float: left; clear: left; margin: 1%; } #breadcrumbs { width: 10%; float: left; clear: left; margin: 1%; } #loginform { width: 10%; float: left; clear: left; margin: 1%; } #openid_login { width: 10%; float: left; clear: left; margin: 1%; } #content { width: 72%; margin: 0 auto 0 auto; } #footer { height: 10em; margin: 0; padding: 10px; clear: both;}
Internet Explorer CSS Hacking
e
Help Required - Right to Left Theme
As part of the lead up to Sahana 1.0, it would be great if we could work on a right-to-left theme base.
Here are some links that I have found:
- Nice helper to create RTL CSS files by Jan Schneider.
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't be too difficult to produce. The menus and images are effectively reversed. Here is a rough outline of the things that need to happen:
- 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
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.
— Tim McNamara 2008/12/16 06:49