This is an old revision of the document!


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;} 

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

Click to download

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.

Image of theme

Tim McNamara 2008/12/16 06:49


Navigation
QR Code
QR Code des:sahana_theme (generated for current page)