domingo, 30 de marzo de 2008

Elementos wrapper de la plantilla de Blogger

En esta entrada conoceremos brevemente cuales son los elementos wrapper de la plantilla de Blogger, lo cual nos ayudará posteriormente (cuando postee temas de CSS) a la personalización de su plantilla. En este caso los elementos son los wrapper de Blogger pero en el caso de Wordpress es muy similar. Tomaré de ejemplo mi ex plantilla Blogger.

e384765d

Como pueden ver se trata de una Thisaway Blue modificada. Aquí resaltan algunos wrappers (un wrapper es un contenedor, un evoltorio) o contenedores: outer-wrapper, header-wrapper, content-wrapper, main-wrapper, sidebar-wrapper, footer-wrapper.

Para el ejemplo he considerado solo un sidebar pero en caso sean 2 en Blogger suelen llamarse sidebar1-wrapper y sidebar2-wrapper.

Los contenedores siguen una estructura de envolventes, una jerarquía, como se muestra en la imagen primera de esta entrada. En caso no lo visualicen de manera muy clara aqui les dejo esta otra.

cb3cb86e

El outer-wrapper es el envoltorio principal del blog, el mayor, el que define el ancho total (que de pereferencia no debe exceder los 960 píxeles de modo que se eviten scrolls horizontales, aún usando la extensión All in one sidebar de Firefox que recorta espacio horizontal) y demás parámetros.

El header-wrapper es el que contiene al encabezado, nuestro logo, etc. Evidentemente el ancho de éste y los demás elementos principales que contiene el outter-wrapper debe ser menor o igual a éste, sino se producirán errores de overflow (de los cuales hablaremos en otra entrada) sobre todo en Internet Explorer.

El content-wrapper es el contenedor de contenido, no me refiero al contenedor de los posts, sino a uno mayor que engloba al sidebar y a los posts. Al igual que el header-wrapper su parámetro de ancho (width) debe ser menor o igual al del outer-wrapper.

El main-wrapper es el contenedor de los posts, aqui por ejemplo puedes elegir un color de fondo para todo este campo o los márgenes respecto a los límites del content-wrapper o los paddings, etc.

El sidebar-wrapper es el contenedor del sidebar, aquel donde se encuentran contenidos todos nuestros widgets y/o elementos que hemos incoporado en forma de código html, javascript, imágenes o similares. Aqui suelen configurarse (dentro) el estilo de las listas (por ejemplo para las entradas o el archivo, el blogroll o los enlaces, etc.)

El footer-wrapper es aquel contenedor inferior del blog donde se publican los créditos del theme, el hosting, licencias, autores, etc.

Ahora que ya conocen los elementos wrapper de Blogger pueden comenzar a mover el código CSS en las secciones correctas y solucionar problemas (como las sidebars que se van al suelo o se desplazan al fondo del blog al verse en Internet Explorer).

 

Fuente : Elementos wrapper de la plantilla de Blogger

6 comentarios:

  1. Hola, gracias por la referencia. Agradecería también que no hagas hotlinking a mis imágenes ya que me consumen ancho de banda ;).

    Te invito a subirlas a un servidor como Imageshack o similar.

    Saludos.

    ResponderEliminar
  2. Los buenos artículos hay que promocionarlos. Sobre lo de las imágenes, ahora mismo cambio a mi album Picasa. Lo que sucede es que copie el artículo usando el plug-in que incluye el Windows Live Writer para agregar artículos automáticamente y pasé por alto ese detalle.

    No hay problema mi estimado, lo de las imágenes se soluciona en los próximos minutos

    Por cierto, tengo la costumbre de agregar a mi lista de "Blogs & webs de amistades" a todos aquellos que dejan comentarios en mis blogs. Por supuesto, sin compromiso alguno de tu parte.

    Un saludo desde Lima, Perú

    ResponderEliminar
  3. Gracias por la rápida edición, un saludo ;)

    ResponderEliminar
  4. Lo que sea por un compañero blogger siempre que este a mi alcance por supuesto

    Un saludo desde Lima, Perú

    ResponderEliminar
  5. Aqui te dejo un enlace referente a tu duda planteada aqui. Escribí un post:

    ¿Quién me enlaza?

    Espero que te sirva. Saludos también desde Lima, Perú.

    ResponderEliminar
  6. Mira que pequeño es el mundo.... entonces rectifico mi "despedida".... y gracias por el link

    Un saludo desde Pueblo Libre

    ResponderEliminar

AVISO:
Muchas gracias por considerar dejar un comentario. Te pido por favor que tengas en cuenta las siguientes pautas:
1. Evita usar lenguaje prosaico u ofensivo, y mantener siempre el respeto por todos.
2. Respeta las opiniones de los demás y no cometas el error de atacarlos de manera insultante o prosaica.
3. Si no estas de acuerdo con el tema publicado, ambos sabemos que hay forma de realizar una crítica sin ofender ni agredir.
4. También queda prohibida los enlaces de promoción o publicidad descarada.
5. Finalmente te pido que no utilices abreviaturas en tus respuestas para poder mantener una armonía en la lectura de los mensajes y una mejor comprensión de la lectura.

Y como muestra de mi gratitud por tu visita y comentario, si tienes sitio web o blog y has ingresado ese dato u OpenID, agregaré tu web o blog en mi sección Blogs de amistades y/o que me gusta visitar seguido.

En caso contrario tu comentario podría ser eliminado. Aprecio mucho que consideres esta petición de mi parte. Muchas gracias por tu comprensión.

Nota: solo los miembros de este blog pueden publicar comentarios.

El pianista que tocó y alguien escuchó

Una marmota en el barrio de Lima

Historias de una cocina

El cine que compartí