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.
Permite agregar portlets encima e abajo de la sección de contenido.
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:
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.
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:
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.
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.
Esto resulta en la siguiente pantalla:
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.
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.
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%;
}
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%;
}
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%;
}
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%;
}
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%;
}
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%;
}
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%;
}
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.
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.