Personalizar las viñetas del blog
Labels:
Trucos
at
martes, noviembre 25, 2014
Para personalizar la Lista desordenada o Listas con viñetas del blog hay que saber es que es la propiedad básica que controla el tipo que se muestra se denomina list-style-type.
Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta formada por un pequeño círculo de color negro (Disc).
Otras dos propiedades que podemos usar son: Circle(círculo vacío), Square(cuadrado relleno)
Una lista de viñetas puede formarse manualmente de este modo:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento3</li>
</ul>
O usando el botón del editor de entradas
Podemos usar otras propiedades para darle otro aspecto.
Para cambiar la forma tradicional de tus viñetas entra en:
Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado
En el recuadro pegar el Código CSS:
- Con una imagen
/*viñetas
---------------*/
.post ul {
margin:0 0 1.25em;
list-style:none;
}
.post ul li{
color: #2eb9ff;
background:url(URL de la imagen) no-repeat 1px;
margin:0;
padding:0px 1px 1px 30px;
line-height:1.4em;
}
Cambiar el color del texto en color:
En URL de la imagen poner la dirección de tu imagen.
Ajustar las medidas de margin y padding hasta que quede bien ya que depende de cada plantilla.
- Si lo que quieres es solo cambiar el estilo poner este código:
/*viñetas
---------------*/
.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}
.post ul li {
margin: 0;
padding: 0 0 0 10px;
}
Donde dice list-style: poner circle o square.
Estas mismas propiedades puedes aplicarlas para las viñetas de la sidebar sólo cambia
.post ul {
.post ul li {
Por:
.sidebar ul {
.sidebar ul li {
Generalmente la barra lateral tiene otras medidas de espacio por lo que tendrás que ajustar el margin y padding hasta que quede bien.
Si te gusta la entrada compártela.
¡Gracias!
Copyright © 2013
Cambio-Cambie Blogger
Diseñado por CCB Desarrollado por Blogger
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.
►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>
No olvides suscribirte para recibir las actualizaciones