...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Guide to creating skins for Sakai 2.9 and Sakai 10
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.
...
The site 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 the View all Sites, Add New Site) 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:
...
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!
...
 | The only three areas of concern are:
The footer (scroll down to bottom to see) looks like the header in
2. The regular buttons (blocked in red), lines 90 &c,
3. 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<li>, the<span>and the<a>that altogether make up the button. Take a look at the CSS in lines 68-89. Pretty horrible! Important note: the pda.css serves two types of clients, small mobile webkit, and everything else. The experience of an iPhone or an Android default browser will be quite different than the one of an iPad or a regular browser. Taking care of the three items above will do the job - but do test with
|
...
A-historical links (lines 42-49) - these are links that have an href="#" so click one and all look visited. For ever. So we male a:link and a:visited the same color:
.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)
You might want to change the color of links that appear in table headers as well. In neo-default they are black (see below). If so, the relevant CSS is here:
...
Finally, button types of things have the Sakai color as well in the labels. To change 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)
...
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 fixed at the bottom of the viewport so that it is visible always but does not cover anything else.
...
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
...
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.
...