Personalizar el blog haciendo uso de generadores CSS

En la anterior entrada veíamos un generador de CSS3 que nos proporciona el código y sería algo así: Ver código

-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-box-shadow: 1px 1px 7px #20B2AA;
-moz-box-shadow: 1px 1px 7px #20B2AA;
box-shadow: 1px 1px 7px #20B2AA;
text-shadow: 0px 0px 2px #000000;
background-image: -moz-linear-gradient(top, #20B2AA, #E0FFFF);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #20B2AA), color-stop(1.0, #E0FFFF));
background-color: #DDDDDD;
padding: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11pt;
color: #FFFFFF;
text-align: left;

Para hacer uso de ese código tenemos que localizar el lugar que deseamos aplicar esas propiedades.

Para personalizar los post, buscamos en la plantilla:

.post {

aquí añadimos el código

margin:.5em 0 1.5em;

padding-bottom:1.5em;

}

Si lo que deseamos es personalizar los gadgets de la sidebar buscamos:

.sidebar .widget {

aquí añadimos el código

margin:0 0 1.5em;

padding:0 0 1.5em;

}

Bloque que acoge la sidebar:

#sidebar-wrapper {

aquí añadimos el código

width: 220px;

float: $endSide;

word-wrap: break-word;

overflow: hidden;

}

Header o cabecera:

#header-wrapper {

aquí añadimos el código

width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Bloque que acoge todas las entradas:

#main-wrapper {

aquí añadimos el código

width: 410px;

float: $startSide;

word-wrap: break-word;

overflow: hidden;

}

Footer:

#footer {

aquí añadimos el código

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Bloque que acoge todo el blog:

#outer-wrapper {

aquí añadimos el código

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Todos esos bloques tienen contenido y es probable que tengamos que ajustar el padding de forma que quede espacio suficiente de separación entre contenido y borde.

Tendremos en cuenta también que si lo que deseamos es añadir fondo y borde no es necesario hacer uso de las opciones para texto:

font-family: Verdana, Geneva, sans-serif;

font-size: 11pt;

color: #FFFFFF;

text-align: left;

Es innecesario añadirlas porque esas propiedades ya las tenemos en nuestra plantilla, igual que ocurre con padding.

Para añadir un gadget de HTML podemos añadir en la plantilla antes de ]]></b:skin> una clase  en este caso "gadget-html" en este caso si añadimos todo el código que nos proporciona el generador porque son estilos que no tenemos añadidos a la plantilla.

#gadget-html {

aquí todo el código del generador

}

Editamos un gadget de HTML y en su interior añadimos:

<div id="gadget-html">

Aquí añadimos el contenido.

</div>