Identificar elementos

La primera pregunta que deberias hacerte cuando ves un diseño original es: Qué elementos corresponden a las estructuras de Plone.

En nuestro caso, la mayoría de los elementos pueden estar en el mismo lugar, solo vamos personalizar la barra con acciones particulares y cambiaremos de lugar el logo. La fila de secciones y tabs es redundante y será removida.

Está bien modificar la plantilla principal main_template!

En Plone, la plantilla  main_template es la principal de todas, es la que posee la estructura central del estilo. Puede parecer muy compleja cuando se la comienza a leer  ("¿ qué son todas esas cosas metal: ?"), pero el secreto está en saltear las primeras lineas y comenzar a leer desde el elemento body (en mi versión es aproximadamente la línea número 40). Donde se verán elementos similares a:

    <div metal:use-macro="here/global_searchbox/macros/quick_search">
     The quicksearch box, normally placed at the top right
    </div>

Salteándonos los detalles esta instrucción le dice a Plone ir al archivo global_searchbox tomar el macro quick_search y aplicarlo en la página actual. Este código emplea Zope Page Templates y recomiendo que aprendas como funcionan si vas a usar Plone mas de una vez, aquí puede encontrar un tutorial de ZPT.

Dentro de la página podes mover estos elementos a donde quieras siempre y cuando mantengas sus contenidos y atributos intactos.

La mayoría de los libros recomiendan no tocar main_template por cuestiones de mantenimiento. En general es un buen consejo, pero mas allá de que es muy difícil que coincida la estructura dada con la que un cliente pueda pedirte, voy a hacer que quede registrado que:

Mi nombre es Alexander Limi, y personalizo la plantilla main_template en mis temas.

Entonces, esto no debería intimidar mas, ¿ no ?  ;-)

Es importante recordar que si personalizas la plantilla main_template para reordenar elementos tenes que ser cuidadoso cuando actualices Plone. Las notas de lanzamiento de cda Plone dirán si se hicieron cambios en la plantilla main_template, pero deberías usar siempre un programa diff (FileMerge en Mac, WinMerge en Windows) para ver los cambios entre los main_template originales de ambas verions de Plone y aplicar nuevamente los cambios en el main_template de la verrsión a la que se actualiza.

En nuestro caso, nosotro vamos a:

• Remover la barra global nav (tendremos el árbol de navegación, no necesitamos duplicar estructuras de navegación)
• Mover el logo arriba (siempre hay formas de hacer esto sin reordenar main_template, pero de esta forma es mucho mejor)
  

Esto se hace agegando una instrucción tal:replace alrededor del contenido con la instrucción especial nothing, por ejemplo:

    <tal:tutorial tal:replace="nothing"> Tutorial: Removiendo la barra global nav
      <div metal:use-macro="here/global_sections/macros/portal_tabs">
       The global sections tabs. (Welcome, News etc)
      </div>
    </tal:tutorial>

Para poseer tu propio main_template tenés que copiar el que está en el directorio CMFPlone/skins/plone_templates al directorio template en el producto que generaste con DIYPloneStyle.

Extraer colores base que serán usados

El próximo paso es obtener los valores de los colores del diseño (mock-up). Estos podrían ser usados en base_properties, pero no voy a hacer eso de eso en este tutorial — tendría sentido si queres algunos de usar algunos de los CSS que trae por defecto Plone. A continuación se listan los colores a emplear en nuestro tema:

    borde: #c9c4c0
    elementos de navegación: #d3cebc
    color rojo remarcado: #ec001a

    color de enlaces: #463229
    color de texto: #7e7c7c

¿ Qué páginas de estilos están desactivadas ?

En nuestro ejemplo y por defecto en DIYPloneStyle, poseemos desabilitadas los estilos visibles al público, lo que hace a Plone lucir como Plone.

Es decir, las páginas de estilos que están desactivadas son:

• base.css (estilos elementales como p, a etc)
• public.css ( todos los estilos que se usa y definen el estilo del sitio)
• portlets.css (contiene el estilo de portlets, las cajas de un sitio Plone)
• generated.css (crea creates íconos de tipos de contenido — usualmente activo generated.css para usuarios autenticados solamente — mirá en member.css para ver un ejemplo de condición)

A veces, prefiero dejar base.css y sobreescribir algunos elementos que no son desados, como los títulos y cambiar letras en base_properties pero en nuestro ejemplo comenzaremos desde cero. Esto tambien hace que sea mas resistente a futuras versiones.

Exportar elementos gráficos

A continuación, deberías exportar los elementos gráficos necesarios desde el diseño o mock-up. Si el diseó es un mock-up en formato Photoshop, usa la funcionalidad de capas y extrae imágenes de fondos, logos y otros gráficos. Guarda estos archivos en el directorio mitema_images.

Ahora, vamos a la parte mas divertida: Agregar CSS y hacer que Plone luzca como nuestro diseño.