Skinning SakaiAdminX

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:

Coloured box

Section

Where to look

yellow

fuchsia

navy

green

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.

SakaiAdminX doesn't look the best under IE7 due to its absurd disregard for web standards but since most users will be skinning it for their own use, that can be taken care of in the skinning stage.

The tag library

The taglibrary wraps up some common functionality into single tags, ie the most simplest tag, the <e:footer /> tag simply outputs '</body></html>'. Other tags are quite complex so it's worth taking a look at the taglib documentation which is generated when the taglib is built. It just needs to be unpacked somewhere. See the Installation Guide for info on the taglibrary.

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.