Skinning the Sakai 3 gateway

I took a long look at the Sakai 3 skinning architecture before the Denver conference and came to a set of conclusions. The most important conclusion was that this was not the time for conclusions, as the target was moving too fast.

Maybe now is the time to explore. As an experiment I pretended to be someone charged to change the gateway (and only the gateway). An effort was made to not even “think” about what would be the ideal process – but just to get the job done.

The results can be sen here and if that poor old tired seven year old Dell is down, in this screenshot

For the curious, the process is detailed below. The good news is that it took a about an hour (it shows!) and it would have taken less time if I actually knew how to use Photoshop and Illustrator. The bad news is that on reflection the path I took (out of ignorance or because it was the only path) was not optimal. More on this later.

dev/_css/sakai/sakai.index.css

Change watery background image to city scape

html {
  background: #093b52 url(../../_images/cityscape.jpg) top left repeat-x;
}

Hide header byline

.header-byline {
  display:none
}

Hide Sakai logo

.header-title img {
  display:none
}

Display an alternate banner via .header-title (adjusting width, height, padding and margins)

.header-title {
  color: #08415E;
  width:650px;
  font-size: 4.0em;
  float: left;
  margin: 25px 35px 25px 0;
  padding: 40px 0;
  background:url(../../_images/header-title-back.png) top left no-repeat
}

The “Register here” link is defined in this sheet as well, instead of in a global/core sheet

#register_here a {
  color: #000000;
  text-decoration: underline;
  font-weight: bold;
}

dev/index.html

The thumbnail is hardwired in the markup.

<img src="_images/panel_thumb.jpg" alt="__MSG__INSTANCE_NAME__" />

So either change the source, overwrite the image with a new one, or hide it and add a background to the container (.preview-box). Chose to change in the markup

<img src="_images/cityscape_panel_thumb.jpg" alt="__MSG__INSTANCE_NAME__" />

I also found I needed an additional canvas. For a zombie, sure, but it could have been a panel representing the institutional image of self, so added as a direct child of the body:

<div id="zombie"></div>

dev/_css/sakai/sakai.base.css

The background for all pages (other than index.html) is here

html {
  background: #75ADD7 url('../../_images/cityscape.jpg') top left repeat-x;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 120%;
}

“Sign in” button of the gateway: like all buttons – depends on a sprite (retrieved from a common non-skinned context) applied and positioned in an outer and inner elements, changing the sprite may need a change of color of text.  The sprite is here:

dev/_images/button-sprite-5state.png

Changing the colors in the sprite might also entail changing the text color for the caption in the .s3d-button selector.

I left the buttons alone in this experiment.

footer files

Note: background of footer is a composite of inline CSS set in 1) devwidgets/footer/javascript/footer.js; 2) image background set in devwidgets/footer/css/footer.css and 3) background color in devwidgets/footer/css/footer.css

I left the footer alone in this experiment, except for the logo and links:

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

One Response to Skinning the Sakai 3 gateway

  1. […] I have touched on this previously in a non-serious vein. […]

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 )

Connecting to %s

%d bloggers like this: