Enmarcar los títulos de nuestros post

Como podemos enmarcar los títulos de nuestras entradas?

Vamos a explicar de una forma muy fácil y sencilla como podemos enmarcar los títulos de nuestras entradas.
Como siempre digo, tenemos que hacer una copia de seguridad de nuestras plantilla por si algo no sale bien.
Para ello nos vamos a:
Plantilla> Editar HTML > Crear restablecer copia de segudiad.

Nos descargamos la plantilla completa de nuestro blog y la guardamos en el disco duro de nuestro ordenador.
Una vez tengamos descargada nuestra plantilla, damos al botón de editar HTML

 Ahora damos a Ctrl+F y buscamos dentro de nuestra plantilla

/*Posts .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor;

Vamos a ver este resultado

Entrada de nuestro post

Ahora para cambiarlo como se muestra en la imagen cambiaremos estas partes del código.

color:$titlecolor; y lo sustituimos por este código:

background-color: #edfffa;

Si queremos centrar el título del post añadiremos:
text-align:center;

Podemos añadir también un borde pegando en el mismo sitio el siguiente código:
border: solid #b991af;


Al final el código lo dejaríamos de la siguiente forma:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
background-color: #edfffa;
text-align:center;
border: solid #b991af; 2px
}

Modificar el código

background-color: #edfffa;(color de fondo)
text-align:center; ( lugar de la escritura, en este caso centrado)
border: solid #b991af;( solid es el estilo del borde) #b991af (color del borde
(line-height:1.4em;) grosor del marco el tipo de borde (dotted)

También podríamos poner una imagen de fondo cambiando
 background-color: por background-image: url
En la imagen de arriba muestro los diferentes tipos de bordes que se pueden usar.


Imprimir entrada