Reskinnning Sakai
 | Unless otherwise specified, this information applies to Sakai 2.0 or higher. |
Introduction
Much of the appearance of Sakai is controlled by its "skin", which is a collection of style sheets and images that together control much of the look and feel of a Sakai instance.
As of Sakai 2.0, skins are now located in the module "reference" in the "library" project, under src/webapp/skin. This translates at runtime to the url "/library/skin/". If you have a working Sakai installation, you can find the bundled skins in the subdirectory webapps/library/reference/skin/ relative to your tomcat home directory. If you have downloaded the Sakai source, you can find the bundled skins in the subdirectory reference/library/src/skin/default relative to the root of your Sakai source directory.
The skin folder contains subfolders for each skin, and a few common files and directories used across all skins. These are the common files for all skins:
common base css "tool_base.css" and some images it uses in the "images/" folder.
The skins folder also contains subfolders for each skin. Sakai is currently bundled with the skins "default", "examp- u", and "gen-u". The name of the skin is simply the folder name (defaut, examp-u, gen-u). This skin name can be entered in your sakai.properties to control the overall default skin. For example, if you created a skin directory called "myskin", you could set it as the default by adding the following to your sakai.properties file and restarting:
skin.default=myskin
The structure of any skin folder is:
portal.css
tool.css
images/
The file portal.css is used to control the appearance of the portal itself. The file tool.css is used to control the appearance of the tool iframe. The images subdirectory is a convenient place to place your unique icons, et cetera. You can of course reference images external to your Sakai installation from your style sheets.
Adding a Skin
To add skins, create your own directory in the subdirectory reference/library, and populate with at a minimum the two required style sheets. A good way to get a quick start is to copy an existing skin (default, for example) as a starting point.
 | Sites with bad skin definitions will look pretty bad. Sakai does not check to see if a skin directory exists, entering a typo when selecting the skin will make your installation look very bad. |
Using Your Own Skin Repository
If you wish to use a separate directory for your overall skin repository, this can be configured using an additional configuration option in sakai.properties, as in :
skin.repo=/myskinrepo/skin
This directory must exist and be readable. Typically, you can copy the repository directory into the webapps directory of your sakai installation.
Converting a Sakai 1.5.1 Skin to Sakai 2.0 or Higher
If you are converting, as we are at Michigan, from Sakai 1.5, I suggest dropping all the skin values from existing sites, and letting them become default. This will work for us, may not work for everyone. We no longer have different skins for course and project sites, or for published and unpublished. We no longer have different skins for our academic units. All of this is handled within a single skin.
Setting a Custom Skin for a Site
Skins are still specified at the Site level, and you can set them using the Admin site editor, but worksite setup no longer gives the option to change the skin. Instead, it offers the option to change the "appearance". This is really another name for the site icon. Most appearances use the default skin, but some override that and specify a skin. Appearances are defined in the server configuration service's bean definition, or overridden in sakai.properties. Here's what we have for the default:
<!-- for worksite setup, which offers a list of Appearance (Icon) choices (course sites only) --> <prop key="iconNames.count">3</prop> <prop key="iconNames.1">humanities</prop> <prop key="iconNames.2">engineering</prop> <prop key="iconNames.3">pig</prop> <prop key="iconUrls.count">3</prop> <prop key="iconUrls.1">/library/icon/humanities.gif</ prop> <prop key="iconUrls.2">/library/icon/ engineering.gif</prop> <prop key="iconUrls.3">/library/icon/pig.gif</prop> <prop key="iconSkins.count">3</prop> <prop key="iconSkins.1"></prop> <prop key="iconSkins.2"></prop> <prop key="iconSkins.3">examp-u</prop>
This can be overridden in sakai.properties using iconNames, iconUrls, and iconSkins settings like the following:
# icons for units iconNames.count=22 iconNames.1=CTools default iconNames.2=College of Architecture and Urban Planning iconNames.3=School of Art and Design iconNames.4=Business School iconNames.5=School of Dentistry iconNames.6=School of Education iconNames.7=College of Engineering iconNames.8=School of Information iconNames.9=Division of Kinesiology iconNames.10=Law School iconNames.11=LS&A iconNames.12=Medical School iconNames.13=School of Music iconNames.14=School of Natural Resources and Environment iconNames.15=School of Nursing iconNames.16=Officer Education Programs iconNames.17=College of Pharmacy iconNames.18=School of Public Health iconNames.19=School of Public Policy iconNames.20=Rackham School of Graduate Studies iconNames.21=School of Social Work iconNames.22=UM Dearborn iconUrls.count=22 iconUrls.1=/ctlib/icon/ctng.gif iconUrls.2=/ctlib/icon/arc.gif iconUrls.3=/ctlib/icon/art.gif iconUrls.4=/ctlib/icon/bus.gif iconUrls.5=/ctlib/icon/den.gif iconUrls.6=/ctlib/icon/edu.gif iconUrls.7=/ctlib/icon/eng.gif iconUrls.8=/ctlib/icon/inf.gif iconUrls.9=/ctlib/icon/kin.gif iconUrls.10=/ctlib/icon/law.gif iconUrls.11=/ctlib/icon/lsa.gif iconUrls.12=/ctlib/icon/med.gif iconUrls.13=/ctlib/icon/mus.gif iconUrls.14=/ctlib/icon/nre.gif iconUrls.15=/ctlib/icon/nur.gif iconUrls.16=/ctlib/icon/off.gif iconUrls.17=/ctlib/icon/pha.gif iconUrls.18=/ctlib/icon/sph.gif iconUrls.19=/ctlib/icon/spp.gif iconUrls.20=/ctlib/icon/rac.gif iconUrls.21=/ctlib/icon/ssw.gif iconUrls.22=/ctlib/icon/umd.gif iconSkins.count=22 iconSkins.1= iconSkins.2= iconSkins.3= iconSkins.4= iconSkins.5= iconSkins.6= iconSkins.7= iconSkins.8= iconSkins.9= iconSkins.10= iconSkins.11= iconSkins.12= iconSkins.13= iconSkins.14= iconSkins.15= iconSkins.16= iconSkins.17= iconSkins.18= iconSkins.19= iconSkins.20= iconSkins.21= iconSkins.22=
To override the skin based on the choice of icon, you could specify an iconSkins value such as:
iconSkins.21=myskin
Site icons are found in the specified location - we ship a few in the /library/icon folder.
To Do
This page still needs details on how a skin .css file set is constructed, the ids and classes used by Sakai, et cetera.