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.
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.
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). 
Puedes leer también:
Comentarios
7 Comentarios en "Elementos wrapper de la plantilla de Blogger"
Deja tu comentario
-
Suscribirse al Feed
Ranking
Buenos días mi estimado:
Ya he editado los links de las 2 imágenes de tu post que he re-publicado en uno de mis blogs. Para servirte en cuanto me sea posible.
Tengo una curiosidad sin embargo, ¿cómo te enteraste tan rápidamente que había publicado tu artículo en mi blog?. Ojalá puedas aclararme mi duda.
Veo que no esta habilitado la opción para notificarme de futuras respuestas, por lo que te dejo en libertad, en el caso decidas responder mi consulta, lo hagas o en mi blog o a mi email directamente.
Un saludo desde Lima, Perú
Hola Rómulo, te dejo de lectura este post
[...] sobre ayuda blogger y wordpress, puedes encontrar como abrir hotmail con firefox, como tambien ayuda de diseño para bloggers, habla de un concurso que como premio tiene un año de hosting, y un segundo lugar que como premio [...]
gracias por la explicacion
[...] | TecnologiaDiaria Tags: blog, CSS, plantilla, [...]
me parece muy wena esta explicación hasta con dibujitos
aunque necesito familiarizarme con este tipo de cosas ps cuando trato de hacerlo me presentan varios problemas
muchas gracias
Por algún lado tenemos que empezar, Frezer.
Saludos.