Configurar el estilo de viñetas | Oloblogger Nos referimos al estilo (sangrado y símbolos) CSS, con que puede formatear la salida de una lista como ésta: Aceite Ajo Lentejas La parte d...

15 de noviembre de 2007

Configurar el estilo de viñetas

Nos referimos al estilo (sangrado y símbolos) CSS, con que puede formatear la salida de una lista como ésta:
  • 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;
}

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:
  • 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>

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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

15 comentarios :

  1. Este me salió fácilmente. Pero sigo observando que los cambios salen distintos en explorer y en firefox. Y me gusta más firefox.

    Y gracias, gracias, gracias.

    ResponderEliminar
  2. hola! Anduve buscando mucho esta referencia para cambiar viñetas en mi blog!!! Mil gracias por el dato!!!

    ResponderEliminar
  3. Hola Oloman, donde debo situarme para controlar el espacio que hay entre el "cuadrado" y el texto (en tu caso "Aceite". En mi caso me sale mucha separcion entre el simbolo y el nombre.
    mi blog en pruebas: priamo24.blogspot.com

    agradecido

    ResponderEliminar
  4. Hola Oloman de nuevo soy Priamo/Anonimo.Al comentario anterior por favor añade esta otra incidencia.
    Hago 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

    ResponderEliminar
  5. Priamo, el atributo que regula eso es el "text-indent".

    Si 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.

    ResponderEliminar
  6. hola quisiera saber como cambiar la viñeta tradicional por una imagen en una entrada de blogger

    ResponderEliminar
  7. En esta entrada está esto mismo un poco más desarrollado y completo. Pincha en el enlace para echar un vistazo. Un saludo.

    ResponderEliminar
  8. Buenas 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.

    Gracias por anticipado

    ResponderEliminar
  9. Marketing Online, echa un vistazo al penúltimo código (apunte sobre el padding) de esta entrada.

    ResponderEliminar
  10. Buenas Oloman, tenia este tema algo olvidado, veras lo que he hecho en mi blog ha sido colocar este codigo en el css del widget

    .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

    ResponderEliminar
  11. 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

    Ese sistema porque lo que puedes ver en la entrada enlazada, funciona.

    ResponderEliminar
  12. Hola Oloman.
    Quisiera 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

    ResponderEliminar
    Respuestas
    1. 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.

      Por ejemplo para el de tu lista de entradas sería:
      #random-posts ul {
      list-style: none;
      }

      Eliminar
  13. 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

    ¡Gracias por tu ayuda!

    ResponderEliminar
    Respuestas
    1. Hola Marina. Si no lo veo no puedo saber que ocurre. Además no salió el código que supongo intentaste poner.

      Eliminar