Sakai



Guide to creating skins for Sakai 2.9

This guide will help you tailor the Sakai 2.9 appearance. It will walk you through the process, listing out the options, pointing out the decisions you will need to make to better fit the needs of your institution.

Although presented as a skinning guide, since what you want to use and how you want to use it is also in the mix, we will be covering a bit of what functionality is involved.

Guide to creating skins for Sakai 2.9 1

Old portal (defaultskin) 1

New portal (neoskin) 1

Neo portal functional choices 2

Skin choices 2

Getting started 2

The mechanics 2

Choosing a skin to start of from 4

Setting up a new skin 4

Some useful tools 4

The basics (about 1-2 hours all told) 5

Logos 5

Palette: portal 6

Palette: mobile portal 9

Palette: tools 10

Getting more involved 11

Adding a mast head 11

Adding a background image 13

Other things of note 16

Time-out alert 16

No javascript alert 16

Jump-to links visible on focus 17

Old portal (defaultskin)

You may have excellent reasons to choose the old portal that will run in 2.9 with no problem. If so, please refer to the guide for 2.8 [[1]]. The good news is that not much has changed in 2.9, so there will be almost nothing to adapt from your 2.8 installation, and only a little from 2.7. The bad news is that little has changed.

New portal (neoskin)

The new portal represents a substantial departure in Sakai. You will not be able to edit your 2.7 or 2.8 skin and produce a 2.9 neo portal skin without going mad. The good news is that the 2.9 neo portal is the simplest, best documented and most skinnable portal yet.

Neo portal functional choices

If upgrading from 2.7 (or want to reexamine the choice you made for 2.8) these are some things that have an impact on appearance.

• Enable the role switcher? For what types of sites? For what roles? What values? [[2]]

• Enable the timeout alert? With what time value? [[3]]

• Enable collapsible side menu? [[4]]

• Categorized “more sites” drawer? or flat?

• Portal chat? Not enabled in 2.9 by default.

Features that may make it into 2.9 or that you may consider merging in.

• Portal tutorial [[5]]

• Direct link and URL shortener

Skin choices

• One skin or several? If several you may consider having a primary theme, and others that are just variations.

• Need to differentiate site types? Do you have courses, projects, tutorial, and/or other site types and need to subtly make them different? [[6]]

• Do you want to make the gateway quite different? [[7]]

• What login will you be using? Login internal to Sakai, some CAS login? Both?

Getting started

Get a UX person with a strong practical design experience to work with! Then sequester yourselves and produce some options that your stakeholders can check out. Do not get committees involved, life is short (and ars longa). Here is a simple guideline: everything is skinnable, but some things are easier than others. We will get to this soon.

The mechanics

If you are primarily a front-end developer download the demo version of 2.9 that you can download, unzip and run with a few clicks. To get the demo version – go to the release page for Sakai 2.9 and download and unpack it.

Start the demo server, this will expand the files we are interested in so that you can work with them.

The skin files are contained in /webapps/library/skin:

Skins for defaultskin rendering engine

1. default (default skin for defaultskin rendering engine)

2. default-horiz

3. examp-u

4. gen-u

5. oae

6. rtl

7. some-u

8. ux

Skins for neoskin rendering engine

1. neo-default (default skin for neoskin rendering engine)

2. neo-default-horiz

3. neo-default29

4. neo-examp-u

5. neo-gen-u

6. neo-oae

7. neo-rtl

8. neo-some-u

9. neo-ux

and an images folder, as well as tool_base.css

Of the skins for the neoskin rendering engine neo-default29 and neo-ux are not supported and are included just for historical reasons. Note: The default and neo-default skins are needed by some functionality (x-login, site info display), do not delete.

Each skin has the following structure.

skin_name (folder)

images (folder containing images used by the skin)

portal.css (styles the portal – will be doing most work here)

pda.css (for the mobile portal)

tool.css (styles the tools, overriding or filling gaps in tool_base.css)

access.css (no need to bother with this) [[8]]

portalchat.css (no need to bother with this) [[9]]

Choosing a skin to start of from

• Browse to your server at , login as admin (pwd: admin).

• Create 7 sites.

• Go to Administration workspace and in the Sites tool given them all different skins.

Available and supported skins are (use text below):

1. neo-default

2. neo-default-horiz

3. neo-examp-u

4. neo-some-u

5. neo-gen-u

6. neo-rtl (if you are working in a right lo left language context)

7. neo-oae

Now you can navigate to the different sites and examine the different skins. Some may be closer to your design than others. Choose the one that seems like the best candidate. Since the portal changes quite a bit depending on whether you are logged in or not you should check it out as a “not logged in” user:

1. go again to the Admin Workspace

2. go to Sites

3. find the !gateway site and click on the link

4. give it the skin you are checking out

5. log out and examine the logged out page with this skin.

Setting up a new skin

For simplicity’s sake, we are going to assume you have selected neo-default as the skin you are going to use as your base.

1. Copy neo-default skin folder, rename. Make sure your new skin folder name has a “neo-“ prefix.

2. Stop the server

3. Edit /sakai/sakai.properties

4. Search for word “skin”

5. Make sure that skin.default=

6. Restart the server – now all sites and any new sites will use your skin (change the !gateway site to it if you did it following instructions above)

Some useful tools

• Firebug: essential [[10]]

• CSS Editor (syntax coloring, auto formatting, syntax completion, something like Aptana [[11]])

• CSS validator [[12]]

• Gradient [[13]], box shadow [[14]] and border-radius [[15]] generator.

The basics (about 1-2 hours all told)

In this option we are going to add a few logos, change the palette. Line numbers and affected CSS of neo-default/portal.css is included.

Logos

The logos in your new skin display at the top right both in the gateway and the logged in portal (below the logo on left, over a gradient for the navigation bar, and at right the current site tab):

[pic]

Create a logo with a transparency (.png recommended). Call it logo.png, put in your_skin/images. The original logo.png is 80 wide, 43 high. The bounding box is 100 x 50. You can tweak both dimensions a little bit as needed. The CSS for this starts in line 132 of neo-default/portal.css for the gateway:

#headerMin #mastLogo {

display: block;

background-image: url(images/logo.png);

background-repeat: no-repeat;

background-position: 8px 4px;

float: left;

width: 100px;

height: 50px;

}

and in line 330 for the logged in user:

#linkNav nav {

list-style: none;

padding: 8px 0 5px 155px; /* matches the width of the toolMenu*/

margin: 0;

width: 100%;

background: transparent url(images/logo.png) 8px 4px no-repeat;

}

Palette: portal

For the palette in general there are a number of places in neo-default/portal.css that you need to touch. A lot of them could have been grouped/refactored, but were left duplicated in the default for clarity. Below only those places that you need to change because they play nicely with the Sakai palette but may not be too complimentary with yours. You can make more changes if you want of course.

Top bar is a gradient defined in lines 98-107:

#headerMax, #headerMin {

background: #009DCE;

background: -moz-linear-gradient(top, #009DCE 0%, #007EA5 100%);

background: -webkit-gradient(linear, left top, left bottom, color-

stop(0%,#009DCE), color-stop(100%,#007EA5));

background: -webkit-linear-gradient(top, #009DCE 0%,#007EA5 100%);

background: -o-linear-gradient(top, #009DCE 0%,#007EA5 100%);

background: -ms-linear-gradient(top, #009DCE 0%,#007EA5 100%);

background: linear-gradient(top, #009DCE 0%,#007EA5 100%);

border-bottom: 1px solid #007194;

}

Use the gradient generator to create a gradient that meets your branding needs. Paste your gradient code in the declaration above.

Important note: realize that this leaves IE 8 with a flat color. If you are ok with that, do check that the flat color (the background: #009DCE above) is appropriate and provides a good contrast. If not (you have a large installed IE 8 base), use background images. The use of IE filters is not recommended.

Current site tab is defined in 357-369.

nav li.nav-selected {

background: #008DB9;

background: -moz-linear-gradient(top, #008DB9 0%, #007194 100%);

background: -webkit-gradient(linear, left top, left bottom, color-

stop(0%,#008DB9), color-stop(100%,#007194));

background: -webkit-linear-gradient(top, #008DB9 0%,#007194 100%);

background: -o-linear-gradient(top, #008DB9 0%,#007194 100%);

background: -ms-linear-gradient(top, #008DB9 0%,#007194 100%);

background: linear-gradient(top, #008DB9 0%,#007194 100%);

border: 1px solid #005A76;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

Aside from the gradient you may want to supply a border that matches it. The same border color can be used for the tab hover rendering beginning in line 350:

nav li.nav-menu:hover, nav li.more-tab:hover {

border: 1px solid #005A76;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

Login form elements also make use of gradients in 196-210:

#loginLink1, #loginLink2, form#loginForm input#submit {

display: block;

border-radius: 5px;

padding: 4px 6px;

text-align: center;

text-decoration: none;

background: #008DB9;

background: -moz-linear-gradient(top, #008DB9 0%, #007194 100%);

background: -webkit-gradient(linear, left top, left bottom, color-

stop(0%,#008DB9), color-stop(100%,#007194));

background: -webkit-linear-gradient(top, #008DB9 0%,#007194 100%);

background: -o-linear-gradient(top, #008DB9 0%,#007194 100%);

background: -ms-linear-gradient(top, #008DB9 0%,#007194 100%);

background: linear-gradient(top, #008DB9 0%,#007194 100%);

border: 1px solid #005A76;

}

and their :hover states in lines 214 & c.

#loginLink1:hover, #loginLink2:hover, form#loginForm input#submit:hover {

background: #007194;

text-decoration: none;

}

Again – replace colors as needed, with a gradient, a flat color, or background images. This controls the login elements, no matter what login configuration you are using.

|[pic] |The tool menu is very neutral color wise. The exceptions here are the hover state and the |

| |“current tool” state |

| | |

| |The first one is a gradient value for the following selector in lines 759-779: |

| | |

| |#toolMenu li a:hover, #subSites li a:hover, #toolMenu li a:focus, #subSites li a:focus { |

| | |

| |The “current tool” is just a color value for the selector in lines 731-734 |

| | |

| |#toolMenu li.selectedTool a { |

Note: the toolbar can also be minimized, the “current tool” rendering is at lines 1546 & c with the selector

.sakaiMinimizePageNavigation #toolMenu li.selectedTool a, .sakaiMinimizePageNavigation #toolMenu li a:hover, .sakaiMinimizePageNavigation #subSites li a:hover,.sakaiMinimizePageNavigation #toolMenu li a:focus, .sakaiMinimizePageNavigation #subSites li a:focus {

background: #9cd1e8;

You will also need to touch the buttons on the “more sites” tray. To see this you will need to create at least 10 sites. Easiest way to do this is to go to one of your sites and Site info > Duplicate and then visit the “More sites” tray.

The button rendering is defined in lines 565-585 of this selector:

ul#otherSiteList li, ul.otherSitesCategorList li {

The hover state of the “Other sites” menu (that contains buttons to create a new site, view all sites, etc) is a Sakai blue that you can change in lines 540-542 for this selector:

#otherSitesMenu li a:hover, #siteStatus a:hover, #siteStatus a:focus {

You will want to change the site status box and children, available in lines 822-843. For the following selectors:

#siteStatus {

#siteStatus a {

They affect color of text and color of link in the capture below:

|[pic] |The “Unpublished Site” text and the “(Publish Now)” link appear on unpublished sites. To |

| |display, go to a site, then Site info > Manage Access and change to leave as draft. |

| | |

| |Notice the minimize control on the left, also a nice Sakai blue. The easiest thing to do |

| |would be to open it in Photoshop and grey-scale it. |

Also – if you look at the above image you will see the double arrow reload icon. That and the help icon that are displayed in the tool title bar are images that live at skin_name/images (reload.gif and help.gif, as well as their hover state analogues reload_h.gif and help_h.gif). Substitute with any other image (gif or png) as long as you stay with the same dimensions if the Sakai blue does not agree. If you take a look at the neo-some-u skin you will see that they have been greyscaled.

Finally, there is the tool title. In the default skin there is a thin Sakai blue line at the bottom.

[pic]

that you can change to suit in lines 51-62:

#col1of2 .portletTitleWrap, #col2of2 .portletTitleWrap {

#col1of2 .portletMainWrap, #col2of2 .portletMainWrap {

#col1 .portletTitleWrap {

And that is it for the portal!

Palette: mobile portal

Sakai has a simple mobile portal you can see if you go to:



The palette there is fairly simple. Let’s take a look. All line and selector references are to neo-default/pda.css

|[pic] |The only three areas of concern are: |

| | |

| |the top bar gradient blocked in yellow at right (lines 39 &c, |

| |259 & c) |

| | |

| |#pda-portlet-menu { |

| | |

| |The regular buttons (blocked in red), lines 90 &c, |

| | |

| |#pda-portlet-menu li.loginLink,#pda-portlet-menu li.logoutLink, |

| |#switch-link-w,.helpLink { |

| |background: rgb(0,157,206); |

| | |

| |The footer (scroll down to bottom to see), lines 230 &c and 355 |

| |&c. |

| | |

| |#pda-footer { |

| | |

| |The only tricky one is the back button blocked in purple at |

| |right. What I did was screenshot a regular button, Photoshop |

| |liquefy the left edge to make it pointy, slice the resultant |

| |image in three, making them backgrounds to the , the |

| |and the that altogether make up the button. Take a look at |

| |the CSS in lines 68-89. Pretty horrible! |

Palette: tools

The default palette for the tools has been kept fairly neutral as well, but there are some things you may want to touch. The following references neo-default/tool.css

Standard links (lines17-30).

A-historical links (lines 42-49):

.specialLink a:link, .specialLink a:visited {

.specialLink a:hover {

Item links (76-90 – create an announcement and see the list):

.itemAction a, .itemAction a:link {

Tool toolbar links

.navIntraTool a, .navIntraTool a:link { (lines 109-119)

and

.navIntraTool a:link:hover, #actionToolbar a:link:hover {(lines 702-704)

Finally – there are some background colors that may not marry well to your institutional palette:

Table row treatments:

[pic]

The light blue for a selected row is at lines 396-398:

tr.selectedSelected {

background: #eff

}

the darker blue hover is at lines 334-336:

table.lines tr:hover {

background-color: #DEEEFF

}

Finally, button types of things have the Sakai color as well in the labels. To changes this edit the declaration of this selector at line 1155:

input[type="submit"], input[type="button"] {

. . . . . . .

color: #2683BC !important;

And that is it! It will be a good idea to spend a few hours poking around to see if these few changes meet your needs, and where you see something you feel must be changed, locate where in the CSS it needs to change with Firebug help. Keep in mind that you have 3 areas with 3 sheets: portal (portal.css), tool (tool.css) and mobile (pda.css)

Getting more involved

Adding a mast head

If your design needs a masthead you can add it.

[pic]

There are many different canvases that can carry this. If we take a look at the above example (neo-some-u/portal.css) you can see that the Rosie the Riveter image and the text comes from lines 138-146.

#mastBanner {

background: url("images/logo_back.png") no-repeat scroll 0 0 transparent;

float: left;

height: 95px;

width: 390px;

}

#mastBanner img {

display: none;

}

In the default skin #mastBanner is hidden. Here it is displayed, given a height and a width and a background image referenced.

The parent container #mastHead (lines 117-122) sets up the background color and provides a height (the children are all floated, so an explicit height is needed for the parent container):

#mastHead {

clear: both;

display: block;

background: none repeat scroll 0 0 #F4BC2D;

height: 95px;

}

[pic]

In this horrid example from neo-default-horiz/portal.css we are using two canvases that were hidden in the default skin; here is a screenshot from Firebug displaying the structure:

[pic]

#mastLogo produces the Cthulhu head:

#headerMax #mastLogo {

display: block;

background: transparent url(images/logo.png) 4px 0px no-repeat;

position:absolute;

top:10px;

left:20px;

width: 100px;

height: 100px;

}

Note the absolute positioning that allows the unearthly tentacles to drape over the navigation bar menacingly.

#mastBanner produces the mythic university text:

#mastBanner {

width: 450px;

height: 100px;

float: left;

margin-left: 0px;

background-image: url(images/banner.png);

background-repeat: no-repeat;

background-position: 0 15px;

}

Both neo-default-horiz and neo-some-u skins have different mast-head treatments depending on whether the user is logged in or not. This is achieved by contextualizing #mastHead and it’s children – are they contained in not logged in (#headerMin) or logged in (#headerMax) headers? This allows you to alter the graphics, dimensions, anything depending on the logged in state.

Adding a background image

You can add a background image to the portal. Take a look at neo-examp-u and neo-oae below. In the first the image is a large slab, in the second it is a thin strip that gets repeated horizontaly.

[pic]

[pic]

In both cases the image is the background of the body (lines 3 &c of neo-oae/portal.css):

body.portalBody {

width: 100%;

padding: 0;

font-family: 'Helvetica Neue', Arial, sans-serif;

font-size: .8em;

margin: 0;

background-color: #093b52;

background-image: url(images/page_bg_water.jpg);

background-repeat:repeat-x;

}

and then setting margins on the #container (lines 25 & c of neo-oae/portal.css):

#container {

background: #fff;

margin: 0 100px;

-webkit-box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.25);

-moz-box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.25);

box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.25);

border:1px solid #ccc;

-moz-border-radius: 0 0 10px 10px;

-webkit-border-radius: 0 0 10px 10px;

-khtml-border-radius: 0 0 10px 10px;

border-radius: 0 0 10px 10px;

}

The base Sakai portal layout is fluid. So given the prevalent screen size plus the fact that users can minimize the tool you can probably use pretty wide margins – but keep an eye on some tools that need a bit of width (chat and resources come to mind).

Finally – everything in the portal and most everything in the tool is addressable. Use Firebug to see what defines what and then change it. As an example of an extreme makeover take a look at the neo-rtl skin. Go to the admin workspace, choose Sites and add that skin to a site so that you can check it out. In any case, here is a screenshot. The colors/images re the same, but everything has been moved around.

[pic]

Other things of note

Some features may be enabled but you will not be able to see them. The default rendering for these features is pretty neutral, but in case you want to take a look and maybe change here they are listed.

Time-out alert

This gets displayed to users who are about to loose their session. It looks like this alarming thing:

[pic]

And you can change it in lines 1568 &c on this selector in neo-default/portal.css:

#timeout_alert_body {

No javascript alert

This is a message that gets displayed to users that do not have Javascript enabled. It gets displayed at the bottom of the viewport so that it is visible always but does not cover anything else.

[pic]

To change it (this is on neo-default/portal.css) it is in lines 1644-1659 on the selector:

#portal_js_warn {

Jump-to links visible on focus

Sakai has always had jump-to links that allow a user to hop to specific parts of the portal via acceskeys. In order to help users who are not visually impaired and use the keyboard as the primary navigation device these are now visible when the user tabs into them.[[16]]

In the neo-default skin these display over the logo:

[pic]

The links are defined in lines 1459 & c. on this selector in neo-default/portal.css:

#skipNav a.internalSkip:focus, #skipNav a.internalSkip:active {

Presence Window and icon

If your installation is going to use presence (displays who is in a site), you might want to touch that as well – the icon/control that toggles the window is pretty hidden in neo-default skin at bottom right. With absolute and fixed positioning you can move them anywhere in the portal where they will not cover anything else up.

That is about it. More could be said – but hopefully this will get you started. If you have any questions please post to sakai-dev@collab.. If you discover any bugs or have suggestions, create a Jira with reference (and/or portal) as the components.

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

[1]) Skin doc for 2.8:



[2])

[3])

[4])

[5])

[6])

[7]) The gateway is just a site. You can create a skin for just the gateway if needed.

[8]) Styles the access view of resources

[9]) Styles the portal chat

[10])

[11])

[12])

[13])

[14])

[15])

[16]) This screencast illustrates how this works with the neo-some-u skin:



................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download