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.