- Aceite
- Ajo
- Lentejas
La parte de la plantilla dónde se controlan las listas de la barra lateral, suele estar dentro de un apartado más o menos redactado así:
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
}
.sidebar ul { /* Aspecto general de la lista */
list-style-image:none;
margin:5px 0 0 35px;
padding:0 0 0;
}
.sidebar li { /* Aspecto de los elementos */
margin:0;
padding:0 0 .25em 10px;
text-align:left;
text-indent:-15px;
line-height:1.5em;
}
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
}
.sidebar ul { /* Aspecto general de la lista */
list-style-image:none;
margin:5px 0 0 35px;
padding:0 0 0;
}
.sidebar li { /* Aspecto de los elementos */
margin:0;
padding:0 0 .25em 10px;
text-align:left;
text-indent:-15px;
line-height:1.5em;
}
PADDING y MARGIN sirven para dejar espacios fijos desde los márgenes hasta el principio y final del texto.
TEXT-ALIGN regula la alineación del texto.
TEXT-INDENT sirve para fijar un sangrado en la primera línea de cada elemento.
Con esto ya podemos cambiar un poco el formato de nuestros listas, pero para controlar el símbolo que sale delante de los elementos de la lista, hay que utilizar LIST-STYLE-TYPE. Se formula como se explica a continuación y en función del valor que le pongamos, muestra un símbolo u otro...
Sintaxis: list-style-type: VALOR;
Valores posibles: disc / circle / square / decimal / lower-roman - upper-roman / lower-alpha / upper-alpha / none
Por ejemplo, con la línea list-style-type:square; el circulito macizo (disc) que viene por defecto en las listas, se transforma en un cuadrado:
- Aceite
- Ajo
- Lentejas
Otra variante para gente más imaginativa y que guste de desarrollar sus propios diseños, se puede lograr con LIST-STYLE-IMAGE, que habría que poner como list-style-image: url(DIRECCIONDELAIMAGEN);
En este último caso, la lista podría quedar como:
Para terminar, si lo que se desea es cambiar sólo una lista determinada de la barra lateral, habrá que aplicar el estilo deseado, directamente en el artilugio concreto. Para ello, pinchar en Expandir Plantillas de Artilugios y buscar la lista que queremos cambiar, que tendrá un código parecido a éste:
Hay que poner dentro de <ul> lo que queramos con el formato <ul style="LIST-STYLE-TYPE: valor"> o <ul style="LIST-STYLE-IMAGE: url(URLDELAIMAGEN)"> según se ha explicado antes. Ojo que ahora no ponemos el ; final.
En este último caso, la lista podría quedar como:
- Aceite
- Ajo
- Lentejas
Para terminar, si lo que se desea es cambiar sólo una lista determinada de la barra lateral, habrá que aplicar el estilo deseado, directamente en el artilugio concreto. Para ello, pinchar en Expandir Plantillas de Artilugios y buscar la lista que queremos cambiar, que tendrá un código parecido a éste:
<b:widget id='LinkList2' locked='false' title='Nos gustan' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Hay que poner dentro de <ul> lo que queramos con el formato <ul style="LIST-STYLE-TYPE: valor"> o <ul style="LIST-STYLE-IMAGE: url(URLDELAIMAGEN)"> según se ha explicado antes. Ojo que ahora no ponemos el ; final.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Este me salió fácilmente. Pero sigo observando que los cambios salen distintos en explorer y en firefox. Y me gusta más firefox.
ResponderEliminarY gracias, gracias, gracias.
hola! Anduve buscando mucho esta referencia para cambiar viñetas en mi blog!!! Mil gracias por el dato!!!
ResponderEliminarHola Oloman de nuevo soy Priamo/Anonimo.Al comentario anterior por favor añade esta otra incidencia.
ResponderEliminarHago el Menu expandible con la aplicacion My cool button y lo pongo en el blog:funciona y lo VEO.
Al cabo de una rato cuando regreso al blog, el diseño del boton que creé no aparace aunque funciona pero repito no se ve Boton.
Un saludo y gracias por todo
Priamo, el atributo que regula eso es el "text-indent".
ResponderEliminarSi no se ve el botón es porque la dirección de la correspondiente imagen no es la correcta o lo alojaste en algún sitio chunguillo.
Tampoco es muy raro que las imágenes guardadas en algunos servicios buenos de alojamiento, "desaparezcan" temporalmente. Supongo que es por cuestión de saturación de peticiones.
hola quisiera saber como cambiar la viñeta tradicional por una imagen en una entrada de blogger
ResponderEliminarEn esta entrada está esto mismo un poco más desarrollado y completo. Pincha en el enlace para echar un vistazo. Un saludo.
ResponderEliminarBuenas Oloman, acabo de utilizar este tip en mi blog wwww.marketingonlinevalencia.org pero las imagenes que he utilizado para las viñetas quedan algo encima de los enlaces ... como puedo solucionarlo.
ResponderEliminarGracias por anticipado
Marketing Online, echa un vistazo al penúltimo código (apunte sobre el padding) de esta entrada.
ResponderEliminarBuenas Oloman, tenia este tema algo olvidado, veras lo que he hecho en mi blog ha sido colocar este codigo en el css del widget
ResponderEliminar.widget ul { /* Aspecto general de la lista */
list-style-image: url(http://3.bp.blogspot.com/_Q66c6maqcxs/TRtCRWCBdhI/AAAAAAAABck/EPhQwOj-cGk/s1600/icon_bullet.png);
margin:5px 0 0 35px;
padding:0 0 0;
}
Me ha servido para modificar las viñetas pero a pesar de leer el enlace que me pasaste no podido solucionar el desajuste de alturas, meti el codigo display block pero nada, alguna idea
Marketing no conozco otra forma de recolocar las imágenes de las viñetas mas que la que expliqué allí. Te hago notar que tú has puesto las tuyas dentro de un list-style-image. Sin embargo, lo que yo proponía allí es que esa propiedad se anulara (none) y que en su lugar se usara un background desplazado, directamente en .widget ul li
ResponderEliminarEse sistema porque lo que puedes ver en la entrada enlazada, funciona.
Hola Oloman.
ResponderEliminarQuisiera que ma ayudaras con mi Blog. Quiero quitar las viñetas pero sólo a la lista de páginas de la sidebar pero cuando lo intento, el efecto se da para todas las listas de la misma. No se mucho del tema por eso aunque la presente nota puede ser muy clara para muchos, para mi no es tanto.
Agradezco de antemamo tu colaboración
Ahora mismo no lo tienes en tu blog, pero para anular el estilo general en una lista en concreto, has de localizar la clase o ID del artilugio en cuestión y añadir un list-style:none; a esa clase + ul.
EliminarPor ejemplo para el de tu lista de entradas sería:
#random-posts ul {
list-style: none;
}
Hola Oloman. Tengo una duda con este tema. Cuando pongo el código para cambiar las viñetas me aparecen dobles: las originales del puntito (las de toda la vida) y justo al lado estas. Supongo que tengo que borrar algún código más, pero no se me ocurre dónde mirar. Ahora mismo lo tengo quitado porque queda un poco feo. Lo que hago es añadir el código correspondiente antes de
ResponderEliminar¡Gracias por tu ayuda!
Hola Marina. Si no lo veo no puedo saber que ocurre. Además no salió el código que supongo intentaste poner.
Eliminar