Páginas

jueves, 22 de septiembre de 2016

Personalizar los títulos de los posts.

Plantilla → Personalizar → Avanzado → Añadir CSS

*Añadir el código deseado, entero (copiar y pegar), en el recuadro blanco*

TÍTULO CON RECUADRO


.post h3 {
border: 2px solid #000000; /**Grosor y color del recuadro**/
margin:.25em 0 0;
padding:0 0 0px; 
font-size:170%; /**Tamaño del texto**/
line-height:1.4em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

TÍTULO CON LÍNEAS

.post h3 {
border-top: 3px solid #000000; /**Línea superior **/
border-bottom: 3px solid #000000; /**Línea inferior **/
margin:.25em 0 0;
padding:0 0 2px; 
font-size:190%; /**Tamaño del texto**/
line-height:1.9em; /**Altura de la linea inferior**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

TÍTULO CON IMAGEN

.post h3 {
padding-left: 20px;
background: url(URL de la imagen) center left no-repeat;
border-bottom: 3px solid #000000; /**Línea inferior **/
margin:.5em 0 0;
padding:0 0 2px; 
font-size:190%; /**Tamaño del texto**/
line-height:1.9em; /**Altura de**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

TÍTULO CON FONDO DE COLOR

.post h3 {
background: #90cbcd; /**Fondo del recuadro**/
margin:.5em 0 0;
padding:0 0 2px; 
font-size:160%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #ffffff; /**Color del título**/
text-align: center; /**centrar título**/
}

TÍTULO CON COLOR DE FONDO Y BORDE SUPERIOR

.post h3 {
background: #fec2bb;
border-top: 6px solid #fc8296; /**Línea superior**/
margin:.5em 0 0;
padding:0 0 2px; 
font-size:160%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #ffffff; /**Color del título**/
text-align: center; /**centrar título**/
}

TÍTULO CON COLOR DE FONDO Y TODOS LOS BORDES


.post h3 {
background: #f77e90;
border: 3px solid #000000; /**Grosor y color del recuadro**/
margin:.5em 0 0;
padding:0 0 2px; 
font-size:160%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

Aplicar al blog

  • Sobre los códigos...
Border: 2px Solid #000000   Sirve para cambiar el aspecto, de este código debemos de cambiar las variables de border:
- (2px indica el grosor del recuadro) 
-( Solid: indica el estilo del recuadro que puede variar según el ejemplo de las siguientes imágenes) 
__________
Solid
....................
 Dotted
--------------- 
Dashed
========= 
Double
-(#000000: indica el color del recuadro | (En la entrada anterior tenéis el enlace a una web donde conseguir el código del color que queráis).

border-bottom: 3px solid #fb9db6; 
(/**Línea inferior **/)
( /**Línea superior **/)
border-top: 3px dashed #fdcfc0;
border-left: 3px double #ff99cc; ( /**Línea izquierda **/)
( /**Línea derecha**/) border-right: 3px dotted #d4ffea;
Tutorial sacado de aquí

No hay comentarios:

Publicar un comentario