The appearance of Sakai can be modified by customizing CSS (Cascading Style Sheet) files for course sites. Sakai provides a default set of style sheets that can be modified or adjusted to meet local requirements and desires. See skinning-sakai-6.pdf
for more information.
Gonzalo Silverio
The file sakai.properties can be used to change the default behavior of several aspects of Sakai. For the QuickStart distribution it is found in the sakai/localfiles directory; for the developer edition look in /usr/local/sakai. Among the things that are easy to customize in sakai.properties are:
- the name and url of the server
- the name and version number given to this service
- the name and url of the institution running this instance of the service
- the set of navigation links displayed on the bottom of each page
Additional control over the look and branding of Sakai can be achieved by using a skin to display the local look for this Sakai installation. Skins can be used to specify the standard overall look for the system and, since the skin used for a site is an attribute of the site definition, the look for any individual site within Sakai can be further customized.
Sakai skins are composed of a set of css and image files that define the standard variables Sakai uses in its layout templates. Default and sample skins are provided in the sakai-portal/webapps/css/portalskins directory. A new skin can be created by copying and modifying one of these skins. The information for branding and appearance of the title and navigation sections of the screen are under the portalskin directory. The appearance of the context provided by Sakai tools is controlled by a css file (with the same skin name) at the same level as the portalskin directory. Note that to create a new skin you should copy one of the directories in portalskins AND make a copy of the corresponding css file which appears at the same directory level as the portalskin directory.
By default the files for a skin are found in the sakai-portal/webapps/css directory. The directory searched can be changed by modifying the property skin.root in the sakai.properties file. The default skin is set by the property skin.default. (The image directory that is a sibling to the css directory contains some images considered to not be skin specific. Any change in these images will appear in all skins.)
Some of the skins distributed with Sakai demonstrate a method for site specific customization of an existing skin. For these skins the customization takes the form of inserting an extra image called a 'pig'. This image can be used, for example, to add the display of the logo of a specific department in a university to a common university skin.
The general Sakai skin is in sakai_core. The gen-u set of skins illustrate how to create a skin and then create some further customized "pig" variant skins. The unbrand-u skin is an example of a skin tailored for customization.
For each Sakai site the skin to be used for that site can be specified on the site administration page. The value expected in the site specification field is the name of the skin with a .css extension.
Yale University
We are busy working to customize some of the CSS files for our course sites and I wanted to try to apply one of our new Appearance 'skins' to a course site and a project site to test.
I edited the course site and applied the new Appearance and when I went to modify a Project site, I noticed that there is no correlating Appearance pull-down list for a project like there is in a course.
Is this by design?
Cheryl Wogahn
This was by design. The thought was that we had 'official' skins for the various school units, that connoted a legitimacy to the site in some way. We didn't want project sites to be able to use those skins. Since anyone can create a project site, someone (a student) could create a project site, call it by an official name, give it an official skin, and add students. This could cause confusion as to what was a 'real' class site. So, we didn't put in the dropdown for project sites.
We have in certain circumstances manually associated a particular skin with a project site using the Admin Sites tool, where there is a field for skin.
I suppose this could be changed to make it configurable via a sakai.properties value, which would control whether the skin dropdown appears for a particular type of site.
John Leashia, U. Michigan
