Document Actions
Send this page to somebody Print this page

Portlets y estilos de navegación

Agregando estilos propios a los portlets y al árbol de navegación.

Alexander Limi

En este tutorial, Alexander Limi de Plone Solutions describe como cambiar completamente el estilo visual de un sitio Plone a partir de un sitio por defecto. Valido para Plone 2.1.x y Plone 2.5.x
Page 12 of 15.

Una de las cosas mas difíciles de hacer es personalizar la navegación. Posee una estructura compleja y se complica especialmente cuando se desea poseer diferentes estilos en distintos niveles — por ejemplo, diferentes colores en el segundo y tercer nivel de navegación. Afortunadamente, Plone provee varias clases CSS para ser usadas en estos casos y la mejor recomendación que puedo darte es que uses rigurosamente el DOM inspector para saber qué clases tenés que manipular.
Nosotros hemos elegido un estilo sencillo por motivos didácticos.

Primero, cambiamos estilos básicos de portlets y breadcrumb — agregá el siguiente CSS:

    /* Navegacion */
#portal-breadcrumbs {
margin: 1em 1em 1em 19em;
}

#portal-breadcrumbs {
display: none;
}

.portlet dt {
background-color: #d3cebc;
margin-bottom: 0.5em;
display: block;
padding: 0.2em 0.5em;
}

.portlet dd {
margin-left: 0;
}

.portlet a {
text-decoration: none;
}

.portletItem {
padding: 0.5em;
}

.portletFooter {
border-bottom: 1px dashed #c9c4c0;
padding: 0.5em;
text-align: right;
}

.portletItemDetails {
text-align: right;
display: block;
color: black;
}

Luego agregamos elementos específicos a la navegación:

    .portletNavigationTree {
padding-left: 0;
}

#portlet-navigation-tree .portletHeader {
display: none;
}

.portletNavigationTree a {
background-color: #d3cebc;
margin-bottom: 0.5em;
display: block;
padding: 0.2em 0.5em;
}

.navTreeItem {
display: inline;
list-style: none;
list-style-image: none;
}

.navTreeItem a,
.navTreeItem a:visited {
text-decoration: none;
color: #463229;
}

.portletNavigationTree a:hover,
.navTreeCurrentItem {
color: #d3cebc !important;
background-color: #463229 !important;
}

Estas líneas pueden parecer complejas si no has visto CSS antes, pero podes ir agregando de a una para ver progesivamente que hace cada una. Si recargás la página, deberías tener algo similar a:

Wow, ahora estamos encaminados. Comienza a verse como un buen diseño ahora, solo necesitmas refinar los márgenes y el posicionamiento.
 
by Alexander Limi — last modified 2008-01-31 09:55
Contributors: Traducción: Roberto Allende

Copyright (C) 2004-2007 Menttes - All Rights Reserved