Configurar formato de las áreas del blog (cuerpo, barra lateral, entradas, cabecera, pié,...)

Otro de los aspectos a personalizar en un blog son la posición, distribución y aspecto de cada una de sus áreas. Las áreas de un blog se dividen de la siguiente forma:

• Cabecera o Header: Suele incluir el título del blog.
• Pié o Footer: Está al final y suele incluir datos menos relevantes para el lector (estadísticas, año de creación, créditos,...).
• Cuerpo o Main: Contiene los artículos o entradas del blog. Cada entrada a su vez se divide en título, cuerpo y pié (title, body y footer). También puede contener feed-links y otra información.
• Barra lateral o Sidebar: Son barras incluidas al lado del cuerpo. Se utilizan para añadir enlaces de interes, información extra del blog,... Cada Sidebar se divide en uno o varios widget (o herramientas).
• Envoltura o Outer: Es la envoltura que rodea a todo el contenido del blog (es decir, al resto de áreas).

En Blogger y otros servicios similares te ofrecen una manera simple y fácil de configurar ésto, pero es posible que no te conformes con esa configuración básica que ofrecen y quieras dar un toque más personal. Para ello vamos a Personalizar y entramos en Diseño-->Edición de HTML. En el código de nuestra plantilla buscamos el campo a configurar según la imagen que muestro a continuación:

• #header-wrapper. Configura la cabecera. Es posible modificar cosas como el borde, el ancho, los márgenes, colores,... Un ejemplo podría ser:

  #header-wrapper {
  width: 920px;
  margin:0 auto 10px;
  border: 1px solid $bordercolor;
  background-color: #E1E95B;
  }

• #footer (en la imagen aparece como #footer-wrapper).Corresponde al pié del blog. Un ejemplo podría ser:

  #footer {
  width: 920px;
  clear: both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align:center;
  }

• #main-wrapper. Se refiere al cuerpo del blog. Se puede configurar como un todo y, además, se puede dar un formato distinto a cada una de sus partes, las cuales son .post (se refiere a los artículos), .post-title (título de los artículos), .post-body (cuerpo de los artículos), .post-footer (pié de los artículos), .feed-links (feed del blog), #blog-pager (info adicional de cada artículo, como los comentarios). SSe les puede dar bordes, colores,... y también en el caso de #main-wrapper se puede alinear a la derecha o izquierda de la Sidebar (eso sí, recuerda cambiar también la posición de la Sidebar para que se coloque al lado opuesto). Ejemplos para cada uno de estos campos son:

  #main-wrapper {
  width: 500px;
  float: left;
  margin-left:0px;
  padding:15px;
  border: double 0.4em $bordercolor;
  background-color: #E1E95B;
  filter:alpha(opacity=85);
  -moz-opacity:0.85;
  opacity:0.85;
  -khtlm-opacity:0.85;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
  ...
  .post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
  ...
  .post-body {
  margin:0 0 .75em;
  line-height:1.6em;
  }
  ...
  .post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
  }
  ...
  .feed-links {
  clear: both;
  line-height: 2.5em;
  }
  ...
  #blog-pager {
  text-align: center;
  }
  

• #sidebar-wrapper. Se refiere a la sidebar. Se puede alinear a ambos lados, añadir un borde, añadir colores,... A su vez, contiene campos .widget los cuales también se pueden configurar por separado. Por defecto hay una sóla Sidebar, aunque es posible añadir fácilmente más. Un ejemplo de configuración de Sidebar podría ser:

  #sidebar-wrapper {
  width: 140px;
  float: right;
  padding:10px;
  border: double 0.4em $bordercolor;
  background-color: #E1E95B;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

• #outer-wrapper. Con esto podemos configurar toda la envoltura del blog. Se debe tener en cuenta que la anchura debe ser mayor que lo que contiene; por ejemplo, si el Main mide 600px de ancho y la Sidebar 200px, y quieres un margen entre ambos de 10px, entonces el Out debe medir al menos 600+200+10=810px (sin incluir sus bordes). Si no se cumple dicha regla, la Sidebar se desplazará hacia abajo por falta de espacio. También se ha de respetar la alineación, si la sidebar está alineada a la derecha el Main debe alinearse a la izquierda (o todo se verá pegado al lado derecho). Un ejemplo de configuración sería:

  #outer-wrapper {
  width: 920px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

  Otra cosa a tener en cuenta de este campo es que suele centrarse en la página. Como quizás no deseemos que esto sea así y queramos desplazarlo todo a un lado u otro (en mi caso a la izquierda), vamos a ver como hacerlo. Para ello buscamos en el código de nuestra plantilla algo parecido a esto:

  body {
  background:$bgcolor;
  margin:0;

  Y añadimos a continuación la siguiente línea, que indica que se desplace 140 pixels desde la derecha, o sea, hacia la izquierda (también podíamos haber usado el desplazamiento inverso con "padding-left"):

  padding-right:140px;

Veamos ahora los principales parámetros y configuraciones a cambiar, añadir o eliminar:

• Bordes --> Cualquiera de las áreas indicadas en la imagen anterior puede tener su propio borde. Además podemos añadir el borde completo o sólo a algunos de  sus lados (border, border-right, border-left, border-top, border-bottom). Se puede configurar el grosor (en px), el formato (por ejemplo: inset, outset, rifge, groove, solid, double, dotted, dashed,...) y el color (mediante un código hexadecimal, una variable,...). Un ejemplo de la línea a añadir para incluir un borde podría ser:

  border: double 0.4em $bordercolor;

• Anchos --> Si no se incluye un valor, por defecto tomará el máximo ancho posible. En muchos casos es lo más estético, pero en otros produce desplazamientos extraños. Para indicar un ancho se hace de la siguiente manera:

  width: 920px; 

• Alineados --> Se puede alinear un área completa a izquierda o a derecha. Para ello se utiliza el campo "float". En mi caso alineo el Main a la izquierda y el Sidebar a la derecha. Por ejemplo:

  float: right;

• Distancia entre bordes y elementos interiores --> Esto se configura mediante la instruccion "padding" y se indica en pixels. También es posible configurar todos los bordes de golpe o cada uno por separado (padding, padding-right, padding-left, padding-top, padding-bottom). Un ejemplo sería:

  padding:10px;

• Otras opciones --> Por añadir algo, "line-height" indica la distancia entre líneas de texto, "text-transform" que convierte los textos incluidos allí a mayúsculas, minúsculas,... (uppercase,lowercase,...)... Incluso se puede poner un filtro de opacidad si queremos que sea un poco transparente (ojo, en el filtro que incluyo en el siguiente ejemplo la transparencia afecta a todos los elementos, incluidas letras e imágenes). Algunos ejemplos serían:

  line-height: 1.6em;
  text-transform:uppercase;
  filter:alpha(opacity=85);
  -moz-opacity:0.85;
  opacity:0.85;
  -khtlm-opacity:0.85;

Con todos estos ajustes básicos se puede conseguir cambiar la apariencia estándar y uniforme del blog y así diferenciarlo del resto. Decir que aquí sólo se explican unos cuentos aspectos y parámetros del CSS de nuestro blog pero que es posible usar muchísimos más, todo depende del tiempo y vuestra inspiración.


Salu2,
elSant0

ALGUNOS ARTICULOS RELACIONADOS