Configuring and Customizing Plone “Through The Web”

Advertencia

This chapter has not yet been updated for Plone 5!

El panel de control

The most important parts of Plone can be configured in the control panel.

• Click on the portrait/username in the toolbar

• Haga clic en “Configuración del Sitio”

We’ll explain every page and mention some of the actions you can perform here.

1. Complementos (después)

2. Registro de Configuración

3. Content Rules
4. Date and Time
5. Dexterity Content Types

6. Discusión

7. Edición

8. Errores

9. Filtrado HTML

10. Manejo de Imágenes

11. Idioma

12. Correo

13. Mantenimiento

14. Etiquetado

15. Navegación

16. Resource Registries

17. Búsqueda

18. Seguridad

19. Sitio

20. Sindicación

21. Theming
22. TinyMCE

23. Tipos

24. Usuarios y Grupos

25. Interfaz de administración de Zope (He aquí dragones)

Below the links you will find information on your Plone, Zope and Python Versions and an indicator as to whether you’re running in production or development mode.

Portlets

In the toolbar under More options you can open the configuration for the diffrerent places where you can have portlets.

• UI fit for smart content editors

• Varios tipos

• portlet configuration is inherited

• Administrado

• ordenando / ampliando

• The future: may be replaced by tiles
• @@manage-portlets

Ejemplo:

• Valla a http://localhost:8080/Plone/@@manage-portlets

• Agregue un portlet “Patrocinadores” en el lado derecho.

• Remove the news portlet and add a new one on the left side.
• Go to the training folder: http://localhost:8080/Plone/the-event/training and click Manage portlets

• Agregue un portlet estático. “Formación destacada: Conviértete en un Rockstar de Plone en la ¡Maestría en Plone!”

• Use the toolbar to configure the portlets of the footer:
  • Hide the portlets “Footer” and “Colophon”.
  • Add a “Static text portlet” enter “Copyright 2015 by Plone Community”.
  • Use “Insert > Special Character” to add a real © sign.
  • You could turn that into a link to a copyright page later.

Viewlets

Portlets save data, Viewlets usually don’t. Viewlets are often used for UI-Elements and have no nice UI to customize them.

• @@manage-viewlets (pretty broken in Plone 5)
• Viewlets have no nice UI
• Not aimed at content editors
• Not locally addable, no configurable inheritance.
• Usually global (depends on code)
• Will be replaced by tiles?
• The code is much simpler (we’ll create one tomorrow)
• Live in viewlet managers, can be nested (by adding a viewlet that contains a viewlet manager)
• TTW reordering only within the same viewlet manager
• the code decides when it is shown and what it shows

ZMI

Valla a http://localhost:8080/Plone/manage

Zope is the foundation of Plone. Here you can access the inner workings of Zope and Plone alike.

Nota

Here you can easily break your site so you should know what you are doing!

Nosotros sólo cubrimos las tres partes de la personalización en el ZMI ahora. Más tarde, cuando agreguemos nuestro propio código fuente vamos a volver a la ZMI y lo buscaremos.

At some point you’ll have to learn what all those objects are about. But not today.

Acciones (portal_actions)

• Las acciones son principalmente enlaces. Pero enlaces realmente flexibles.

• Las acciones son configurable a través de la Web y a través de código.

• Estas acciones son usualmente Iteradas sobre viewlets y visualizadas.

Ejemplos:

• Enlaces en el pie de pagina (site_actions)

• Actions Dropdown (folder_buttons)

Las acciones tienen propiedades como:

• descripción

• url
• i18n-domain
• condition
• permissions

site_actions

Estos son los enlaces al fondo de la pagina:

• Mapa del Sitio

• Accesibilidad

• Contacto

• Configuración del Sitio

Queremos un nuevo enlace a la información legal, llamado “Aviso Legal”.

• Ir a site_actions (lo sabemos porque lo chequeamos en @@manage-viewlets)

• Add a CMF Action imprint

• Asigna dirección URL a string:${portal_url}/imprint

• Deje condition en blanco

• Asigne el permiso a View

• Guardar

explicar

• Verifique si el enlace esta en la pagina

• Cree un nuevo Documento “Aviso legal” y publiquelo

Ver también

http://docs.plone.org/develop/plone/functionality/actions.html

Navegación global

• La navegación horizontal es llamada portal_tabs

• Ir a portal_actions > portal_tabs Link

• Edite index_html

¿Donde esta la navegación?

La navegación muestra objetos de contenido, los cuales están en el raíz del directorio de Plone, además de las acciones en portal_tabs

Edite y explique index_html

Configurando la navegación por si mismo es hecho en cualquier parte: http://localhost:8080/Plone/@@navigation-controlpanel

Si hay tiempo explique:

• user > undo (¡chevere!)

• user > login/logout

Skins (portal_skins)

En portal_skins podemos cambiar ciertas imágenes, archivos css y plantillas.

• portal_skins es una tecnología depreciada

• We only do some minimal changes here.

Plone 5 tendrá una gran cantidad de funcionalidades que aún vive en portal_skins.

Antes solíamos usar como parte del entrenamiento el complemento plone.app.themeeditor que tiene una interfaz de usuario mucho más agradable que la ZMI pero también tiene dependencias que no son compatibles con ZopeSkel y no es muy utilizada.

Cambie algunos archivos css

• Ir a ZMI

• Ir a portal_skins

• Ir a plone_styles

• Ir a ploneCustom.css

• Haga clic en customize

Ingrese el siguiente css:

#visual-portal-wrapper {
    margin: 0 auto;
    position: relative;
    width: 1024px;
}

Click ‘save’ and check results in the a different browser tab. How did that happen?

The UI leaves a lot to be desired. In a professional context this is no-go (no version control, no syntax highlighting etc.). But everybody uses portal_skins to make quick fixes to sites that are already online.

Vamos a añadir un poco más estilos CSS para hacer nuestro sitio un poco responsive:

@media only screen and (max-width: 980px) {
   #visual-portal-wrapper {
       position: relative;
       width: auto;
   }
}

@media only screen and (max-width: 768px) {
   #portal-columns > div {
       width: 97.75%;
       margin-left: -98.875%;
       clear: both;
   }

   .searchButton,
   .searchSection {
       display: none;
   }
}

Cambia el logotipo

Cambiemos el Logotipo.

• Download a ploneconf logo: http://www.starzel.de/plone-tutorial/ploneconf-logo-2014/image

• Ir a portal_skins / plone_images

• Haga clic en logo.png, luego haga clic en Customize y suba el Logotipo.

Ver también

http://docs.plone.org/adapt-and-extend/change-the-logo.html

portal_view_customizations

Cambiar el pie de pagina

• Ir a portal_view_customizations

• Busque plone.footer, haga clic y personalice

• reemplace el contenido con lo siguiente

  <div i18n:domain="plone"
       id="portal-footer">
     <p>&copy; 2014 by me! |
       <a href="mailto:info@ploneconf.org">
        Contact us
       </a>
     </p>
  </div>
  

Ver también

http://docs.plone.org/adapt-and-extend/theming/templates_css/skin_layers.html

CSS Registry (portal_css)

• Ir a ZMI > portal_css

• en el fondo esta el archivo ploneCustom.css

• Deshabilite Development mode: Los archivos css serán mezclados y teniendo un cache-key.

Nota

The JavaScripts Registry (portal_javascripts) is very similar.

The merging function solves a big problem: we’d like to develop our CSS and JS resources in a granular way, but we’d also like to minimize HTTP requests.

Nota

At the end of a development process, a little rearranging to minimize requests can have a very nice effect. It’s often possible to reduce requests to a very small number for anonymous visitors.

Mas herramientas en el ZMI

Hay muchos mas elementos notables en el ZMI, los visitaremos mas tarde.

• acl_users
• error_log
• portal_properties
• portal_setup
• portal_workflow
• portal_catalog

Resumen

You can configure and customize a lot in Plone through the web. The most important options are accessible in the plone control panel but even more are hidden away in the ZMI. The amount and presentation of information is overwhelming but you’ll get the hang of it through a lot of practice.