data:newerPageTitle data:olderPageTitle data:homeMsg

viernes, 11 de enero de 2008
22:41:00

Por cada comentario que haces, Dios salva un gatito

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.


*****

0 comentarios:

Haznos saber tu opinión

Todo comentario es bien recibido. Pero debes de tener en consideración los siguientes puntos:
1. No se permitirán insultos.
2. No se permitirá comentarios únicamente con publicidad. En todo caso te sugiero enviar un mensaje privado para ver el tema.
3. No se permitirá ningún tipo de ataque, agresión ni apologías de ningún tipo que inciten a la violencia o reacciones violentas. Se puede criticar y entablar debate sin necesidad de agredir a nadie.
4. No se permitirá ningún tipo de discriminación, segregación ni racismo.

Todos los comentarios serán sujetos a moderación, así que por favor les pido un poco de paciencia. Muchas gracias por comentar en este blog.



Coméntalo en Facebook

data:newerPageTitle data:olderPageTitle data:homeMsg

Publicados en esta categoría...

Suscribete a De Copy and Paste