Tutorial: Personalizar el borde del blog

¡Hola!

Retomando un poco los tutoriales (y teniendo en cuenta que nunca termino de estar conforme con el diseño del blog) hoy os traigo este tutorial sacado totalmente de Proyecto Blog Perfecto, donde nos explica como dar estilo al borde del blog.

Recordad que el tutorial lo explico con mis palabras, pero si os quedáis con dudas, pasar por el tutorial original, que está muy bien explicado.

Vamos a ello:


-Como siempre (y muy importante) realizamos una copia de seguridad de la plantilla actual. Esto nos ayudará a asegurar la vuelta atrás en el caso de que algo no salga bien.

-Una vez hecha la copia de seguridad, nos vamos a Plantilla -> editar HTML
y (con ayuda de Ctrl+F) buscamos la línea

 .content-inner {

Justo debajo de la línea que acabamos de buscar debemos pegar el código del borde elegido:

CÓDIGO PARA BORDE REDONDO:

padding: 10px 15px;
border-radius: 50px 50px 50px 50px;

 

CÓDIGO PARA 2 BORDES REDONDOS:


padding: 10px 15px;
border-radius: 0px 60px 60px 0px;






Para poder modificar las propiedades del borde, hay que añadir justo debajo el siguiente código:

border-right: 3px dashed #8A0868;

border-left: 3px dashed #8A0868;

border-top: 3px dashed #8A0868;

border-bottom: 3px dashed #8A0868;

Donde:

3px es el grosor del borde.

Dashed es el estilo del borde (podemos cambiarlo por solid si lo queremos entero, dashed si queremos que salgan guiones o dotted si preferimos puntos)

#8A0868 es el color del borde. Podéis elegir el color en HTML en ésta pagina, aunque hay muchas más.

Os dejo algunas capturas del resultado final, para que veáis que queda muy bien y es muy sencillo.

Bordes redondeados, estilo Dashed.

Bordes redondeados, estilo Solid.

Bordes redondeados, estilo Dotted.

Bordes desiguales, estilo Solid.

Como veis, es cuestión de ir probando hasta que encontréis el estilo que más os gusta.

Recordad que debemos darle a vista previa de plantilla para comprobar que todo está a nuestro gusto (y que no se ha cambiado nada por arte de magia xD) y una vez que lo tengamos claro guardamos plantilla y listo!