Añadir iconos en los títulos de las entradas es una de esas preguntas que se repite con frecuencia, hace tiempo veíamos como añadir una imagen de fondo o color hoy añadiremos un pequeño icono o bullet.
Los estilos de los títulos en los post en una plantilla Minima vienen definidos de la siguiente forma.
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$titlecolor;
}
Añadimos el icono.
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background: url(url del icono) no-repeat 0 .5em;
padding-left: 20px;
}
Con padding-left ajustamos la distancia entre el icono y el título.
Para ajustarlo de altura podemos aumentar o disminuir el valor 0 .5em
Y ya puestos si queremos es el momento de cambiar de estilo, tamaño y color de fuente.
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
font-family: "Century Gothic",Trebuchet MS,sans-serif;
font-size: 24px;
color:#000;
font-weight:normal;
}
Para añadir unos estilos que resulten diferentes al pasar el ratón un ejemplo sería:
.post h3 strong, .post h3 a:hover {
color: #1B703A;
font-size: 24px;
}
En WEBSITEBULLETS encontraréis bullets para decorar los títulos de los post.
0 comentarios:
Publicar un comentario