Personalizar plantilla
Tuesday, May 26th, 2009En estos momentos te introduces en la red y puedes encontrar infinidad de plantillas gratuitas y de pago. El problema viene en que cuando escogemos una que nos gusta en verdad, siempre tiene algo que no nos agrada mucho.
Por eso la mejor manera sería aprender CSS y personalizarla a gusto. Es muy fácil hacerlo, con unos sencillos pasos, en ello solo importa la imaginación de cada uno para ponerla a gusto.
La plantilla más adecuada para modificar es la mínima de Blogger. Con una interfaz muy simple y los códigos bien organizados, lo que permite, si estamos comenzando, sabernos ubicar mejor en el HTML.
Para comenzar la personalización, nos situamos en nuestro Escritorio/Diseño/Edición HTML. No es necesario expandir artilugios, pues solo trabajaremos con CSS:
Ubicamos .post-body { y añadimos un borde con:
border: 1px solid #cc6666;
Comprobaremos en vista previa y veremos que no queda espacio entre el borde y el texto entonces añadiremos más espacio con:
padding: 5px 5px 5px 22px;
Para decorar un poco más ese espacio podemos añadirle también un color de fondo con
background:#ffffff;
O si preferimos una imagen con background:url(’url-de-la-imagen’);
Incluso redondear esas esquinas con:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
( visualizado con Explorer el efecto esquinas redondeadas se pierde y en su lugar quedan líneas rectas)
border: 1px solid #cc6666;
padding: 10px 5px 10px 22px;
background:#ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px; }
El resultado sería el siguiente:
Si deseamos añadir el mismo efecto en el footer y que las etiquetas, autor, fecha y demás también tengan la misma imagen ubicaremos .post-footer { y añadimos las mismas líneas que en .post-body {
Para la sidebar nos encontraríamos con la necesidad de una pequeña modificación en:
.sidebar .widget, .main .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Creamos dos secciones con ese código de forma que sean independientes y eliminamos el anterior.
.sidebar .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Le añadimos las líneas de código igual que en .post-body {
pero solamente en .sidebar .widget {
.sidebar .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
border: 1px solid #cc6666;
padding: 10px 5px 10px 22px;
background:#ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
Mientras hacía esta entrada me entretuve añadiendo una imagen de fondo a la plantilla y unos iconos a los títulos de la sidebar, la diferencia es bien palpable.
Personalizar la plantilla no quiere decir que sigas estos pasos, únicamente se intenta orientar y sobre todo animar para que pierdas el miedo a manipular tu plantilla, seguramente tendrás mil ideas y puedo asegurar que cuando las lleves a la práctica quedarás asombrado de las posibilidades que tenemos a nuestro alcance.
¡Suerte!. ¡Manos a la obra!.
