Con Plone 2.1 y posteriores, tenemos una nueva forma de desarrollar pieles para Plone mucho mas sencilla que en las versiones anteriores de Plone.

No voy a decir mucho como se hacia antes salvo que se basaba en tomar el código CSS existente, sobrescribir (overriding) las reglas CSS existentes y crear un nuevo tema de esta manera. Este modo tenía numerosos problemas:

• Era muy complejo si no tenias mucho conocimiento de CSS
• Era propenso a fallas cuando se realizaban actualizaciones a nuevas versiones del CSS de Plone, aún cambios menores podían alterar tu tema
• Los archivos CSS resultantes eran muy extensos

El nuevo modo de trabajo

Con Plone 2.1 y posteriores, tenemos una nueva infraestructura de componentes llamada ResourceRegistries. Estos componentes nos permiten dividir CSS y Javascript del lado del sever, permitiendo manejarlos sanamente. Podemos agregar chequeos condiciones en porciones de los CSS/JS, y  unirlos en un solo CSS/JS en la salida, por lo tanto el navegador solo ve un archivo CSS de modo que se reduce la cantidad de pedidos necesarios al server. En versiones posteriores, RR tambien agregó compresión CSS y JS para reducir el tamaño de archivos.

¿ Qué significa esto para nosotros cuando queremos crear pieles para Plone ?, quiere decir que podemos desactivar selectivamente partes del CSS de la interfaz de usuario Plone. Una práctica muy común es mantener el CSS para edición (authoring), el borde verde, los forms CSS; y personalizar solo lo que la gente ve cuando no están autenticados. Esto tiene muchas ventajas:

• Podemos empezar de cero, agregar nuestro CSS sin interferir con Plone
  
• Podemos reducir el tamaño de los datos con CSS a solo lo que necesitamos
• El tema se vuelve mucho mas resilient a cambios dentro de Plone en sí mismo (The theme becomes much more resilient to changes in Plone itself)

Este modo es mucho mas robusto debido a que posibilita la compatibilidad con futuras versiones de Plone porque depende solamente de los IDs y clases en el código HTML, el cual rara vez cambia. (En verdad, ahora también hay cambios en las clases e ID, pero son mucho menos frecuentes que otros cambios y el Equipo Plone intenta dejarlos lo mas intacto posible).

Cambios Sencillos

Reemplazar el logo y cambiar los colores. No los voy a cubrir en este tutoriol, pero está bien documentado en la mayoría de libros y en mas de  un  documento como.

Profundos (Comprehensive)

Remplazar todos los estilos que son visibles al público, pero manteniendo el estilo de los widgets clásicos. Estos pueden involucrar cambios en la plantilla principal 'main_template', pero nada radical.

Completos

Comenzando desde cero, reemplazando todos los CSS y reecribiendo plantillas (no recomendado, mantenerlo será una pesadilla).

Voy a cubrir el caso de uso Comprehensive.

¿ Por qué mantener la estructura de Plone ?

Accesibilidad

Plone ha sido desarrollado para ser amigable para usuarios con dificultades visuales y motoras. Lograr esto toma mucho esfuerzo y testing  — con Plone, lo tenes gratis.

Visibilidad en motores de búsqueda

Por defecto, un sitio plone en blanco tiene un ranking Google de 7/10. Para plone.org mismo tenemos un rank de 9/10, lo mismo que Microsoft, IBM y otras entidades masivas similares en la Web. Hemos dedicado mucho tiempo en la optimización de Plone para motores de búsqueda. Google ama Plone. Plone ama Google.  (Trivia: el único sitio que he encontrado con un rank de 10/10 es el sitio de W3C  — ¿ alguien encontro otro ? :-)

Notas sobre terminologías

A lo largo de este tutorial, uso la palabra "tema" (theme) para describir la collección de modificaciones visuales hechas. En otras partes de la literatura Plone esto es descripto como "skinning" y el resultado final es una piel "skin". Las razones por las cuales estamos tratando de no usar ese término son muchas:

1. En la teminología Plone, una "piel" (skin) puede ser una plantilla, CSS o modifcaciones de código. Intentamos mantener a los temas visuales, tan alejado como sea posbile del código y personalización de plantillas, y usamos la palabra "tema" para referirnos solo a cambios visuales.
   
2. Alentamos a que mantengas las otras modificaciones a Plone en un producto en el sistema de archivos, esto hace que las modificaciones visuales o tema partes de una ecuación mucho mas reusable y simple.
   

Por ejemplo, en nuestra compañía usualmente usamos la siguiente convención de nombres:
For example, in our company we usually stick to the following product naming convention, with "Site" being the customer or project name:

SiteTheme

Almacena el tema visual y otros elementos visuales generales (logos, imágenes de fondo, etc).

SiteTweaks

Almacena pequeñas modificaciones a plantillas, cambios de comportamiento de las plantillas y scripts.

SiteSetup

Usando la infraestructura de GenericSetup en Plone 2.5 y posteriores (o CustomizationPolices en Plone 2.1 y anteriores), este producto almacena lo necesario a ser configurado cuando se instancia un sitio  — cambios en la configuración, conecciones SQL, etc. 

Donde site es el nombre del cliente o del proyecto
En componentes de infraestructura, nunca usamos nombres relacionados al cliente o proyecto, porque intentamos usar nombres genéricos ya que usualmente liberamos esas soluciones y queremos nombres neutrales para estos.

Preparando a Zope y Plone

Si deseas crear una piel (skin) en el sistema de archivos (recomendado) en vez de hacerlo desde el ZMI hay muchos métodos que pueden hacer el debugging mas simple:

Zope en modo debug

Ejecutar Zope en modo debug permite reflejar instantaneamente cambios en las pieles (skin) de un sitio. Existen muchas formas de habilitar esto:

• En el archivo etc/zope.conf habilitar:
  

   debug-mode on

  Luego habilitar zope usando lo siguiente (esto permitira ver la bitacora (log) de erores en la consola)
  

  zope_instance/bin/runzope

• Otra alternativa es reiniciar zope usando:
  

  zopectl fg

• Si se instalo Plone usando el instaldor de Windows, hay una opción para correrlo en modo debug desde el menu Plone Program.

Recargando Productos

Si no se está usando el modo debug se pueden actualizar los cambios en un producto de skin usando la opción de recarga (reload). Para activar esta opción es necesario tener un archivo refresh.txt dentro de la carpeta de un producto (el generador DIYPloneStyle lo crea por defecto).

• En ZMI, hay que ir a Control Panel -> Product Management -> Nombre de la piel (skin) o producto
  
• Seleccionar el tab Refresh y luego hacer click en 'Refresh this Product button' para recargar el producto.

Registro de recursos CSS

Para mejorar la perfomance de un sitio Plone, portal_css une todas las páginas de estilos de una página en un solo archivo CSS. Para hacer debugging y personalización de css mas sencilla se puede emplear el modo debug el cual previene de hacer esta unión:

• En el ZMI ir a Plone Site -> portal_css
  
• Activar el cuadro de modo Debug y presionar el botón save.

Inspectores DOM

El Modelo de Objetos Documentos (Document Object Model) o DOM de forma abreviada, es un término para describir como una página html (o documento xml) es estructurado y se provee una API para accederlo. Los navegadores convierten el texto plano del formato html/xml a DOM y luego lo usan para aplicar el CSS y otras transformaciones.

¿ Por qué es esto tan útil para nosotros ? El código HTML y CSS que viene por defecto en Plone hace muchas coas bien – el punto en contra es que todo este poder es complejo. Por lo tanto, a veces solo solo se desea hacer un cambio simple en un elemento pero no se sabe como localizar ese item y escribir el css relevante.

Aquí es cuando los inspectores DOM entran en acción, con ellos es posible ver la estructura de una página en un árbol y recibir feedback visual mientras se inspeccionan todos los elementos. Una vez que se encontro el item deseado, fácilmente se pueden encontrar todos los atributos, tales como clase, id y elementos relacionados.

Inspector DOM de Firefox

Cuando se instala firefox, asegurate de habilitar las herramientas Web Developer desde el menu Custom installation.

Firefox posee un inspector DOM muy útil. Para abrirlo hay que ir al menú Herramientas Tools y buscar abajo. Alternativamente se puede usar Ctrl + Shift + I en Windows, o Apple key + Shift + I en Firefox para Mac.

Lo primero que probablemente tengas que hacer es maximizar el inspector DOM – funciona mucho mejor en una pantalla más grande.

Luego ir al menú archivo y seleccionar inspeccionar URL. Ingresar la dirección del sitio que se desea inspeccionar y la página se cargará en el panel inferior del inspector DOM.

Existen dos formas de usar el inspector:

Navegando el árbol

En el panel superior izquierdo, usar los íconos + para expandir cada nodo. Comenzando con #document, luego HTML y BODY. A medida que vayas expandiendo el árbol irás revelando mas y mas de los elementos. Notar que hay columnas para id y clase que te ayudan a saber donde estas.
Cuando hagas click en cada elemento vas a ver el elemento visual parpadeando en el panel de navegación que se encuentra abajo.

• Expandí DIV con el id visual-portal-wrapper (es un contenedor específico de Plone que contiene toda la página)

• Localizar y expandí TABLE con el id portal-columns (este contiene la parte central de la página)

• Expandí TBODY, TR y luego TD con el id portal-column-one (columna izquierda)

• Finalmente expandí el DIV con la clase visualPadding para revelar los items del portlet incluytendo portlet-navigation-tree.

Selección de elementos por Click

Ir a el menu búsqueda (search) y selecciná la última opción 'Seleccionar elemento por click' 'Select Element by Click'

Ahora tenes que ir al panel de navegación y apuntá al elemento que deseas encontrar en el árbol.

Para encontrar otro elemento solo tenes que repetir estos pasos nuevamente.

Extensión Web Developer para Firefox

La extetnsión Web Developer agrega una herramienta muy podera al navegador Firefox que es de mucha ayuda en el desarrollo de pieles (skins) Plone.

Algunas de las utilidades que ofrece son:

• Edición instantánea de CSS - no se necesita hacer cambios en el ZMI tampoco en el sistema de archivos y recargar la página.
• Ver información de estilo - clickear en los elementos de una página y obtener declaraciones relevantes de CSS.
  
• Desactivar todas o algunas hojas de estilo
  
• Agregar nuevas hojas de estilo
  
• Mostrar características de todos o algunos de los elementos de una página (por ejemplo todos los <div>, o <ul>)
  
• Generar una lista de todas las imágenes de una página.
• Redimencionar la ventana del navegador a tamaños habituales o particulares, por ejemplo 1024 x 768, 800 x 600 etc.
• Mostrar información detallada sobre formularios, enlaces, Meta Tags, encabezados HTTP, tamaños de documentos, entre otros.
• Validación para HTML / CSS / RSS / Accessibilidad / Enlaces
  
• Regla - Medir el alto y ancho de partes de una página. No vas a necesitas nunca mas adivinar cuantos píxeles hay en un elemento!
  

Extensión FireBug para Firefox

FireBug es el inspector DOM con esteroides, y es muy útil para inspecciónar HTML, CSS y Javascript.

Una vez instalado es muy agrega un ícono en la barra de tareas, en la parte inferior de la ventana de navegación. Cada vez que abris una página chequea y guarda en su consola cualquier error que encuentra. Si la página no tiene errores, muestra una ícono verde con un tilde caso contrario muestra una x roja con el número de errores encontrados.

Para usar todas estas utilidades muy útiles hay que hacer click en estos íconos para mistrar el panel de FireBug:

Referencias

1. Icono de FireBug (tilde verde)
2. Tab de Inspector - usar para cambiar de modo consola (lista errores y alertas) a modo inspección.
3. Botón Inspector - usar esto para activar/desactivar la selección de elementos usando el ratón. Cuado está activo y el puntero pasa sobre un elemento podes seleccionar que elemento queres inspeccionar haciendo click.
4. Tabs Source & Style - cambia entre estos para ver el HTML seleecionado o los atributors CSS de este.
   

Desde aquí se pueden ver errores en la consola o cambiar al tab Inspector para mostrar las páginas HTML interactivamente. Hacer click en los íconos con flechas para expandir o contraer cada tag o inspeccionar un elemento deseado. Alternativamente podes usar el botón inspector para seleccionar un elemento dado.

Ver gráfico del código fuente en Firefox

La extensión ver gráfico del código fuente View Source Chart ayuda a entender la estructura de un documento HTML de forma mucho mas sencilla.

Una vez que está instalado solemente tenes que hacer click en cualquier parte de una página para ver el gráfico del código fuente. Y se mostrará el gráfico en una nueva ventana:

Vas a notar que los elementos tienen diferentes colores para ser más legibles, y cada contenedor se contrae haciendo click en el, lo cual puede ayudarte mucho a aislar elementos en los que estes interesado.

Diseño Plone sin modificar

Comenzamos con un tema sin modificar por fines didácticos. Demasiados temas lucen como una horrible carnicería horrible carniceria, ese es el motivo por el cual escribi este tutorial. No mas variantes del tema por defecto de Plone en verde brillante, por favor, tengan piedad! :)

Tema sin modificadicar

Luego de crear nuestro propio MyTheme e instalarlo según los pasos anteriores, tenemos lo siguiente:

No es muy bonito, pero es lo que vamos a cambiar. Notar que el estilo empleado para los tabs Ver y Editar se ha conservado y justamente eso era lo que queríamos conservar.

Lo primero que haremos es agregar una imagen en el encabezado.
Si hubieramos mantenido las hojas de estilo básicas de Plone (como base.css, plublic.css, …), podríamos haber conservado la imagen como logo.jpg en el directorio mytheme_images. Se hubiera mostrado automáticamente. En el caso de que quieras llamarlo de otra manera, deberías editar base_properties.props para reflejar el cambio.
En este tutorial, la imagen del encabezado es insertada personalizando la plantilla global_logo y guardándola como header.jpg.

Para obtener el mismo efecto que en el ejemplo, debemos copiar el archivo global_logo.pt desde DIYPloneStyle/skins/diystyle_example_templates/ al directorio mytheme_templates. Tambien copiar el archivo header.jpg de DIYPloneStyle/skins/diystyle_example_images/ al directorio mytheme_images.

Es tiempo de comenzar con CSS en serio, abrí el archivo mytheme.css.dtml y agregá lo siguiente:

    /* The basics */
    body {
        font: 69% Verdana, sans-serif;
        background-color: White;
        color: #7e7c7c;
        margin: 0;
        padding: 0;
    }

A continuación agregaremos una imágen de fondo al sitio, tambien fijareoms el ancho en 840 píxeles. Agrega el siguiente CSS y recarga el sitio:

    /* fondo + estilo de logos */
    body {
        background: url(bg_light.gif);
        width: 840px;
        margin: auto;
    }

    #visual-portal-wrapper {
        margin: 20px;
        background-color: white;
        padding: 0 20px 20px 20px;
    }

    #portal-logo {
        display: block;
        margin-bottom: 2em;
    }

Un detalle que merece prestar atención es la línea margin: auto. Este es el modo por el cual se centran elementos en CSS y mucha gente no lo sabe — generalmente esperan usar algo como float: center o similar.

Una vez guardado, el sitio debería verse de este modo:

A continuación seguimos con mas estilos elementales — el estilo de los párrafos y títulos tienen que coincidir con los del diseño, y es necesario algunos toques especiales para algunos navegadores. Incluí el siguiente CSS:

    /* Titulos y otros estilos basicos */
    h1 {
        font-weight: normal;
        border-left: 4px solid #ec001a;
        padding: 0 5px;
    }

    p {
        padding-left: 9px;
        line-height: 1.5em;
    }

    a {
        color: #463229;
    }

    p a:link {
        color: #463229;
        text-decoration: none;
        border-bottom: 1px solid #463229;
    }

    img {
        border: none;
    }

    input {
        border: 1px solid #463229;
    }

Una línea para destacar es en la que usamos a:link en vez de un simple a. Esto es para asegurar que las anclas HTML (HTML anchors) no tengan el estilo del link — ellos son la terminación de un enlace, no un enlace en sí mismos. Guardar, recargar la página y deberías ver lo siguiente:

Ahora, tenemos muchas listas no ordenadas que son empladas con fines estucturales (tambien conocidos como semáticos) y deberían estár todos en una misma línea. CSS al rescate:

    /* Site actions / search / personal bar */
    #portal-siteactions {
        list-style-image: none;
        list-style-type: none;
        float: right;
    }

    #portal-siteactions li {
        display: inline;
        border-left: 1px solid #463229;
        padding-left: 0.5em;
    }

    #portal-siteactions li a {
        text-decoration: none;
    }

    #portal-searchbox {
        float: right;
        clear: right;
    }

    #portal-personaltools {
        float: right;
        margin: 0.5em 0;
        padding: 0;
    }

    #portal-personaltools li {
        display: inline;
        list-style: none;
        list-style-image: none;
    }

    #portal-personaltools li a {
        text-decoration: none;
        margin-right: 1em;
    }

    .documentActions {
        float: right;
        margin: 0.4em 0 0 0.5em;
        padding: 0;
    }

    .documentActions li {
        display: inline;
        list-style: none;
        list-style-image: none;
    }

    .documentActions {
        display: none;
    }

Notar que si bien esto es un poco repetitivo, es escencialmente setear la misma propiedad en estructuras diferentes - logrando que se muestren en la misma línea inline en vez de una debajo de la otra, y quitando el punto del inicio de la línea.

Esto puede venir arreglado en Plone 2.5 y posteriores, como parte del archivo invisibles.css )

Si recargas la página tenemos:

Una de las cosas mas difíciles de hacer es personalizar la navegación. Posee una estructura compleja y se complica especialmente cuando se desea poseer diferentes estilos en distintos niveles — por ejemplo, diferentes colores en el segundo y tercer nivel de navegación. Afortunadamente, Plone provee varias clases CSS para ser usadas en estos casos y la mejor recomendación que puedo darte es que uses rigurosamente el DOM inspector para saber qué clases tenés que manipular.
Nosotros hemos elegido un estilo sencillo por motivos didácticos.

Primero, cambiamos estilos básicos de portlets y breadcrumb — agregá el siguiente CSS:

    /* Navegacion */
    #portal-breadcrumbs {
        margin: 1em 1em 1em 19em;
    }

    #portal-breadcrumbs {
        display: none;
    }

    .portlet dt {
        background-color: #d3cebc;
        margin-bottom: 0.5em;
        display: block;
        padding: 0.2em 0.5em;
    }

    .portlet dd {
        margin-left: 0;
    }

    .portlet a {
        text-decoration: none;
    }

    .portletItem {
        padding: 0.5em;
    }

    .portletFooter {
        border-bottom: 1px dashed #c9c4c0;
        padding: 0.5em;
        text-align: right;
    }

    .portletItemDetails {
        text-align: right;
        display: block;
        color: black;
    }

Luego agregamos elementos específicos a la navegación:

    .portletNavigationTree {
        padding-left: 0;
    }

    #portlet-navigation-tree .portletHeader {
        display: none;
    }

    .portletNavigationTree a {
        background-color: #d3cebc;
        margin-bottom: 0.5em;
        display: block;
        padding: 0.2em 0.5em;
    }

    .navTreeItem {
        display: inline;
        list-style: none;
        list-style-image: none;
    }

    .navTreeItem a,
    .navTreeItem a:visited {
        text-decoration: none;
        color: #463229;
    }

    .portletNavigationTree a:hover,
    .navTreeCurrentItem {
        color: #d3cebc !important;
        background-color: #463229 !important;
    }

Estas líneas pueden parecer complejas si no has visto CSS antes, pero podes ir agregando de a una para ver progesivamente que hace cada una. Si recargás la página, deberías tener algo similar a:

Uno de los problemas más comunes que posee la gente cuando trabajan con pieles en Plone es el misterioso espacio en blanco alrededor de los portlets. Este espacio es producido por el infame elemento visualPadding, y es fácil de modificar si sabes como — aunque muy difícil de detectar, incluso con el DOM Inspector.
Es uno de los elementos que mas problemas causan, con suerte removeremos en Plone 2.5 en Plone 2.1.3 fue movido a public.css, por lo que no debería ser un problema si estás usando esa versión o una posterior.

Agregá el siguiente código CSS para reducir el espacio padding a cero (aunque queremos algún espacio a la derecha):

    /* el mitico e infame visualPadding */
    #portal-column-one .visualPadding {
        padding: 0 1em 0 0;
    }

Y ya que estamos, vamos a mover un poquito hacia arriba el menú de navegación:

    #portlet-navigation-tree {
        position: relative;
        top: -6.4em;
    }

Luego — recargando la página deberías tener algo como:

El pie de página no tiene ningun misterio, asi que sin mas agregá:

    /* Pie */
    #portal-footer {
        border-top: 1px dashed #c9c4c0;
    }

    #portal-footer a,
    #portal-footer a:visited {
        text-decoration: none;
    }

    #portal-colophon {
        display: none;
    }

Lo que tenes y no tenés que hacer para temas:

No agregues lógica

Nunca sabes que clase de sitio vas a tener — salvo en los cambios puramente estructurales como en main_template or global_logo, mantené los cambios de Javascript y plantillas fuera del producto del tema.

No crees dependencias externas

Si tenes un portlet que obtiene o almacena dato de una base de datos SQL, ese portlet debería ser un producto aparte y no estar en el producto del tema.

Reusa código HTML

Los títulos en nuestro ejemplo se veían muy diferente de los originales, pero aún son tags H1.

Hace cambios sutiles en el diseño

No tengas miedo de desviarte un poquito del mock-up del diseñador para lograr una buena funcionalidad — aunque tenés que estar preparado para enfrentar al cliente y contarle por qué lo hiciste de forma diferente.