More on Sakai 3 skins

In this post we customize the default look of a Sakai 3 installation (gateway and as many logged-in-user subsequent screens as we can identify) and create a few modest skins that users can pick for their sites. The aim of of this is to puzzle out the best process, figure what the stumbling blocks are, and identify the gaps if any.

I will try to post next about conclusions, in a less discursive manner.

The gateway

I have touched on this previously in a non-serious vein.

Institutions with many resources can and should tailor the gateway to suit. It does not need to have the present markup and functionality structure. The possibilities are limitless, more so than in Sakai 2. On the other hand, in Sakai 2 there is a set of known configurations that an adopter can easily set to produce a gateway that is perfectly acceptable:

  • Login (internal, CAS, primary and secondary)
  • Appearance (the gateway can have it’s own skin, be defined in the default skin, or inherit from the defult skin)
  • Institutional messages are possible
  • Institutional links in footer are configurable
  • Etc.

In Sakai 3 the process of customizing the gateway seems more open ended. The exercise below covers the case of an institution that does not have many resources to change the gateway framework, and can affect just the look.

dev/index.html

I added a .masthead wrapper to .header-title and .header-byline. The design I received required it as I explain below. An aside: in Sakai 2 modifying the structure of the portal in this manner would have been harder.

<div class="masthead fl-centered">
    <!-- HEADER -->
<div class="header-title">
       <img src="_images/sakai_logo_index.png" alt="__MSG__INSTANCE_NAME__" />
    </div>
<div class="header-byline">
        __MSG__HEADER_BYLINE__
    </div>
</div>

This will allow us to have superimposed background images – one in .masthead and the other one in .header-title, see below.

dev/_css/sakai.index.css

Change the background:

html {
    background: #093b52 url(../../_images/umich_bg.gif) top left repeat;
}

Style the added wrapper, it gets a repeating background to match the UM logo background:

.masthead {
   height:100%;
   overflow:hidden;
   width:100%;
   margin-bottom:3px;
   background: url(../../_images/umich_banner_bg.png) top left repeat;
}

Style .header-title – giving it a background to display the sanctioned University of Michigan logo

.header-title{
  color: #08415E;
  font-size: 4.0em;
  float: left;
  margin: 0;
  padding: 0;
  background: #fff url(../../_images/umich_banner.png) top left no-repeat;<
  width:500px;
  height:79px
}

Hide the original Sakai logo

.header-title img{
   display:none
}

Hide the byline

.header-byline{
   display:none
}

Hide the Sakai logo in the footer

#footer_logo {
  display:none
}

Style the links in the footer

.sakai-footer .fixed-container a {
    color:#fff !important;
    text-decoration:underline;
}

Note !important, more on that later.

Here is the result so far. Not very exciting, I know – but the major requirements (family resemblance to institutional gateway, adherence to the institutional web style guides) are on their way to be met.

Other things that are in this screen that properly fall within a “branding” scope are the preview image, the link colors, the button colors.

Reminder: the gateway framework is not an immutable given – am just treating it as such.

Other pages

After you log in other rendering mechanisms come into play: new pages call different stylesheets, etc. Carrying out the stuff below takes care of mysakai.html and with some exceptions that will be noted and dealt with, all of the “my” pages (Inbox, Contacts, Profile, Inbox). Yay!

dev/_css/sakai.base.css

Added

.header{
   background: transparent url("../../../dev/_images/umich-transparent.png") left top repeat-x;
}

umich-transparent.png is transparent bottom 1/3rd, top 2/3ds the color of the tab at top:

<div class="personal-container fl-force-right">
    <div class="personal">
        <ul>

containing links to the hidden institutional login, user name and menu, the mail icon, help and sign out links.

This gives us a nice top area that ties in the tab mentioned above, the search area and then transitions into the main content area, pretty much following the original.

What if the needs of the institution dictate this gray area needs to reflect the school palette? For example – if instead of #86898B it needs to be #3A5E8C (following the UM identity guidelines at http://www.logos.umich.edu/web.html)

Things get complicated:

dev/_css/sakai.base.css

Edit the image referenced here so that the top 2/3 matches the new color (#3A5E8C)

.header{
    background: transparent url("../../../dev/_images/umich-transparent.png") left top repeat-x;
}

devwidgets/navigationchat/css/navigation.chat.css

Change the background color of #navigationchatcontainer from #86898B to #3A5E8C:

#navigationchatcontainer{background: #3A5E8C}

That was the easy part. The “personal” tab also needs to match that color.

Still on devwidgets/navigationchat/css/navigation.chat.css

The tab is composed of 2 sliding door images and a background color.

.explore_nav .personal-container {
    margin-top: 10px;
    background: url('../../../dev/_images/topBar_tr.png') top right no-repeat;
    padding-right: 5px;
    overflow: hidden;
}
.explore_nav .personal {
    padding: 4px 0 0 5px;
    margin: 0;
    background: url('../../../dev/_images/topBar_tl.png') top left no-repeat;
    min-height: 30px;
}

Change to

.explore_nav .personal-container {
    margin-top: 10px;
    background: url('../../../dev/_images/umich_topBar_tr.png') top right no-repeat;
    padding-right: 5px;
    overflow: hidden;
}
.explore_nav .personal {
    padding: 4px 0 0 5px;
    margin: 0;
    background: url('../../../dev/_images/umich_topBar_tl.png') top left no-repeat;
    min-height: 30px;
}

With this new background color the link separators need to be made lighter, change the border-left from #666a6d to #aaa

.explore_nav .personal li a {
    font-size: 9pt;
    padding:0 5px 0 7px;
    border-left: 1px solid #aaa;
    color: #fff;
}

And here is the University of Michigan “My Sakai” page.

One thing that remains to be done is adjusting the separators between the links in the “explore” link set at the top. Since the separators are not the same color as the background they bleed into the blue (see below). An easy fix is to give the border-left not to the LI but instead to the child A.

From

.explore_nav ul.explore li {
    padding: 0;
    padding-bottom: 6px;
    border-left: 1px solid #878a8c;
}
.explore_nav .explore li#nav_my_sakai_link { border-left: none; }
.explore_nav .explore li a {
    height:16px;
    color:#fff;
    padding: 8px 20px;
    text-align: center;
    display: block;
    float: left;
    font-weight: bold;
}

To

.explore_nav ul.explore li {
    padding: 0;
    padding-bottom: 6px;
}
.explore_nav .explore li#nav_my_sakai_link a { border-left: none; }
.explore_nav .explore li a {
    height:16px;
    color:#fff;
    padding: 8px 20px;
    text-align: center;
    display: block;
    float: left;
    font-weight: bold;
    border-left: 1px solid #878a8c;
}

Finally – the top rounded corners of the main content area are still expecting a #86898B background. These corners are created by background images referenced in

dev/_css/sakai.core.2.css

.header .fixed-container {
    background: #fff url('../../_images/header_l.png') top left no-repeat;
}
.header .fixed-container .decor {
    background: url('../../_images/header_r.png') top right no-repeat;
    height: 5px; margin-right: -20px;
}

Change to:

.header .fixed-container {
    background: #fff url('../../_images/umich_header_l.png') top left no-repeat;
}
.header .fixed-container .decor {
    background: url('../../_images/umich_header_r.png') top right no-repeat;
    height: 5px; margin-right: -20px;
}

duplicate and edit the 2 images to reflect the new background.

And that is enough for now. One could argue that with the new background the “Search” button needs to be a different color for contrast. We would need to nip over to:

dev/_css/sakai.base.css

and do some heavy styling to get just this button (and any other search button that shows in same background) to show new background color in all it’s states. I have not explored this but it would be a requirement and am sure it is perfectly feasible.

One final wrinkle. If I navigate somewhere else (try to search something, for example) the bottom background of the “search” area will disappear and the corners we fixed previously are misbehaving again.

We need to go over to:

dev/_css/sakai.search_b.css

and adjust the following selectors:

.content_search { padding: 12px 0 0 0; }
.search-container .content_search .fixed-container {
    background: #fff url('../../_images/header_l.png') top left no-repeat;
}
.search-container .content_search .fixed-container .decor {
    background: url('../../_images/header_r.png') top right no-repeat;
    height: 5px;
    margin-right: -20px;
}

to

.content_search {
    padding: 12px 0 0 0;
    background: transparent url("../../../dev/_images/umich-transparent.png") left top repeat-x;
}
.content_search a {
    color: #006E96;
}
.search-container .content_search .fixed-container {
    background: #fff url('../../_images/umich_header_l.png') top left no-repeat;
}
.search-container .content_search .fixed-container .decor {
    background: url('../../_images/umich_header_r.png') top right no-repeat;
    height: 5px;
    margin-right: -20px;
}

Much better:

Finally – the footer, that we addressed in the gateway, needs to be addressed again for screens where the user is logged in:

devwidgets/footer/css/footer.css

Hide the Sakai logo and style the links in a more neutral manner:

.sakai-footer img{display:none}
.sakai-footer .fixed-container a {
    color: #fff;
    text-decoration:underline;
}

Specific site/page looks

When creating a site we have the choice to change the appearance. The appearance files are contained in the dev/_skins directory.

Edit dev/_configuration/config.js to include the info on what site appearances are possible. In our case we need skins for the School of Business, The School of Medicine and Literature, Science and the Arts.

Site: {
  Styles: {
    bus: {
      name: "Ross School of Business",
      image: "/dev/_skins/bus/images/thumb.png",
      URL: "/dev/_skins/bus/bus.html"
    },
    lsa: {
      name: "LS&amp;A",
      image: "/dev/_skins/lsa/images/thumb.png",
      URL: "/dev/_skins/lsa/lsa.html"
    },
    med: {
      name: "School of Medicine",
      image: "/dev/_skins/med/images/thumb.png",
      URL: "/dev/_skins/med/med.html"
    }
 }
},

Then create the first one, in this case the school of Business. I just copied the “original” skin and modified all the paths, file names and references, radically simplifying it. Here is the new structure.

Our requirements are modest – let’s say a logo on the page is good enough for unit identification. In order to add a logo to just the page (site, space, etc) I had to touch the following files:

bus.html – has the structure of the page in it. Only addition to the “original” model was the addition at the bottom of it:

<link rel="stylesheet" type="text/css"
    href="/dev/_skins/bus/css/page.css"
/>

It loads the page/site/skin specific skin late in the cascade. More on this matter later.

page.css – the content of this sheet is modest as well – since all we want to do is add a logo:

#sitetitle{
    background: url("../images/logo.png") no-repeat scroll right top transparent;
    padding: 10px 310px 0px 10px;
    min-height: 50px;
    text-align:left;
    vertical-align:middle;
}

The 2 images in the images folder are the logo.png that this site will be graced with and a thumbnail thumb.png that will be used as a link so that this theme can be picked by the user. Another image in the root folder is prev.png. This is an image sized to 520 × 366 approximately that will show when a user picks this theme in the theme picking panel. I used a screen shot of the finished page for that, then re sized it.

After I was satisfied with the modest page/site/space skin, I duplicated the bus folder a few times, named the other 2 to match the paths I specified in dev/_configuration/config.js, and then edited the *.html files to point to the corresponding *.css, changed the images, and done.

Here is the theme picking panel showing the thumbnails and previews:

And here are cropped parts of the three themes. Click on the images to see a full sized version.

More soon on what all of this means.

Advertisements

One Response to More on Sakai 3 skins

  1. Edilberto says:

    Hi Gonzalo,
    I’m from Colombia and I need your help with Sakai OAE…
    when I install nakamura I do not show anything in http://server/dev/index.html….

    Un abrazo desde Colombia

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: