Document Actions
Send this page to somebody Print this page

Estilos de listas

Haciendo que las listas se muestren en una sola línea y sin puntos.

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 11 of 15.

Ahora, tenemos muchas listas no ordenadas que son empladas con fines estucturales (tambien conocidos como semáticos) y deberían estár todos en una misma línea. CSS al rescate:

    /* Site actions / search / personal bar */
#portal-siteactions {
list-style-image: none;
list-style-type: none;
float: right;
}

#portal-siteactions li {
display: inline;
border-left: 1px solid #463229;
padding-left: 0.5em;
}

#portal-siteactions li a {
text-decoration: none;
}

#portal-searchbox {
float: right;
clear: right;
}

#portal-personaltools {
float: right;
margin: 0.5em 0;
padding: 0;
}

#portal-personaltools li {
display: inline;
list-style: none;
list-style-image: none;
}

#portal-personaltools li a {
text-decoration: none;
margin-right: 1em;
}

.documentActions {
float: right;
margin: 0.4em 0 0 0.5em;
padding: 0;
}

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

.documentActions {
display: none;
}

Notar que si bien esto es un poco repetitivo, es escencialmente setear la misma propiedad en estructuras diferentes - logrando que se muestren en la misma línea inline en vez de una debajo de la otra, y quitando el punto del inicio de la línea.

Esto puede venir arreglado en Plone 2.5 y posteriores, como parte del archivo invisibles.css )

Si recargas la página tenemos:

Bien, esto hace las cosas mucho mas limpias, no ?
 
by Alexander Limi — last modified 2008-01-31 13:55
Contributors: Traducción: Roberto Allende

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