Portlets y estilos de navegación
Alexander Limi
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:
