Skin Examples

Owned by Former user (Deleted)
Last updated: May 30, 2013 by Former user (Deleted)
4 min read

Sakai 2.6

Stanford University

Notes:

  • Initially released in 2010, the design was trying to harken back to earlier designs which featured the Stanford Quad.
  • The graduate schools wanted their own branding
  • All images were jpg, since older browsers didn't yet support png format.
  • We added user's name to header, in case someone was using a computer and the previous user hadn't logged off.

Sakai 2.8

Sakai

See source at https://source.sakaiproject.org/svn/reference/branches/sakai-2.8.2-release/

The example skins are pretty much the same as they were for 2.6, 2.7.

University of Michigan

Files: um-ctools.zip (contains 2.8 and 2.9) default skin is "ctools"

Notes:

  • Nothing fancy, since these were based on 2.6.
  • Site types flagged in banner and bottom border os site nav color

The mobile portal

Sakai 2.9

Sakai

See examples in Sakai 2.9 and Sakai 10 skin guide

University of Michigan

Official Skin

  • Files: um-ctools.zip (contains defaultskin which is essentially 2.8 - and neoskin 2.9) default skin is "ctools"

Notes:

  • An evolution of the 2.6 skin (familiar)
  • Images kept to a minimum, is all CSS gradients. Paradoxically the text in the banners are an image.
  • Presence control moves to top right
  • User links created by superimposing a cog and a little blue guy icons from the /silk collection
  • Site type is flagged in banner and bottom border of site nav bar. This is a course!
  • Units (colleges, schools) are present in the site logo. Below "School of Nursing" - see /wiki/spaces/ARCHIVE/pages/19428638771 for details on how that works.
  • Sites belonging to larger units (campuses, large professional schools) get their own top right banner (Business School, Medical School).
  • Important: gross i18n violation; in the contextual help link - the "?" has been replaced with the actual word "Help" via CSS generated content.

Fun skin

Our august institution is adopting Google for most services (email, calendaring, etc.). This skin tries to approximate the UM branding of the Google app suite as much a possible. No one blinked an eye when testing it. Success or failure? 

Files: ctools-fun.zip (skin name: ctools-lite)

Notes:

  • The standard Sakai footer has been wrenched from the bottom and stuck to the top and populated with Google like things
  • Presence control has been moved to the top, icon created via superimposing /silk icons, giving the impression there is a crowd waiting to assimilate you.
  • Tabs are a uniform length, if the site title exceeds it it is ellipsed.

The mobile portal

 

Stanford University (expected 2.9 release June 16, 2013)

Notes:

  • Further changes (new logo, font, gateway, etc.) anticipated prior to Fall 2013, this represents our June 16, 2013 release.
  • neo-default portal.css was the base for our skin. We wanted to reduce height of the header to make more room for content, but we simultaneously needed to add the user's identity into the header--just in case someone didn't fully log off and someone else used that computer. Thus 
    • The logout button (and Enter as role) currently hangs off the bottom of the header–that was code changes, plus css edits.
    • We dropped the cartoon person icon that has links to Profile and Tutorial
    • We dropped the logo (CourseWork). The logo is only visible prior to logging in (can set a separate portal.css for gateway)
  • We left-aligned tool names for readability, dropped the icons, and the tool nav minimization. 
  • pda.css has minimal customization, just color change. We will probably hide icons there as well.
  • Graduate school branding is no longer another skin, just images above tool nav.