viernes, 11 de enero de 2008

Como modificar el ancho de una plantilla para que cuadre con cualquier resolución de pantalla

Este tip es para los novatos en diseño web, pues para los que tienen experiencia no representará ningún inconveniente.  Para ello debemos ir a nuestro panel de administración, a la sección Plantilla y ahí seleccionar la opción Edición de HTML, y una vez ubicados en esa sección, habilitar el casillero que dice Expandir plantillas de artilugios.

Ahora es cuestión de navegar por el código hasta encontrar algunos tags o etiquetas que son las que nos interesan, que normalmente suelen ser entre 3 a 5 máximo, dependiendo de la plantilla. Yo aquí les dejo una guía de consideraciones que se pueden aplicar a cualquier plantilla.

Tomaremos como ejemplo inicial la plantilla Harbor (la que uso en este blog). Hay una sección llamada Page Structure que tiene unos tags que nos pueden ser de utilidad, como por ejemplo outer-wrapper, main-wrapper, main y sidebar-wrapper. Para que vayan comparando resultados, abran en una nueva ventana su blog con esta plantilla. Tomemos como ejemplo el primer tag y verán que tiene esta estructura y datos:

#outer-wrapper {
  max-width:890px;
  padding: 0 30px 50px;
  width:100%;
  width/* */:/**/auto;
  width: /**/auto;
  }

Si nosotros modificamos solamente un dato empezaremos a crear el entorno necesario para que nuestro blog vaya cambiando.

#outer-wrapper {
  max-width:100%;
  padding: 0 30px 50px;
  width:100%;
  width/* */:/**/auto;
  width: /**/auto;
  }

Ahora le damos una vista previa y comparen los resultados con la ventana que abrimos antes para ver el blog inicialmente. Ahora buscamos estos 2 tags:

#main-wrapper {
  width:64%;
  float:$endSide;
  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 */
  }
......

#sidebar-wrapper {
  width:32%;
  float:$startSide;
  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 */
  }

y cambiamos los datos de los siguientes tags:

#main-wrapper {
  width:65%;
  float:$endSide;
  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 */
  }
......

#sidebar-wrapper {
  width:34%;
  float:$startSide;
  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 */
  }

y volvemos a solicitar una vista previa y comparen. El tag sidebar-wrapper permite controlar el ancho (en este caso) de la barra lateral. Inclusive podemos, si así lo deseamos, que tanto main-wrapper como sidebar-wrapper tengan el mismo ancho para tenerlo a 2 columnas. Deben de tener en cuenta también que no todas las plantillas pueden modificarse de esta forma, pues llevan imágenes por fondo de las secciones y estas imágenes, si tienen bordes redondeados en las esquinas, no será tan fácil el alterar el ancho como en este caso.

Lo que se debe buscar, asumiendo que la plantilla no tenga problemas con las imágenes como he mencionado, son tags que contengan información similar a 749px (es una cifra aleatoria la mostrada) pues eso estará indicando el ancho máximo de la plantilla, pensadas para resoluciones mínimas de 800 x 600 pixeles. Luego hay que buscar tags que contengan el término sidebar y otros que tenga el término main, pues estos contendrán más que seguro un tag llamado width que es el que controla el ancho de ese tag. Al modificarlo, deben utilizar valores en porcentaje, donde main o el tag principal, debe estar al 100% y los otros dos tags no deberán de excederse, en suma, del 100%. Lo recomendable es que sumen 99% máximo para evitarnos algún tipo de inconvenientes y sobre todo para dejar una pequeña luz entre las 2 columnas, pues estéticamente se ve mejor.

Espero que les haya sido de utilidad este post.

No hay comentarios:

Publicar un comentario

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í