Enmarcar o poner bordes a secciones de un blog

Algunas plantillas no delimitan de una forma definida las diferentes secciones de un blog. Utilizando bordes podemos definir o encuadrar esas secciones. Veamos cómo lograr esas delimitaciones, tanto para las plantillas antiguas como para las nuevas. Para todos los casos vamos a Editar HTML: Diseño ► Editar HTML ► Click dentro del editor ► Ctrl+f ► Localizamos la siguiente etiqueta poniéndola dentro del rectángulo de búsqueda (search): ]]></b:skin> ...y antes de la misma pegamos los códigos escogidos entre los indicados más adelante, según el borde o los bordes que vamos a poner. Para plantillas antiguas Sección cabecera Para enmarcar la cabecera, obviamente en los los blogs que no la tengan enmarcada, pegamos, en donde se indicó arriba, el siguiente código: #header-wrapper {   border:1px solid #fe4a4a;   } Para poner únicamente borde superior, el código a pegar es el siguiente: #header-wrapper {   border-top:1px solid #fe4a4a;   } Para poner únicamente borde inferior cambiamos,  top  por  bottom  Para poner únicamente borde izquierdo cambiamos,  top  por  left  Para poner únicamente borde derecho cambiamos,  top  por  right  Para poner bordes superior e inferior éste es el código: #header-wrapper {   border-top:1px solid #fe4a4a;   border-bottom:1px solid #fe4a4a;   } Para poner bordes izquierdo y derecho éste es el código: #header-wrapper {   border-left:1px solid #fe4a4a;   border-right:1px solid #fe4a4a;   } Hemos puesto a los bordes las siguientes propiedades:  1px : que es el grosor del borde. Si lo queremos más grueso aumentamos el número de pixeles.  solid : asigna al borde línea continua. Esta propiedad tiene estas alternativas:  dotted : asigna al borde línea punteada.  dashed : asigna al borde línea discontinua.  groove : asigna al borde línea tipo ranura (para distinguir esta proiedad hay que aumentar el número de pixeles).  double : asigna al borde línea doble (para distinguir esta proiedad hay que aumentar el número de pixeles).  ridge : asigna al borde línea con sombra (para distinguir esta proiedad hay que aumentar el número de pixeles).  inset : asigna al borde línea con prespectiva hacia adentro (para distinguir esta proiedad hay que aumentar el número de pixeles).  outset : asigna al borde línea con prespectiva hacia afuera (para distinguir esta proiedad hay que aumentar el número de pixeles). Si queremos utilizar una de las anteriores propiedades la ponemos en el lugar de  solid , eliminando ésta.  #fe4a4a : es el código hexadecimal del color del borde. Lo cambiamos por el que nos convenga.   Sección entradas Para enmarcar la sección de las entradas pegamos, en donde se indicó al principio del tutorial, el siguiente código: .post-outer {   border:1px solid #fe4a4a;   padding:3px;   } Para poner un solo borde, o dos, o combinarlos, o cambiar sus propiedades, seguimos el mismo procedimiento utilizado con la cabecera, utilizando, obviamente el  .post-outer  y cuidando de conservar el  padding:3px;  Con el anterior procedimiento aplicamos marco o bordes únicamente al texto de la entrada, incluído el título. Si queremos poner marco o bordes a toda la columna en donde se encuentra la entrada, incluyendo la fecha y los elementos que hayamos agregado encima y debajo del cuerpo de las entradas, el código que debemos pegar es: #main-wrapper {   border:1px solid #fe4a4a;   padding:3px;   } Siguiendo el mismo procedimiento para variaciones y combinaciones   Sección sidebar Para enmarcar la sección correspondiente a la sidebar pegamos, en donde se indicó al principio del tutorial, el siguiente código: #sidebar-wrapper {   border:1px solid #fe4a4a;   } Siguiendo el mismo procedimiento para variaciones y combinaciones.   Para plantillas nuevas Sección cabecera Para enmarcar la cabecera el código que debemos pegar, antes de la etiqueta: ]]></b:skin> ...es el siguiente: .header-outer{   border:1px solid #fe4a4a; } Para poner únicamente borde superior, el código a pegar es el siguiente: .header-outer {   border-top:1px solid #fe4a4a;   } Para poner únicamente borde inferior cambiamos,  top  por  bottom  Para poner únicamente borde izquierdo cambiamos,  top  por  left  Para poner únicamente borde derecho cambiamos,  top  por  right  Para poner bordes superior e inferior éste es el código: .header-outer {   border-top:1px solid #fe4a4a;   border-bottom:1px solid #fe4a4a;   } Para poner bordes izquierdo y derecho éste es el código: .header-outer {   border-left:1px solid #fe4a4a;   border-right:1px solid #fe4a4a;   } Hemos puesto a los bordes las siguientes propiedades:  1px : que es el grosor del borde. Si lo queremos más grueso aumentamos el número de pixeles.  solid : asigna al borde línea continua. Esta propiedad tiene estas alternativas:  dotted : asigna al borde línea punteada.  dashed : asigna al borde línea discontinua.  groove : asigna al borde línea tipo ranura (para distinguir esta proiedad hay que aumentar el número de pixeles).  double : asigna al borde línea doble (para distinguir esta proiedad hay que aumentar el número de pixeles).  ridge : asigna al borde línea con sombra (para distinguir esta proiedad hay que aumentar el número de pixeles).  inset : asigna al borde línea con prespectiva hacia adentro (para distinguir esta proiedad hay que aumentar el número de pixeles).  outset : asigna al borde línea con prespectiva hacia afuera (para distinguir esta proiedad hay que aumentar el número de pixeles). Si queremos utilizar una de las anteriores propiedades la ponemos en el lugar de  solid , eliminando ésta.  #fe4a4a : es el código hexadecimal del color del borde. Lo cambiamos por el que nos convenga.   Sección entradas Para enmarcar las entradas el código que debemos pegar antes de la etiqueta   ]]></b:skin>  , es el siguiente: .post-outer { border:1px solid #fe4a4a; padding:3px; } Dependiendo de la plantilla que utilicemos, el anterior código puede funcionar o no. Miramos con la Vista previa, y si no ha funcionado, lo cambiamos por éste: .date-outer { border:1px solid #fe4a4a; padding:3px; } Para poner un solo borde, o dos, o combinarlos, o cambiar sus propiedades, seguimos el mismo procedimiento utilizado con la cabecera, utilizando, obviamente el  .post-outer   o el  .date-outer y cuidando de conservar el   padding:3px;    Sección sidebar Para enmarcar la sección correspondiente a la sidebar el código que debemos pegar antes de la etiqueta   ]]></b:skin>  , es el siguiente: .column-right-outer {    border:1px solid #fe4a4a;    margin:-2px; } Para poner un solo borde, o dos, o combinarlos, o cambiar sus propiedades, seguimos el mismo procedimiento utilizado con la cabecera, utilizando, obviamente el  .column-right-outer  y cuidando de conservar el  margin:-2px;