Table of Contents
Sahana CSS Convention
Introduction
Sahana uses valid CSS 2.1 for content styling and layout. The use of web standards enables Sahana to be accessible to the highest number of users, including differently-abled people and people using alternative browsing devices such as mobile phones and PDAs. It also allows Sahana interfaces to be light and fast loading, and be consistent across a wide number of web browsers.
Guidelines
There are 3 stylesheets for each theme:
- sahana.css (For media types screen and projection)
- mobile.css (For media type handheld)
- print.css (For media type print)
The following general guidelines should be adhered to when using/modifying Sahana interfaces:
- Follow the Sahana HTML Convention for structural markup.
- Define additional CSS classes or ids only if the existing ones can't target the required element
- Validate your CSS with the W3C CSS Validator
- When defining ids in the style sheets, place them in the order of their appearance in the html document.
- The printing style sheet is used to take printouts of web forms used in the system so that they can be distributed to collect data. So the print style sheet must not contain any unnecessary items. Also it is used to take hard copies of search results.
- The style sheet should work properly in “800×600” and “1024×768” resolutions.
- Please make sure the style sheet would work in popular browsers as you intended.
Layout Elements
The following main elements are defined for the Sahana interface template.
container
This is the wrapper element for all contents of the page. It's right after the <body>
tag.
header
The header element is where the Sahana logo and other header section content appears.
wrapper
The wrapper element contains the actual content specific to each page (i.e., everything except the header and the footer).
skip
The skip paragraph contains the quick links to the content section and the main menu. This is especially useful to mobile and screen reader users.
modmenuwrap
This element holds the module menu, which is an unordered list <ul id=“modmenu”>
.
menuwrap
This element holds the main menu, which is an unordered list <ul id=“menu”>
.
loginform
This element holds the login form.
content
The content element holds the crux of the page. This is where the page specific content is presented.
footer
The footer element holds the footer content.
Navigation Elements
There are 2 main navigation elements in Sahana.
- Module Menu
- Main Menu
Module Menu
The module menu can go two levels deep. The following is an example xhtml which identifies the IDs used in the module menu.
<ul id="modulemenu"> <li id="modactive"><a href="http://www.sahana.lk/" id="modcurrent">Add Camp</a> <ul id="modsubmenu"> <li><a href="http://www.sahana.lk/">Add Camp</a></li> <li id="modsubactive"><a href="http://www.sahana.lk/" id="modsubcurrent">Search camp</a></li> <li><a href="http://www.sahana.lk/">View Camps</a></li> </ul> </li> <li><a href="http://www.sahana.lk/">Search camp</a></li> <li><a href="http://www.sahana.lk/">View Camps</a></li> <li><a href="http://www.sahana.lk/">Statistics</a></li> </ul>
The menu is in an unordered list ul
with the modulemenu
ID. The currently selected main option should have modactive
ID on the li
element, and modcurrent
on the a
element. If there's a sub menu for this selected link, it should be contained within the li
element, in an unordered list ul
with the modsubmenu
ID. If a sub menu item is selected, it should have the modsubactive
ID on its li
element, and modsubcurrent
on the a
element.
Main Menu
Like the module menu, the main menu too can go two levels deep. The following is an example xhtml which identifies the IDs used in the main menu.
<ul id="menu"> <li><a href="#">Disaster Victim Registry</a></li> <li id="active"><a href="#" id="current">Camp Management System</a> <ul id="submenu"> <li><a href="http://www.sahana.lk/">Add Camp</a></li> <li id="subactive"><a href="http://www.sahana.lk/" id="subcurrent">Search camp</a></li> <li><a href="http://www.sahana.lk/">View Camps</a></li> <li><a href="http://www.sahana.lk/">Statistics</a></li> </ul> </li> <li><a href="#">Request and Assistance Management System</a></li> <li><a href="#">Organization Registry</a></li> <li><a href="#">News</a></li> </ul>
The menu is in an unordered list ul
with the menu
ID. The currently selected main option should have active
ID on the li
element, and current
on the a
element. If there's a sub menu for this selected link, it should be contained within the li
element, in an unordered list ul
with the submenu
ID. If a sub menu item is selected, it should have the subactive
ID on its li
element, and subcurrent
on the a
element.
Thus, the example shows the currently selected main menu item as Home > Camp Management System > Search Camp
.
Arrangement of Elements
The following is the basic arrangement of these elements:
<div id=”container”> <div id=”header”></div> <div id="wrapper"> <p id="skip"></p> <div id="modmenuwrap"></div> <div id="menuwrap"></div> <div id="loginform"></div> <div id="content"></div> </div> <div id=”footer”></div> </div>
Form Elements
Several main elements have been introduced to create forms.
formcontainer
This is the container for all the forms within a page.
formset
This includes the styles for a single form within the page.
Form creation
All the form template handlers are located in the library inc/lib_forms.inc. Here is an example of some code you would write to create a form:
shn_form_fopen('dbsetup', 'admin'); // open the form with action dbsetup and module admin shn_form_fsopen('Database'); shn_form_select( array( 'mysql' => 'MySQL 4.1'), "Database Type", "dbtype"); shn_form_text('Database Host:Port','dbhost','size="30"', array('value'=>'localhost','req'=>true )); shn_form_text('Database Name','dbname','size="30"', array('value'=>'sahana', 'req'=>true)); shn_form_text('Database User','dbuser','size="30"', array('value'=>'root', 'req'=>true)); shn_form_password('Database Password','dbpass','size="30"', array('req'=>true)); shn_form_fsclose(); shn_form_fsopen('Schema\'s to Install'); shn_form_checkbox('Create Main Database tables','dbcreate',"checked", array('value'=>'y')); shn_form_checkbox('Default Configuration','dbconfig',"checked", array('value'=>'y')); shn_form_checkbox('Sample Data','dbsample','', array('value'=>'y')); shn_form_fsclose(); shn_form_submit('Setup Database >>'); shn_form_fclose();
And it generates something like this:
<div id="formcontainer"> <form method="POST" action="index.php?mod=admin&act=dbsetup" id="formset" > <fieldset> <legend>Database</legend> <label>Database Type</label> <select name="dbtype" > <option value="mysql" selected>MySQL 4.1</option> </select> <br/> <label>Database Host:Port</label> <input type="text" name="dbhost" value="localhost" size="30" /> <b>*(req)</b> <br/> <label>Database Name</label> <input type="text" name="dbname" value="sahana" size="30" /> <b>*(req)</b> <br/> <label>Database User</label> <input type="text" name="dbuser" value="root" size="30" /> <b>*(req)</b> <br/> <label>Database Password</label> <input type="password" name="dbpass" value="" size="30" /> <b>*(req)</b> <br/> </fieldset> <fieldset> <legend>Schema's to Install</legend> <label>Create Main Database tables</label> <input type="checkbox" name="dbcreate" value="y" checked /> <br/> <label>Default Configuration</label> <input type="checkbox" name="dbconfig" value="y" checked /> <br/> <label>Sample Data</label> <input type="checkbox" name="dbsample" value="y" /> <br/> </fieldset> <input type="submit" value="Setup Database >>"/> </form> </div> <!-- /formcontainer -->
Tabular Results Elements
Several elements have been included to format tabular results.
result
This is the container of the table with results.
Example Results Set
An example results set using above mentioned elements is gieven below.
<div id ="result"> <h2>Organization Registry</h2> <table> <thead> <td>Organization Name</td> <td>Contact Address</td> </thead> <tbody> <tr> <td>Test Name</td> <td>Test Address</td> </tr> </tbody> </table> </div>
Error Element
To indicate errors generated by the system error id has been used. You can use this id to highlight errors.
error
This is the container for the error and a unordered list of comments.
Example Error Element
The following example shows how the error id has been used.
<div id="error"> <p><em>Sorry, you do not have permission to access this section</em>.<br/><br/>This could be because:</ul> <ul> <li>You have not logged in or Anonymous access is not allowed to this section</li> <li>Your user name has not been given permission to access this section</li> </ul> <p>To gain access to this section please contact the administrator</p> </div>