Information
This guide will show you how to go about customising SakaiAdminX for your own use.
Once you get SakaiAdminX up and running (or if you take a look at the screenshots) you will notice that SakaiAdminX is branded for the Centre for e-Science at Lancaster University, UK. Sooner or later you will want to change that!
SakaiAdminX
The following image shows a rough breakdown of the various sections to the SakaiAdminX template:
The following key shows the different sections and how the relate to the SakaiAdminX webapp:
Header | header.jspf | |
Side navigation | sidemenu.jspf | |
Footer | footer.jspf | |
Main content | Each .jsp defines the content for this section |
In order to skin SakaiAdminX successfully, you will need to use Firefox and the Firebug plugin to show the structure in more detail.
Styles
For most pages, header.jspf defines most of the styles with the exception of the modal windows which have a single body{} override to give them the blue shaded background.
The header.jspf also sets up most of the structure.
The sidemenu.jspf is included by header.jspf and renders the side navigation as well as the branded box at the bottom of the menu.
The footer.jspf is included by every page and closes off the main page divs, as well as outputting some of its own branded content.
All styles are defined in styles/styles.css with the exception of the body{} override in the modal windows.
Eventually, the default style of SakaiAdminX may change to be more generic and easier to style, but with this information it should be relatively easy to modify the existing structure.
The tag library
The taglibrary wraps up some common functionality into single tags, ie the <e:footer /> tag simply outputs '</body></html>'.
Some other tags also have their own styles applied to them by default. The source code to the taglibrary is readily available and it is all documented.
Images and icons
Some images used by the default SakaiAdminX skin are in images/ and many icons are in images/icons/. A larger set of icons called 'Icojoy are used for most warning/alert/info messages and are in images/icons/icojoy. The main set of icons, Silk, are located at images/icons/silk
You will notice that all references in styles/styles.css are absolute URLs so its possible to locate these icons elsewhere if you desire. You will need to change the reference in the taglibrary Page.java file as well though (see the Installation Guide for more info on configuring the tag library).
Most tag library references to icons use the scheme silk/someicon and the tag library does the rest so as long as the base URL to the iconsets are set correctly, the URLS should resolve.