El paquete plone.app.theming esta incorporado por defecto desde versiones Plone 4.2 o superior.
Para instalar plone.app.theming dentro de su sitio Plone, entonces valla al panel de control de los Complementos en Configuración de sitio ‣ Complementos como un usuario Administrador Plone, y marque la casilla del producto Soporte de temas Diazo y haga clic en el botón Habilitar.
Usted notara que ahora tiene un nuevo elemento dentro del panel de control llamado “Temas”.
Un tema es un simple archivo .zip conteniendo una carpeta con al menos dos archivos:
tema-diazo/
|-- index.html
`-- rules.xml
Normalmente, el paquete es más complejo, conteniendo los archivos CSS, Javascripts y imágenes.
Crear una carpeta con el nombre de su tema. En esta carpeta irá a guardar los archivos de su tema:
$ mkdir NOMBRE-TEMA
Puede crear el archivo manifest.cfg con los siguientes comando:
$ cd NOMBRE-TEMA ; nano manifest.cfg
Debe tener la siguiente sintaxis:
[theme]
title = Mi primer tema diazo
description = Mi primer tema diazo para Plone
preview = preview.png
[theme:parameters]
portal_url = portal_state/portal_url
Puede crear el archivo index.html, este debe agregarse en el mismo directorio del archivo manifest.cfg con los siguientes comando:
$ nano index.html
Debe al menos tener la estructura HTML siguiente:
<html>
<head>
<title>Mi primer tema diazo</title>
</head>
<body>
<h1 id="titulo">Mi primer tema diazo</h1>
<div id="menu">menú del sitio</div>
<div id="contenido">Lorem ipsum... </div>
</body>
</html>
Puede crear el archivo rules.xml, este debe agregarse en el mismo directorio del archivo index.html con los siguientes comando:
$ nano rules.xml
Debe crear al menos la siguiente estructura HTML:
<?xml version="1.0" encoding="UTF-8"?>
<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone.org/diazo/css"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<theme href="index.html" css:if-content="#visual-portal-wrapper" />
<replace css:content="#portal-globalnav" css:theme="#menu" />
<replace css:content="#portal-columns" css:theme="#contenido" />
</rules>
Define a cual template va a utilizar:
Usted puede establecer cual plantilla HTML usara para este tema con la siguiente directiva diazo:
<theme href="index.html" css:if-content="#visual-portal-wrapper" />
Ver también
Adiciona la navegación de Plone:
Usted puede importar estructura de la navegación de Plone con la siguiente directiva diazo:
<replace css:content="#portal-globalnav" css:theme="#menu" />
Ver también
Adiciona el Contenido:
Usted puede agregar el contenido del sitio Plone con la siguiente directiva diazo:
<replace css:content="#portal-columns" css:theme="#contenido" />
Ver también
Para probar el paquete tema diazo que lleva hecho hasta ahora puede seguir los siguientes pasos:
- Configuración del sitio ‣ Temas.
- Entonces para subir el archivo haga clic en el botón Subir archivo Zip.
Advertencia
Es importante destacar que la página de configuración diazo de este previamente cargado no son modificado por seguridad.
Truco
Si desea modificar la página de configuración diazo debe copiar, el tema previamente cargado haciendo clic en el botón Copiar le mostrara un mensaje emergente para agregar un Título y Descripción diferente al que cargo previamente y hace clic en el botón Crear.
Después de aplicar el tema, usted debe tener el código HTML, con el menú y el contenido de Plone, sin embargo, los estilos no se aplican Plone.
Importando el CSS de Plone:
Usted puede re-usar los estilos CSS de Plone con la siguiente directiva diazo:
<replace css:content="head" css:theme="head" />
Esta llamada substituye todo el elemento HEAD de su HTML por el elemento HEAD de Plone
A continuación se describen algunas las reglas diazo mas comunes.
A continuación el siguiente ejemplo:
<replace css:theme="title" css:content="title"/>
El resultado aquí es que el elemento <title /> en el tema será substituido por el elemento <title /> del contenido (dinámico).
Ver también
A continuación el siguiente ejemplo:
<after css:content="#portal-searchbox" css:theme="#contenido" />
Este ejemplo colocara la búsqueda de Plone al final de la página.
Ver también
A continuación el siguiente ejemplo:
<drop css:content="#portal-searchbox .searchSection" />
Se utiliza para eliminar los elementos del tema o del contenido que no se utilizan.
El ejemplo anterior se eliminará el mensaje “Sólo en esta sección” que viene con la búsqueda de Plone.
Ver también
A continuación el siguiente ejemplo:
<merge attributes="class" css:theme="body" css:content="body" />
Se utiliza para combinar los valores de atributos, especialmente usado para combinar las clases CSS.
Si el tema tiene en su etiqueta body de esta manera:
<body class="alpha beta">
Y el contenido posee una etiqueta body como:
<body class="delta gamma">
El resultado del ejemplo anteriormente seria:
<body class="alpha beta delta gamma">
Ver también
En la mayoría de los casos, usted no debe preocuparse demasiado sobre el funcionamiento interno del compilador diazo. Sin embargo, a veces puede ser útil para entender el orden en que se aplican las reglas, en este caso el compilador diazo ejecutará las reglas según un orden propio y no necesariamente en el orden escrito. No hay necesidad de decorar, pero es bueno que sea señalado:
Usted puede obtener el código fuente de este ejemplo, para esto ejecute el siguiente comando:
$ git clone https://github.com/Covantec/tema-diazo.git
Usted podrá encontrar un ejemplo de tema mas completo en la siguiente dirección:
Mas ejemplos consulte el índice de paquetes Python en búsqueda de temas basados en diazo.
El código fuente de este archivo esta hospedado en GitHub. Todos pueden actualizar y corregir errores en este documento con unos clic - sin necesidad de descargar.
Para mas información básica acerca de como actualizar este manual y referencia a sintaxis Sphinx, por favor consulte la guía Escribiendo y actualizando el manual.