Content Well Portlets

En esta articulo es una traducción actualizada del articulo en Portugués ContentWellPortlets — Tutorial Plone 4, el cual busca explicar la instalación del producto ContentWellPortlets.

¿Qué hace?

Permite agregar portlets encima e abajo de la sección de contenido.

¿Cómo instalarlo?

La instalación de este producto se realiza usando la herramienta zc.buildout para esto usted tiene que agregar el producto a las secciones eggs y zcml (si es necesario) de archivo buildout.cfg como se muestra a continuación:

eggs =
    Products.ContentWellPortlets

Indicar al recipe plone.recipe.zope2instance que instale una configuración ZCML-slug, como se muestra a continuación:

zcml =
    Products.ContentWellPortlets

Luego ejecute el script buildout, de la siguiente forma:

$ ./bin/buildout -vN

Con este comando busca el paquete en el repositorio PyPI, descarga e instala el producto en su instancia Zope para sus sitios Plone allí hospedados.

Entonces inicie la Instancia de Zope, de la siguiente forma:

$ ./bin/instance fg

Luego de esto ya tiene disponible el producto para ser habilitado en cada sitio Plone dentro de su Instancia de Zope como se describe a continuación:

Habilitarlo en Plone

En Plone 4 acceda a la Configuración del sitio ‣ Complementos y marque la casilla llamada ContentWellPortlets y luego presione el botón Habilitar.

En Plone 3 (versiones anteriores) acceda a la Configuración del sitio ‣ Productos Adicionales y marque la casilla llamada ContentWellPortlets y luego presione el botón Instalar.

Configuración del Content Well Portlets

Después de haber realizado la instalación del producto, todas las páginas presentaran dos o tres nuevos enlaces, como se muestra a continuación:

Arriba del contenido

Arriba del contenido

El enlace Agregar, editar o eliminar un portlet encima del contenido conduce a la página Administrar portlets situados sobre el contenido de la página.


Abajo del contenido

Abajo del contenido

El enlace Agregar, editar o eliminar un portlet a continuación del contenido lleva a la página de Administrar portlets situados por debajo del contenido y el enlace Añadir, editar o eliminar un portlet en el pie de página conduce la página de Administrar portlets situados en la parte inferior de la página.

La interfaz estos casos es la misma, es posible disponer los portlets en tres columnas diferentes (A, B y C) y colocar mas de un portlet por columna.

Agregar Portlet de Calendario en Caja para portlet B encima del contenido

Agregar Portlet de Calendario en Caja para portlet B encima del contenido.

Esto resulta en la siguiente pantalla:

Un portlet de Calendario el contenido de la página

Un portlet de Calendario el contenido de la página

Aplicando estilos a portlets

Las columnas permiten una mayor libertad para la manipulación visual de los portlets usando estilos CSS, ya que cada columna corresponde a un div y class diferente.

  • Los viewlets están contenidas dentro de un div que tiene un atributo id de CSS.
  • Para cada portlet manager en el viewlet se encuentra en un div que tiene un atributo class de CSS, ya que pueden ser utilizados para ser estilizado.

A continuación se muestra algunos ejemplos de CSS muestra que le permitirá trabajar para generar diferentes diseños (aunque le toca a usted probar que funcione en todos los navegadores que son importantes para sus usuarios).

Simplemente copie y pegue el código css para el tipo de presentación que estés buscando en tu propia hoja de estilo del producto del tema, o en el directorio portal_skins/ploneCustom.css en el ZMI.

Si experimenta problemas con una de las áreas de portlets (generalmente el derecho más alejado) que caen por debajo de la otra(s), intente definir margin:0 y padding:0 sobre las clases .AbovePortletManager1, .portletAboveContentB, etc.

Todos los ejemplos están escritos para los portlets por encima del contenido. Para los portlets por debajo del contenido situados y portlets en el pie de página simplemente debe sustituir el identificador de clase adecuada. Por lo tanto, .AbovePortletManager1 llegaría a ser .portletsBelowContentManager1 o .FooterPortletManager1.

Truco

Los siguientes ejemplos muestran portlets para arriba (AbovePortletManager), para los portlets debajo y portlets de pie de página son similares.

Los estilos CSS para portlets tengan la misma anchura. Tenga en cuenta que no hay margins o paddings establecidos en estos ejemplos.

Seis columnas arriba del contenido

A continuación, un ejemplo de estilos CSS para mostrar 6 portlets, ubicados a la izquierda con 16.6% del ancho cada uno:

/* --- Six Column Above Layout ---- */
.cell .AbovePortletManager1,
.cell .AbovePortletManager2,
.cell .AbovePortletManager3,
.cell .AbovePortletManager4,
.cell .AbovePortletManager5,
.cell .AbovePortletManager6 {
      float: left;
      width: 16.6%;
}

Cinco columnas arriba del contenido

A continuación, un ejemplo de estilos CSS para mostrar 5 portlets, ubicados a la izquierda con 20% del ancho cada uno:

/* --- Five Column Above Layout ---- */
.cell .AbovePortletManager1,
.cell .AbovePortletManager2,
.cell .AbovePortletManager3,
.cell .AbovePortletManager4,
.cell .AbovePortletManager5,  {
      float: left;
      width: 20%;
}

Cuatro columnas arriba del contenido

A continuación, un ejemplo de estilos CSS para mostrar 4 portlets, ubicados a la izquierda con 25% del ancho cada uno:

/* --- Four Column Above Layout ---- */
.cell .AbovePortletManager1,
.cell .AbovePortletManager2,
.cell .AbovePortletManager3,
.cell .AbovePortletManager4 {
      float: left;
      width: 25%;
}

Tres columnas arriba del contenido

A continuación, un ejemplo de estilos CSS para mostrar 3 portlets, ubicados a la izquierda con 33% del ancho cada uno:

/* --- Three Column Above Layout ---- */
.cell .AbovePortletManager1,
.cell .AbovePortletManager2,
.cell .AbovePortletManager3 {
      float: left;
      width: 33%;
}

Dos columnas arriba del contenido

A continuación, un ejemplo de estilos CSS para mostrar 2 portlets, ubicados a la izquierda con 50% del ancho cada uno:

/* --- Two Column Above Layout ---- */
.cell .AbovePortletManager1,
.cell .AbovePortletManager2 {
      float: left;
      width:50%;
}

Ejemplos de tres columnas con anchos variantes

A continuación, un ejemplo de estilos CSS para mostrar 3 portlets, uno portlet con la mitad del ancho (50%) de la página y 2 portlets de la derecha que se dividen el resto del ancho (25%):

.cell .AbovePortletManager1 {
      float: left;
      width: 50%;
}

.cell .AbovePortletManager2,
.cell .AbovePortletManager3 {
      float: left;
      width: 25%;
}

A continuación, un ejemplo de estilos CSS para mostrar 3 portlets, uno portlet de 40% de ancho a la izquierda de la página y con 2 portlets a la derecha de 60% de ancho cada uno:

.cell .AbovePortletManager1 {
      float: left;
      width: 40%;
}

.cell .AbovePortletManager2,
.cell .AbovePortletManager3 {
      float: right;
      width: 60%;
}

Ejemplos de cuatro columnas con anchos variantes

A continuación, un ejemplo de estilos CSS para mostrar 4 portlets, uno portlet de 40% de ancho de la página con el segundo portlet de 60% de ancho y 2 portlet más abajo que son de 30% de ancho cada uno:

.cell .AbovePortletManager1 {
  float: left;
  width: 40%;
}

.cell .AbovePortletManager2 {
  float: right;
  width: 60%;
}

.cell .AbovePortletManager3,
.cell .AbovePortletManager4 {
  float: right;
  width: 30%;
}

A continuación, un ejemplo de estilos CSS para mostrar 4 portlets con diferentes anchos, 2 portlet a la izquierda con 15% de ancho, el tercer portlet es de 40% de ancho, el cuarto portlet es 30% de ancho:

.cell .AbovePortletManager1,
.cell .AbovePortletManager2 {
      float: left;
      width: 15%;
}

.cell .AbovePortletManager3 {
      float: left;
      width: 40%;
}

.cell .AbovePortletManager4 {
      float: left;
      width: 30%;
}

Descarga código fuente

Usted puede obtener el código fuente usado en estas configuraciones buildout para este ejemplo, ejecutando el siguiente comando:

$ git clone https://github.com/plone-ve/plonethemes.suite.git

Luego de descargar este código fuente, es recomendable leer el archivo README.rst y siga las instrucciones descrita en ese archivo.

los comentarios son proporcionados por Disqus

Editar este documento

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.

  1. Vaya hacia el articulo Content Well Portlets en GitHub.
  2. Presione el botón Fork. Este creara su propia copia personal de la documentación.
  3. Edite los archivos usando el editor de texto de GitHub desde su navegador Web
  4. Rellene en la caja de texto Commit message al final de la pagina indicando por que usted realizo estos cambios. Presione el botón Propose file change próximo a ese cuando haya finalizado.
  5. Luego diríjase a la página Send a pull request (no será necesario rellenar ningún texto adicional). Sólo tiene que pulsar el botón Send pull request.
  6. Sus cambios serán consultados por un revisor dentro de la pestaña Pull requests del proyecto en Github.

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.