You are here: start » des » sahana_theme

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
des:sahana_theme [2008/12/21 09:18]
tim Added classic / default / green 		des:sahana_theme [2009/11/25 20:27] (current)
greg
Line 1: Line 1:
 ====== Sahana Themes ====== ====== 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 =====
 +
 +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/theme. This new approach allows a theme to have stylesheets for each individual version of IE allowing a web designer much more control over specific IE-related css hacking techniques. 
 +
 +If these stylesheets exist in the theme, Sahana will add references to them in the <head> portion of the page as it is rendered. If these stylesheet files are not in the theme, these references will not appear in the rendered page:
 +
 +  <!--[if IE 6]>
 +  <link rel="stylesheet" type="text/css" href="theme/lpf2/ie6.css" />
 +  <![endif]--> 
 +  <!--[if IE 7]>
 +  <link rel="stylesheet" type="text/css" href="theme/lpf2/ie7.css" />
 +  <![endif]--> 
 +  <!--[if IE 8]>
 +  <link rel="stylesheet" type="text/css" href="theme/lpf2/ie8.css" />
 +  <![endif]--> 
 +  <!--[if IE 9]>
 +  <link rel="stylesheet" type="text/css" href="theme/lpf2/ie9.css" />
 +  <![endif]--> 
 +
 +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:
 +
 +  /www/theme/lpf2/ie6.css
 +  /www/theme/lpf2/ie7.css
 +  /www/theme/lpf2/ie8.css
 +  /www/theme/lpf2/ie9.css
 +
 +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 <head> as the page is being rendered by Sahana. Inside the css files, all the standard CSS rules/syntax are applied as with any other compliant stylesheet.
 +
 +===== 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 /inc/hander_footer.inc file to incorporate the changes into the site. Now, the footer itself can be created in the theme and customized for different installations of Sahana.
 +
 +Technically, the way this works, is Sahana looks in the current theme folder for the existence of a footer.php file. If this file is present, the content contained within it will replace what is in the default Sahana footer.
 +
 +  /www/theme/lpf2/footer.php
 +
 +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://wiki.sahana.lk/doku.php?id=dev:strategic_plan_for_proposed_public_stable_release_of_sahana_1.0|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:
 +
 +  * [[http://www.w3.org/International/geo/html-tech/tech-bidi.html|Internationalization Best Practices: Handling Right-to-left Scripts in XHTML and HTML Content]] by W3C
 +  * [[http://janschneider.de/news/5/319|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 =====

Trace:

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