(En proceso de traducción)

Guía para crear skins para Sakai 2.9 y Sakai 10

Esta guía le ayudará a modificar la apariencia de Sakai 2.9 y Sakai 10. Le guiará por el proceso, ayudándole en las decisiones que usted tendrá que hacer para ajusrtarse a las necesidades de su institución.

En lugar de una guía separada para Sakai 10 - se añadirá un anexo para esa versión.

Sakai 10 Anexo

Incorpore los cambios que aparecen abajo en tu skin. Otra alternativa es proceder como aparece abajo para 2.9 pero compiando el skin neo-default de Sakai 10 y editándolo. Esta es una opción preferible si el skin de 2.9 no es muy diferente del default de 2.9.

Note: Si actualiza desde 2.8 o 2.7 a 10, use solamente la guía del 2.9. No hace falta mirar este anexo.

Sprites

El mayor cambio ha sido el que las definiciones de los menús de las herramientas usan sprites. Para hacer esto, el código del portal tuvo que ser cambiado. Mírelo en este JIRA:

Lo más sencillo es aplicar los diffs en /reference a tu skin o quizá aplicarlos manualmente. Es bastante trabajo pero está bien definido. No hacer esto puede suponer que se visualicen unos menús bastante extraños.

Otas cosas menores...

Algunas de ellas ya estaban en la rama  2.9.x por lo que a lo mejor ya las tienes solucionadas. De nuevo miremos a subversion para ver lo que se ha cambiado.

 - evitar sobreposición en la ventana de presencia en IE8

  - mejorar la visualización del panel de  "más sitios" para los usuarios no registrados

 -  actualización de estilos para evitar que el texto cambie de fila en el selector de ficheros

 - mejor login para dispositivos con pantallas pequeñas

 - varios cambios en la herramienta de tutorial

 - pequeño cambio para que reordenar sea más cómodo para los usuarios que sólo usan teclado

 - cambios en el panel de enlaces directos

 - Para evitar cortes o barras de scroll, meter las imágenes en contenedores

Finalmente, el skin por defecto de Sakai 10 skin es un skin plano sin gradientes. Aquí están los cambios realizados:

 

 

Sakai 2.9.2 Anexo

Un wrapper para una columna se añadió para 2.9.2.

<div id="innercontent">

El css correspondiente debe ser añadido a portal.css de tu institución. En neo-default es:
/* second wrapper for content - needed by SAK-12563 */
#innercontent {
    float: left;
    width:100%
}
Sakai 2.9.1 Anexo

(Por escribir)

El viejo portal  (defaultskin)

Puedes tener excelentes razones para elegir el viejo portal que correrá en 2.9 sin problema. En ese caso hay que ir a la guí para 2.8[1]. La buena noticia es que no hay muchos cambios en 2.9 para el  defaultskin, por lo que no hay prácticamente nada que hacer para adaptarte desde tu instalación de 2.8 o 2.7... la mala noticia es que no hay muchos cambios... (wink)

El nuevo portal (neoskin)

El nuevo portal representa un cambio importante en Sakai. No podrás editar tu skin 2.7 o 2.8 para producir un skin 2.9 o 10, sin volverte loco. Lo bueno es que el nuevo skin es más sencillo,  tienen una mejor documentación y permite más modificaciones en el portal.

Neo portal: elecciones funcionales

Si actualizamos de 2.7 (o queremos reexaminar las opciones que se hicieron para 2.8) hay algunas cosas que tienen impacto en la apariencia. 

Funcionalidades que deberías considerar para 2.9.

Elecciones del Skin

Comenzando

Consigue una persona con fuertes conocimientos prácticos de diseño de interfaces para trabajar en esto! Entonces, secuestraros a vosotros mismos y producir varias opciones que los decisores puedan evaluar. No creeis comités... la vida es corta (y ars longa). Aquí hay un consejo simple: Todo se puede modificar en el skin, pero hay cosas más sencillas que otras. Volveremos a esto pronto.

La mecánica

(Por aquí va la traducción...  siéntete líbre de adelantarla un poco más si quieres... (wink))

Si eres principalmente un diseñador de interfaces puedes descargar la demo de Sakai 2.9 o Sakai 10 descomprimirla y ejecutarla con unos pocos clics. Para ello puede ir a la página de la versión de Sakai que quieras y allí encontrarás el fichero para descargar.

Arranca el servidor de demo, lo que expandirá los ficheros en los que estamos interesados para que puedas trabajar con ellos.

Los skins están contenidos en<server folder>/webapps/library/skin:

Skins para el motor de renderizado defaultskin

  1. default (skin por defecto para el motor de renderizado defaultskin)
  2. default-horiz
  3. examp-u
  4. gen-u
  5. oae
  6. rtl
  7. some-u
  8. ux

Skins para el motor de renderizado neoskin 

  1. neo-default (skin por defecto para el motor de renderizado neoskin)
  2. neo-default-horiz
  3. neo-default29 (antiguo)
  4. neo-examp-u
  5. neo-gen-u
  6. neo-oae
  7. neo-rtl
  8. neo-some-u
  9. neo-ux (antiguo)

y una carpeta de imágenes así como el tool_base.css

De los skins que aparecen en la carpeta,neo-default29yneo-uxno están soportados,  y se incluyen simplemente por razones históricas. Nota: Los skin  default y neo-default se requieren para que ciertas cosas funcionen correctamente (x-login, site info display), por lo que no se deben borrar

Cada skin tiene la siguiente estructura.

 skin_name

images (carpeta que contiene las imágenes usadas por el skin)
portal.css (estilos del portal – la mayoría de las cosas se hacen aquí)
pda.css (para el portal móvil)
tool.css (estilos de las herramientas, sobreescribe y rellena los huecos de tool_base.css)
access.css (no hay necesidad de meterse con esto) [8]
portalchat.css (no hay necesidad de meterse con esto) [9]

Seleccione un skin como punto de partida
 

Los skins disponibles y  actualizados son (usa el texto de abajo):

Aquí hay algunos screenshots:

 

neo-default

neo-default-horiz

neo-examp-u


neo-gen-u (embarrasing!)


neo-oae


neo-some-u


neo-rtl


 

 

Ahora puedes navegar por los sitios diferentes y examinar los diferentes skins. Algunos pueden estar más cercanos a tu diseño deseado que otros. Selecciona aquel que parezca el mejor candidato. Como el portal cambia un poco dependiendo de si estás o no registrado, necesitas ver cómo queda el skin cuando no estás dentro de Sakai.:

  1. ve de nuevo a Admin Workspace
  2. ve a Sites
  3. encuentra el sitio!gatewayy haz clock en él enlace
  4. dale a ese sitio el skin que te ha gustado
  5. sal de Sakai y examina la página de entrada con este skin.       
Configurando un nuevo skin

Para simplificar supondremos que has seleccionado neo-default como el skin base de tu nuevo skin.

  1. Copia la carpetaneo-defaulty renómbrala con el nombre deseado para tu skin. Recuerda añadir el prefijo "neo-".
  2. Para el servidor
  3. Edita<your_server_location>/sakai/sakai.properties
  4. Busca la palabra “skin”
  5. Modificaskin.default=<tu_nuevo_skin sin el prefijo "neo-">
  6. Reinicia el servidor – ahora todos los sitios usarán tu skin (expectp aquellos que hayas asignado a mano, por eso, cambia el skin de!gatewayde nuevo con las instrucciones anteriores)
Algunas herramientas útiles
 

Lo básico (sobre 1-2 horas en total, de verdad)

Vamos a añadir unos cuantos logos, cambiar la paleta. Los números de línea y CSS afectados de  neo-default/portal.css están incluidos. El selector también se incluye de modo que usted puede buscar en ella.

Logos

Los logos en tu nuevo skin, se muestran en la esquina superior izquierda en el gateway y cuando estás registrado en el portal:

Crea un logo con transparencia (recomendado png). Llámalo logo.png, ponlo enyour_skin/images.El logo original es de 80 pixels de ancho y 43 de alto. La caja de alrededor es de 100 x 50. puedes modificar eso un poco si lo necesitas. Los CSS para esto comienzan en la línea 132 de neo-default/portal.csspara el 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;
}

y en la línea 330 para los usuarios registrados:

#linkNav ul.topnav {
    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;
}
Paleta: portal

Para la paleta de colores, hay varios lugares en neo-default/portal.cssque tendrás que tocar. Muchos de ellos podrían haberse agrupado, pero se mantuvieron duplicados en el skin por defecto por claridad. Abajo aparecen solo los lugares que tienes que cambiar porque ellos tocan la paleta de Sakai, que podría no ser complementaria con la tuya. Puedes hacer más cambios si lo deseas, desde luego.

Gradiente definido para la barra superior: líneas 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;
}

Usa el generador de gradientes  [13] para crear el gradiente que cuadre más con tus necesidades. Pega arriba el código de la declaración del gradiente.

Nota importante:
Esto deja IE8 en un color plano. Si estás de acuerdo con eso, puedes modificar el color plano en el "background: #009DCE" que ves arriba. Debe ser apropriado y proporcionar un buen contraste. Si no, porque quieres que en IE también se vea bien, tendrás que usar una imagen de fondo. El uso de filtros en IE no se recomienda. Es posible que las últimas versiones de IE acepten ya estos gradientes.

La pestaña del sitio actual (el botón "Administrative" en el pantallazo anterior) se define en 357-369.

ul.topnav 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;
}

Además del gradiente, puedes necesitar añadir un borde que lo contenga. El mismo color de borde puede ser usado para el efecto "hover" (pasar el ratón por encima). Ver línea 350:

 ul.topnav li.nav-menu:hover, ul.topnav li.more-tab:hover {
    border: 1px solid #005A76;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

 

Los elementos del formulario de login también usan gradientes en 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;
}

y sus estados :hover en las líneas 214 & c.

#loginLink1:hover, #loginLink2:hover, form#loginForm input#submit:hover {
    background: #007194;
    text-decoration: none;
}

De nuevo, modifica los colores como necesitas, con gradientes, colores lisos o imágenes de fondo. Esto controla los elementos del login, no importa el tipo de configuración de login que uses..

El menú de herramientas debería ser de un color muy neutral. Las excepciones son el estado "hover" y el estado “herramienta actual”

El primero es el valor del gradiente en las siguientes líneas 759-779:

#toolMenu li a:hover, #subSites li a:hover, #toolMenu li a:focus, #subSites li a:focus {...}

La herramienta actual  en la líneas 731-734

#toolMenu li.selectedTool a {}

 

 

Nota: el menú puede minimizarse, por lo que habrá que comprobar el color de la "herramienta actual" en las líneas 1546 & c

.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;
    /*.....*/
}

También se pueden tocar los botones de la bandeja de "mas sitios". Para ver esto deberás crear al menos 0 sitios. La mejor forma de hacer esto es ir a uno de tus sitios y enSite info > Duplicateduplicar el sitio varias veces hasta que aparezca la pestaña de "Mas Sitios":

El estilo de los botones están en las líneas 565-585:

ul#otherSiteList li, ul.otherSitesCategorList li {

El estado hover de menú “Other sites” (que contienen View all Sites, Add New Site) es un azul Sakai que puedes cambiar en las lineas 540-542 :

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

Querrás cambiar la caja de estado del sitio en las líneas 822-843.

#siteStatus {

#siteStatus a {

Esto afecta al color del texto y del enlace en la captura de abajo:

El texto “Unpublished Site” y el enlace “(Publish Now)” aparecen en los sitios no publicados. Para ello, vaya al sitio, entoncesSite info > Manage Accessy cambia el estado para que esté como Borrador (draft).

El control de minimizar el menú es también Azul Sakai. Lo más sencillo es abrirlo en fotoshop y hacerlo gris.

También, si miras en la imagen verás la doble flecha del icono de recargar. Este, y el icono de ayuda, aparecen en la barra del título de la herramienta y son imágenes que puedes modificar en el directorio skin_name/images (reload.gif y help.gif, y sus análogas para el estado de hover reload_h.gif y help_h.gif). Sustituyelas por cualquier otra imagen (gif o png) mientras tenga las mismas dimensiones si no te gusta el color actual. En algunos de los otros skins están en color gris.

Finalmente, está el título de la herramienta. En el skin por defecto tienen una línea azul en el fondo.

se puede cambiar en estas líneas    51-62:

#col1of2 .portletTitleWrap, #col2of2 .portletTitleWrap {

#col1of2 .portletMainWrap, #col2of2 .portletMainWrap {

#col1 .portletTitleWrap {

Y esto es todo para el portal!  

Paleta: portal móvil

Sakai tiene un portal simplificado para móviles que puedes ver en:

http://localhost:8080/portal/pda

La paleta es muy simple. Todas las líneas y selectores referencian a neo-default/pda.css

 

Las únicas tres áreas que nos importan son:

  1. La barra superior con su gradiente marcada en amarillo en la imagen (líneas 39 &c, 259 & c)

#pda-portlet-menu {

El pie (baja hasta el fondo para verlo) es como la cabecera pero se puede hacer diferente en las líneas 230 &c y 355 &c.

#pda-footer {

2. Los botones normales (en rojo en la imagen), líneas 90 &c,

#pda-portlet-menu li.loginLink,#pda-portlet-menu li.logoutLink, #switch-link-w,.helpLink {

3. El único problema es el botón de volver atrás en púrpura en la imagen. Lo que se hizo fue hacer un screenshot de un botón normal, editrlo en photoshop haciendo uno de los lados más puntiagudo y cortar la imagen resultante en tres, haciéndolos el fondo de los<li>, el<span>y el <a> que juntos hacen el botón. Mira en el CSS en las líneas 68-89. Bastante horrible!!!

Importante: El css pda puede dar servicio a dos tipos de clientes, small mobile webkit, y cualquier otro. La experiencia en un iPhone o un Android erá muy diferente en el navegador por defecto que en un iPad o un navegador regular. Teniendo en cuenta estos tres elementos tenemos el trabajo, pero...deberías probarlo en

  1. uno/todos los navegadores que Sakai prueba
  2. un iPhone y un dispositivo Android, o emuladores iPhone/Android
Más información en  http://gonzalosilverio.wordpress.com/2010/12/09/sakai-mobile-portal/
Paleta: herramientas

(La traducción va por aquí, siéntete libre de colaborar y continuarla...)

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) - 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:

.listHier th a:link, .listHier th a:visited {
    color: inherit;
    text-decoration: none;
}

as well as the table header sorting link hover (which is Sakai blue in neo-default)

.listHier th a:hover {
    color: #a00000
}

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

Table row treatments:

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 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)

Getting more involved

Adding a mast head

If your design needs a masthead you can add it.

 

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;
}

 

 

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

#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;
}

Like the Rosie the Riveter example, the parent of both these blocks needs to have a height equal to the highest of them, because they are both floated.

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.

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 are the same, but everything has been moved around.

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:

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

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.

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

But you can get creative: http://screencast.com/t/SmOGcMzW

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.

As an example, make sure presence is enabled (display.users.present=true  in sakai.properties) take a look at a site with the neo-examp-u skin. Go there as two different users in two different browsers. You will see:

and if you click on the guy icon you will see the following ("The instructor" is a link to the chat room because The Instructor is in a chat room):

Below you can see that the control icon to display the Profile/Preferences/Add new site can be changed.

In this case we have combined a cog and the little person to indicate that this is both a link to settings and a link to profile.

 

To see what changed specifically to do this, view the Subversion commits for  

 

 

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.sakaiproject.org. 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:
https://source.sakaiproject.org/svn/reference/tags/sakai-2.8.2/docs/architecture/sakai_skin.doc

[2]) https://jira.sakaiproject.org/browse/SAK-7924

[3]) https://jira.sakaiproject.org/browse/SAK-13987

[4]) https://jira.sakaiproject.org/browse/SAK-19193

[5]) https://jira.sakaiproject.org/browse/SAK-22243

[6]) http://gonzalosilverio.wordpress.com/2008/06/28/corners-of-sakai-2-skinning-site-types/

[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]) http://getfirebug.com/

[11]) http://www.aptana.com/

[12]) http://jigsaw.w3.org/css-validator/

[13]) http://www.colorzilla.com/gradient-editor/

[14]) http://www.cssportal.com/css3-box-shadow-generator/

[15]) http://border-radius.com/