Document Actions
Send this page to somebody Print this page

Un comienzo apropiado

Antes de comenzar a agregar nuestros estilos CSS, tenemos que crear los elementos de nuestro tema. Esto es escencialmente un esqueleto en blanco donde agregaremos nuestras imágenes y CSS dentro.

Alexander Limi

En este tutorial, Alexander Limi de Plone Solutions describe como cambiar completamente el estilo visual de un sitio Plone a partir de un sitio por defecto. Valido para Plone 2.1.x y Plone 2.5.x
Page 4 of 15.

Creando un tema vacío con DIYPloneStyle

Para conseguir un producto en blanco, sobre el cual basaremos el nuesto, tenemos que hacer lo siguiente:

  1. Bajar DIYPloneStyle en caso que no lo tengas. Bajá el que corresponda a tu versión de Plone, esto lo sabes de acuerdo a la versión del producto. Si tenes Plone 2.1.x, vas a necesitar la última versión de la serie 2.1.x, si usas Plone 2.5, vas a querer la última de 2.5.y etc.)
  2. Descomprimí el paquete usando tar, WinRAR o cualquier herramienta equivalente (no se recomienda WinZip porque tiene demasiados problemas manejando archivos vacíos).
  3. Copia el producto en el directorio Products de tu instancia. Si no estas seguro donde está el directorio Products, está listado en el mismo lugar donde instalas tus productos Plone cuando Plone está en ejecución.

Si querés ver que vamos a hacer, tenes que reiniciar Plone, ir a agregar remover productos e instalar DIYPloneStyle. Aproximadamente de esta forma lucirá el sitio cuando terminemos este tutorial. Nah, un chiste :)

Asegurate de desinstalarlo de nuevo si hiciste el paso anterior para crear un nuevo producto de nuestro tema. Desde una línea de comando de terminal, hacer lo siguiente (adapta los comandos a tu plataforma; por ejemplo Windows usa \ en lugar de /, y los binarios de python podrían requerir ser llamados explícitamente, por ejemplo: C:\Program Files\Plone\Python\bin\python.exe):

    cd Products/DIYPloneStyle

python bin/generator.py --productname MyTheme

Esto generará un esqueleto vació con el producto llamado MyTheme donde todos nuestros archivos serán almacenados. La estrcutura del directorio, excluyendo algunos archivos poco relevantes, tiene la forma de:

  • config.py (configuración de tu tema)
  • Extensions (archivos necesarios para instalar el producto en plone)
    • Install.py (archivo de instalación)
    • utils.py (métodos utilitarios usados cuando se instala o remueve el producto)
  • refresh.txt (posibilita usar el tab Refresh en ZMI cuando agregas nuevos archivos o reinicias)
  • skins (directorio donde las capas de estilos son almacenados)
    • mytheme_styles (lugar donde se almacenan plantillas y CSSs)
      • base.css.dtml (un archivo css vacío que sobreecribe al equivalente de Plone)
      • base_properties.props (propiedades básicas de color, no usadas en este tutorial, pero interesantes si solo querés hacer cambio de colores)
      • generated.css.dtml (un archivo css vacío que sobreecribe al equivalente de Plone)
      • mytheme.css.dtml (nuestro archivo de CSS)
      • portlets.css.dtml (un archivo css vacío que sobreecribe al equivalente de Plone)
      • public.css.dtml (un archivo css vacío que sobreecribe al equivalente de Plone)
  • tests (unit test para tu producto)
  • version.txt (indicador de versión del producto)

Si reinicias Plone y vas a la sección para agregar/remover productos, vas a ver el tema MyTheme listado como un producto instalable. Instalá el producto y vas a ver un producto sin estilo:

Un plone sin estilos (click para verlo en pantalla completa)

Esto provee un excelente punto de partida para nuestro tema.

 
by Alexander Limi — last modified 2008-01-31 13:55
Contributors: Traducción: Roberto Allende

Copyright (C) 2004-2007 Menttes - All Rights Reserved