El inicio, y algunas técnicas para que se familiarice con las cosas básicas
Una vez que usted tenga su nuevo y deslumbrante sitio de Plone, lo primero que recomendamos es que se mueva un poco por las personalizaciones de web - cambiando los colores de fuente y reemplazando el logotipo de Plone con uno suyo.
Usted probablemente tenga muchas más ambiciones que estas para el diseño de su sitio, pero editando el CSS (hojas de estilo en cascada) y reemplazando el logotipo; son buenas maneras de comenzar a aprender las técnicas para temas.
Hemos asumido que usted está familiarizado con HTML y CSS - sin embargo las personalizaciones básicas descritas aquí no necesitan de un conocimiento profundo de ellas. Ayudará si usted como, administrador, ha tenido la oportunidad de conocer la sección Configuración del sitio de Plone.
Lo acompañaremos en el proceso de sustituir el estilo del título de la página,
por medio de la personalización y edición del estilo de hoja ploneCustom.css Todo esto se hace en línea a través-de-la-web vía la Interfaz de Administración de Zope.
Breve recorrido de las herramientas que usted encontrará útiles.
Firefox y mozilla tienen un conjunto de extensiones que realmente le pueden ayudar en el trabajo de desarrollo en la Interfaz de Usuario. Un conjunto básico es listado aquí.
La vieja y confiable opción de “ver código fuente” era antes el camino de depurar html de mala apariencia. Ahora hay extensiones de mozilla/firefox que resultan en un desarrollo html mucho más productivo. Un conjunto básico es listado aquí para que se ponga al día.
Dos fuentes de estos son http://squarefree.com y http://slayeroffice.com. Vea para ejemplos:
Asegurarse que los cambios hechos de CCS puedan verse instantáneamente. Este es el problema más común que se le presenta a las personas nuevas en Plone, que están tratando con el asunto de temas.
Antes de comenzar cualquier personalización CSS debería cambiarse a modo depuración/desarrollo. Esto garantizará que el almacenamiento en caché y la compresión de CSS están desactivadas. Esto le asegura que pueda ver los cambios en tiempo real, después de recargar o actualizar su navegador Web.
Esta es la manera en que se activa el modo depuración/desarrollo:
En Plone 3:
En Plone 4:
Cuando haya finalizado con las modificaciones de CSS debería desactivar el modo depuración/desarrollo, ya que este afecta el rendimiento de su sitio Plone.
¿Cómo cambiar los colores de fuente?: un enfoque a través-de-la-web.
Aquí se presentarán algunas técnicas sencillas para la personalización del CSS de Plone a través-de-la-web.
En este caso cambiaremos los títulos de las paginas de color negro a color turquesa.
Para mayor comodidad, los temas de Plone a menudo se comprimen en un conjunto de hojas de estilo separadas, pero para velocidad y eficiencia en modo de producción, Plone posee un mecanismo (portal_css) para crear los paquetes en uno o dos archivos.
Usted necesitará desactivar esto al momento de hacer cambios o personalizar la CSS. Así que asegúrese completamente que ha seguido las instrucciones de cómo poner su sitio en modo depuración/desarrollo.
Como algo natural, la hoja de estilo que se carga de último en cada página Plone es ploneCustom.css. Usted puede ver esto si inspecciona la etiqueta de encabezado HTML de su página usando Firebug. Si escarba un poco más, probablemente encontrará que esta hoja de estilo está completamente vacía. Según las reglas de precedencia de la Cascada CSS, cualquier estilo especificado en esta hoja sustituirá esos estilos en la hoja precedente. Entonces aquí tiene una “hoja en blanco” para sus propias personalizaciones.
El truco ahora es encontrar el archivo, para que está disponible para su respectiva edición.
Cuando hace clic en ploneCustom.css se dará cuenta que no puede editarlo. El próximo paso es poner ploneCustom.css en un lugar donde la edición sea posible. Usted verá una opción de Personalizar justo arriba del área gris de texto, haga clic en el botón de Personalización y verá que el estilo de hoja se ha copiado automáticamente a portal_skins/custom.
Ahora ya es libre de editar el archivo a su gusto. Para cambiar el color de los títulos de nuestra página, agregue:
h1.documentFirstHeading {
color: #0AAE95;
}
y guarde.
Si usted instala Plone 4 con el tema Sunburst, el archivo ploneCustom.css trae una serie de estilos pre-empaquetados comentados con los que puede experimentar si desea. Usted puede sustituir los estilos de diseños para un ancho fijo y modificar los colores de los enlaces.
Usted cuenta con un par de opciones para revertir a la CSS original:
De hecho aquí ha encontrado dos tipos de personalización.
Técnicas más avanzadas que incluyen la incorporación de sus propias hojas de estilo dentro de un producto de tema, son descritas posteriormente en este manual.
Puede descubrir más acerca de cómo el CSS Registry (Registro CSS) (portal_css) empaqueta los hojas de estilo para montarlos a la página en la sección de Plantillas y Componentes para página de este manual.
¿Cómo substituir el logotipo estándar de Plone con su propio logotipo?; un enfoque a través-de-la-web.
En Plone 3 y 4 el logotipo es simplemente una imagen que contiene un enlace a la página de inicio (solamente hay una pequeña diferencia entre versiones, y es que en Plone 3 se llama logo.jpg y en Plone 4 logo.png).
<a id="portal-logo" href="http://[su sitio web]" accesskey="1">
<img width="252" height="57" title="Plone" alt=""
src="http://[su sitio web]/logo.jpg"/>
</a>
Si le parece bien este enfoque entonces no tendrá que cambiar el HTML ya que todos los atributos en este fragmento se generan automáticamente. Siga las instrucciones en la Sección 1: Cambiando la Imagen y su Título.
Si quiere hacer algún cambio pequeño en los estilos vaya a la Sección 2: Cambiando el estilo de portal_logo.
Si prefiere montar su logotipo con un estilo diferente y necesita reescribir el HTML, pues puede hacer esto a través de la personalización de la plantilla del logotipo; siga las instrucciones en la Sección 3: Cambiando el HTML.
La imagen del Logotipo: logo.jpg (Plone 3) logo.png (Plone 4). Se encuentra en la carpeta plone_images en portal_skins. La manera más rápida de remplazar esta imagen es simplemente subiendo su propia imagen y dándole el mismo Nombre:
El nombre (ID: identificación) del logotipo está especificado en base_properties (propiedades_básicas); una lista de valores útiles que en Plone 3 se seleccionan y se usan en las hojas de estilo del tema de Plone por defecto. Esto le da la posibilidad de subir su propia imagen de logotipo, otorgarle cualquier nombre, y luego personalizar la base_properties con ese nombre.
Vaya a la ZMI (Interfaz de Administración de Zope) en Configuración de sitio ‣ Interfaz de Administración de Zope
Asegúrese de haber cambiado su CSS Registry (Registro CSS) a modo depuración (Configuración de sitio ‣ Interfaz de Administración de Zope ‣ portal_css)
Vaya a portal_skins ‣ custom y escoja Image en la lista desplegable a la derecha
Escoja la imagen que quiera y le da una Identificación y un Título, ej.:
ID (Identificación) = MyLogo.jpg
Title (Título) = My Logo
Vaya a portal_skins ‣ plone_styles, haga clic base_properties y luego clic en el botón de Personalizar
En este momento tendrá una versión personalizada de base_properties en la carpeta predeterminada de portal_skins la cual puede cambiar si desea. Encuentre el campo logoName y reemplace el valor logo.jpg con la ID que le haya dado a su imagen (asegúrese de haber introducido a su ID una terminación .jpg o .gif, y recuerde que toma en cuenta la mayúsculas y minúsculas) por ejemplo:
logoName = MyLogo.jpg
Guarde sus cambios y recargue o actualice su navegador Web
En Plone 4 base_properties sigue existiendo pero tiene un uso bastante limitado.
Nota
Note que cuando usted se devuelva a su base_properties personalizado en portal_skins ‣ custom, se verá como una carpeta vacía. Haga clic en la pestaña de propiedades para retornar a la lista de propiedades.
No hay ningunos estilos definidos para #portal-logo, pero hay algunos para #portal-logo img en basic.css. Investigue esto con Firebug, la extensión de Firefox. El enfoque más simple es sustituir estos con su propios estilos en ploneCustom.css.
El HTML para el logotipo es generado mediante logo.pt; una plantilla de página parte del viewlet denominado plone.logo. Para personalizar esto a través de la web, necesitará usar portal_view_customizations.
Nota
si en algún momento quiere retornar y hacer más cambios, verá que plone.logo está resaltado en la lista portal_view_customizations, haga clic en él para editarlo. Si quiere quitar completamente sus personalizaciones use las pestaña de contenido de portal_view_customizations, marque la casilla al lado de su plantilla y haga clic en Eliminar.
Aquí esta la plantilla logo.pt. Está escrita en lenguaje de plantillas que usa Plone - TAL (o ZPT). Es saludable aprender esto (y no toma mucho tiempo en aprenderse) pero nos explicaremos a través de este ejemplo:
<a metal:define-macro="portal_logo"
id="portal-logo"
accesskey="1"
tal:attributes="href view/navigation_root_url"
i18n:domain="plone">
<img src="logo.jpg" alt=""
tal:replace="structure view/logo_tag" />
</a>
Primero tenemos la etiqueta del enlace:
Usted puede hacer caso omiso de metal:define-macro=”portal_logo” esto simplemente está conteniendo o envolviendo el código en algo que pueda ser re-usado nuevamente si es necesario.
El detalle importante es tal:attributes=”href view/navigation_root_url”, este el código que proporciona su sitio URL al atributo href.
Aquí hay una variable mágica, view/navigation_root_url , que paciera haber surgido de la nada. De hecho, vista es una colección de propiedades computados por el viewlet plone.logo viewlet and seamlessly passed to the logo.pt template. Aquí están las propiedades disponibles:
Ahora mire la etiqueta de imagen en la plantilla.
La clave aquí es tal:replace=”structure view/logo_tag”. Esto significa que la plantilla no cargará la etiqueta de imagen escrita aquí, sino que reemplazará todo con la generada del viewlet plone.logo. Si usted no quiere que esto pase, pues debería borrar esta linea.
Nota
La estructura significa tratar el valor como HTML en lugar de una cadena de texto.
Aquí tiene una versión personalizada de la plantilla, usando view/portal_title en vez de view/logo_tag, para darle un encabezado de texto en su lugar (si ha usado Plone 2, esto le puede parecer familiar)
<h1 metal:define-macro="portal_logo"
id="portal-logo">
<a accesskey="1"
tal:attributes="href view/navigation_root_url"
tal:content="view/portal_title"
i18n:domain="plone">
</a>
</h1>
Por supuesto que querrá proporcionar sus estilos propios, regrese a la Sección 2 de este Cómo hacer para información de cómo definir estos en ploneCustom.css. Puede ajustar este ejemplo para utilizar una técnica de sustitución de imagen accesible en la CSS.
No tiene que utilizar logo_tag si no lo desea:
<a metal:define-macro="portal_logo"
id="portal-logo"
accesskey="1"
tal:attributes="href view/navigation_root_url"
i18n:domain="plone">
<img src="[Mi ID del logo]" alt="[Mi Logo]"
width="[Mi ancho del logo]" height="[Mi alto del logo]"
tal:attributes="title view/portal_title" />
</a>
Obviamente necesitará subir su propio logotipo en la carpeta predeterminada en portal_skins, revise las instrucciones en la Sección 1 de este Cómo hacer:
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.