Sakai UI Skinning Support

[Chris Roby]

Hi everyone,

As we're nearing the time where institutions are actually going to be deploying Sakai in their pilot environments, per-institution skinning of a deployment has been a topic of discussion. I've just now committed some work to the UI master repository that will allow for institutions to skin their installations via configuration. This has been done on two levels, Sakai-wide, and for user and group pages (show.html). 

For the Sakai-wide skinning

* In /dev/_configuration/custom_config.js, there is a property called sakai.config.skinCSS. The values of its array (URLs to CSS files) will be loaded in to each page on page load, which means you can specify multiple CSS files to be loaded for every page in Sakai. This currently looks like

       sakai.config.skinCSS = ["/dev/_skins/default/skin.css"];

* As per that configuration, I've included a sample skin file with no CSS rules at /dev/_skins/default/skin.css.

* I've also included config_custom.js in each html file that config.js is included in, as that was the intent of config_custom.js -- it just hadn't found its way into all the pages yet.

* I've added an extra div on top of the top navigation to allow for easier styling. That div looks like

        <!-- TOP BANNER -->

        <div id="top_banner"><!-- --></div>

For the User and Group skinning

* When creating a user or group via a script, institutions can specify an optional parameter called "sakai:customStyle". The value of this parameter is a string with the URL to a single css file. This will allow institutions to create a class of users or a class of groups that have special skinning applied to them. For reference, here are some curls:

--------------

# User Creation

curl -d"pwd=test" -d"pwdConfirm=test" -d"email=us...@sakai.invalid" -d":name=user8" -d":sakai:pages-template=/var/templates/site/defaultuser" -d"sakai:customStyle=/dev/_skins/nyu/skin.css" -d":sakai:profile-import={'basic': {'access': 'everybody', 'elements': {'email': {'value': 'us...@sakai.invalid'}, 'firstName': {'value': 'User'}, 'lastName': {'value': '8'}}}}" http://admin:admin@localhost:8080/system/userManager/user.create.html

# Group Creation

curl -d":name=group9" -d":sakai:manager=user8" -d"sakai:group-title=Group 9" -d"sakai:group-description=description of group9" -d"sakai:group-id=group9" -d"sakai:group-joinable=yes" -d"sakai:group-visible=public" -d"sakai:pages-visible=public" -d":sakai:pages-template=/var/templates/site/defaultgroup" -d"sakai:customStyle=/dev/_skins/nyu/skin.css" http://admin:admin@localhost:8080/system/userManager/group.create.html

# Group Permissions, for completeness

curl -d"principalId=everyone" -d"privilege@jcr:read=granted" http://admin:admin@localhost:8080/~group9.modifyAce.html

curl -d"principalId=anonymous" -d"privilege@jcr:read=granted" http://admin:admin@localhost:8080/~group9.modifyAce.html

--------------

* When a user goes to show.html to view either a user or a group, the css file contained in the sakai:customStyle property will be loaded in. This css file will affect the whole document, so a user or group could, if desired, look dramatically different than the rest of Sakai.

* I've also added a convenience div in show.html to make skinning easier. This div is above the sitespages widget (the page navigation and the place where the page content is shown) and below the entity widget. That div is

<!-- HEADER -->

        <div id="pages_heading"><!-- --></div>

With these pieces of plumbing in place, an institution should be able to skin to their hearts content with minimal, if any, editing of core html or css files. Please let me know if you have any comments or feedback on the way this has been implemented. Note that this is just a start, and that user-configurable skins are down the road(map).

-- 
Chris Roby