Capítulo XII - Maquetando con tamaños variables - Extensiones, Templates y Tutoriales en español | Extensiones, Templates y Tutoriales en español

Capítulo XII - Maquetando con tamaños variables

Ya vimos como hacer una plantilla para Joomla desde cero hasta darle una personalización casi completa, por lo menos podemos llegar a eso si nos adentramos en profundidad en todos los estilos de Joomla (pufff… son demasiados no? :-)

Ahora vamos a ver cómo hacer que esa plantilla se adapte al monitor que la muestra, es decir que se autoajuste a la resolución del monitor del navegante.

En primer lugar tenemos que decidir si queremos que toda nuestra plantilla sea autoajuste o solamente alguna/s parte/s. En el caso que vamos a ver como ejemplo, usaremos como sección fija solamente la lateral derecha, es decir, donde está el Menú Principal, el buscador y el formulario de login. La cabecera o “header”, la barra de navegación superior y el pie o “footer” tendrán fijadas sus alturas pero no sus anchos. Y el cuerpo será flexible o ajustable 100%.

El ejemplo que veremos fue testeado y funciona correctamente sin necesidad de hacks en los siguiente navegadores:

- Internet Explorer v7
- Opera v9.5
- Safari v4
- Firefox v3.08

Hagamos primero una copia de la plantilla ya hecha y renombremos la carpeta que está dentro de “templates” como “autoplantilla”.
Dentro del archivo “templateDetails.xml” cambiemos la etiqueta “name” y pongamos la siguiente: “Auto Plantilla” porque de lo contrario no podremos asignarla desde el back-en de Joomla, no se permiten nombre repetidos de plantillas, cuestión más que obvia.
Ahora bien, el cambio que vamos a realizar no solamente involucra el archivo CSS sino que también debemos modificar el index.php, empecemos por el segundo:

Abrimos el archivo y nos deberá quedar de esta forma:

<?php
/*
* @copyright SoloJoomla (C) 2009 All rights reserved.
* @license GNU          
*/
// Acceso directo prohibido
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css" type="text/css" />
</head>
<!-- Comienzo del borde -->
<div id="borde">
<!-- Comienzo del breadcrumb -->
<div id="bread">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<!-- Comienzo de la cabecera -->
<div id="header">
<!-- Aquí no ponemos texto puesto que usamos una imagen --> </div>
<!-- Fin de la cabecera -->
<!-- Comiendo de la barra de navegación o menú -->
<div id="navegador">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<!-- Fin de la barra de navegación -->
<!—- Comienzo contenedor del cuerpo -->
<div id="contenedor">
<!-- Comienzo del cuerpo -->
<div id="cuerpo">
<div class="espacio">
<jdoc:include type="component" />
</div>
</div>
<!-- Fin del cuerpo -->
</div>
<!-- Fin del contenedor -->
<!-- Comienzo de la barra lateral --> 
<div id="lateral">
<div class="espacio">
<jdoc:include type="modules" name="right" style="xhtml" /> </div>
</div>
<!-- Fin de la barra lateral -->
<!-- Comiendo del pie de página -->
<div id="pie"><br />
<a href="http://www.solojoomla.com">Tutorial para SoloJoomla</a> by <a href="http://www.moatsoft.com.ar">MoatSoft </a><br />
</div>
<!-- Fin del pie de página -->
</div>
<!-- Fin del borde -->
</body>
</html>

Si observan con cuidado verán que hemos cambiado de lugar el div “contenedor” y ahora solamente está involucrando al div “cuerpo”. ¿Cuál es la razón? La respuesta es muy sencilla pero vayamos paso a paso.

En el primer bosquejo que hicimos, en uno de los primeros capítulos cuando no le dabamos atributos a los divs, recordarán que estos se alineaban uno debajo del otro ocupando el ancho de la pantalla porque es como lo interpretan los navegadores. Pues bien, aquí justamente aprovechamos eso.
En el código pueden ver que solo hay un “gran contenedor” que pasó a ser el “borde”, que antes usabamos para darle un borde a toda la página.

Luego hay otro más abajo que ahora solo abarca el div “cuerpo” y antes abarcaba a los otros.

La explicación es esta: con el primer contenedor “borde” ponemos todos los otros divs dentro para que formen un bloque pero, como veremos, en el código CSS “NO LE ASIGNAMOS PROPIEDADES”, es decir solo lo usamos para que los abarque.

El segundo div, el “contenedor” que tiene en su interior el otro div “cuerpo” nos servirá para decirle que ocupe el todo el ancho de la pantalla por con un “truco” CSS le quitaremos una parte.

Vayamos al archivo “template.css” y aquí solo retocaremos los códigos que personales, los propios de Joomla! los dejamos como están. Para que puedan apreciar los cambios pondré como era el antes y el después de cada identificador o selector y una breve explicación.

EL SELECTOR body
Código Ajustable

body {
 font : 8pt Verdana, Geneva,        Arial, Helvetica, sans-serif;
 padding: 0px;
 margin: 0px;
 text-align: left;
 }

Código Anterior

body{
 background : url(../images/fondo.jpg) repeat;
 font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
 color : #666666;
 margin : 20px 0px 20px 0px;
 text-align: center;
 }

Como primera medida hemos eliminado el fondo. ¿Por qué? Porque ahora nuestro template abarca toda la pantalla y ya no se apreciará. Podríamos usar un color si quisiésemos pero para esto deberíamos quitarle al div “contenedor” el fondo, para que quede transparente.

También le hemos quitado los margenes y el padding para que llene la pantalla y le hemos puesto que el texto se alinee a la izquierda. La alineación de texto nos va a permitir poner hacia la izquierda el título del web site que está en el back-end de Joomla!.

IDENTIFICADOR #header
Código Ajustable

    #header{
 background: #778AFF url(../images/banner.jpg) right no-repeat;
 height : 100px;
 }

Código Anterior

#header{
 background: url(../images/banner.jpg);
 height : 100px;
 width: 700px;
 }

Aquí lo que hacemos es asignarle una posición al banner y como la pantalla será más ancha que el mismo, le decimos que no se repita: “right no-repeat. Lo que eliminamos con respecto al código anterior es el ancho.

IDENTIFICADOR #contenedor
Código Ajustable

#contenedor {
 float: left;
 width: 100%;
 background-color : #ffffff;
 }

Código Anterior

#contenedor{
 text-align: left;
 width: 700px;
 background-color : #ffffff;
 margin: auto;
 border: 2px groove green;
 }

Lo que hacemos aquí es asignarle el 100% de la pantalla y que “flote” a la izquierda. Dentro del div contenedor tendremos solamente el cuerpo pero ya veremos cómo trucamos todo.

IDENTIFICADOR #pie
Código Ajustable

#pie{
 clear: left;
 width: 100%;
 border: 1px dotted #CCCCCC;
 text-align: center;
 padding : 3px 10px 5px 10px;
 background:        url(../images/fondonav.gif);
 }

Código Anterior

#pie{
 clear : both;
 color : #cccccc;
 text-align : right;
 margin : 10px 10px 0px 10px;
 padding-bottom:10px;
 }

En el caso de pie, lo primero que hacemos es limpiar o liberar hacia la izquierda, esto es pora que no se ponga debajo de #lateral. Luego le indicamos el ancho que será del 100%, le damos un borde, una alineación al texto que contenga y un fondo usando la misma imagen de fondo de la barra de navegación superior para respetar el estilo.

El código CSS de “template.css” que corresponde a nuestra plantilla (la parte de Joomla queda como está) deberá ser similar a esta:

body {
 font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
 padding: 0px;
 margin: 0px;
 text-align: left;
 }
 
 #contenedor {
 float: left;
 width: 100%;
 background-color : #ffffff;
 }
 
 #header{
 background: #778AFF url(../images/banner.jpg) right no-repeat;
 height : 100px;
 }
 
 #navegador{
 background : url(../images/fondonav.gif);
 padding : 3px 10px 5px 10px;
 border-top : 2px groove #cccccc;
 border-bottom : 2px solid #cccccc;
 }
 
 A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
 color: #494E6B;
 text-decoration: none;
 }
 
 A.enlacenav:HOVER{
 color: #3F7DE3;
 background-color: #F0FFF0;
 }
 
 #cuerpo{
 margin-right: 200px;
 }
 
 H1{
 font-size: 12pt;
 }
 
 #lateral{
 float: left;
 width: 200px;
 margin-left: -200px;
 background-color: #EBF2FE;
 }
 
 #pie{
 clear: left;
 width: 100%;
 border: 1px dotted #CCCCCC;
 text-align: center;
 padding : 3px 10px 5px 10px;
 background: url(../images/fondonav.gif);
 }
 
 .espacio {
 margin: 10px;
 margin-top: 0;
 }

Para finalizar con el template autoajustable le comento que hay definida una clase más dentro del archivo CSS: “.espacio”, este lo utilizamos para darle un margen dentro de cada div y separar el contenido de los bordes.

Con esto, finalizo el manual. Les pido, por favor, que me envíen comentarios sean buenos o malos, sugerencias y correcciones si ven errores. En la portada le puse “v1”, primera versión y con lo que Uds. me informen o pidan por email lo iré ampliando o mejorando.

Un agradecimiento muy especial a toda la gente que ayuda desinteresadamente en internet brindando su tiempo y sus conocimientos. Si Uds. esto no se podría haber hecho. Muchas Gracias.

Redactado por :

tuxmerlin

Última actualización el Viernes, 21 de Mayo de 2010 16:14

Comentarios

+2 #9 mariac24 28-08-2009 15:01

Busque esto como aguja en pajar, gracias

Por favor me podria ayudar en como hacerle tambien para que el alto de la pantalla sea autoajustable

+1 #8 crossover 25-08-2009 18:35

EXELENTE!!!, Creo que de ahora en adelante me dedicaré a hacer mis propias templates, aunque demore pero lo intentaré, de esta manera usaré los módulos donde mejor me convengan, muchas gracias de verdad...

+1 #7 eddiemalar 13-07-2009 08:18

Hola... primeramente quería felicitarte y agradecerte a la vez tu tu excelente trabajo con este tema que a tantos nos rompe la Cabeza...!!! ja...
Y segundo, necesito una ayuda Urgente con respecto a una posición en especial: Necesito achicar el espacio que va entre el título de los módulos (menu, encuestas, login, etc) y el contenido del mismo... ese espacio que genera automáticamente joomla, me parece demasiado alto y quiero achicar la distancia entre uno y otro... he probado diferentes maneras pero aún no doy con la fórmula (CSS) correcta...

desde ya muchas graciias por tu aporte... y espero me puedas resolver este tema que ya me tiene hace varios días en vela...

saludos

+1 #6 tonny 09-07-2009 18:18

Gracias totales, impresionante el tutorial de plantilla

+1 #5 hcepeda 25-06-2009 14:07

Gracias excelente material

+1 #4 hcepeda 25-06-2009 14:06

Muy bueno el tutorial, garcias

+1 #3 xcore 26-05-2009 03:37

Te agradezco enormemente el tiempo que has dedicado a este tutorial. És muy didáctico. Andaba tras uno así hace tiempo. Seguiré visitando tu web (ésta y moatsoft) y si tengo alguna proposición te escribiré.
Muchas gracias

+1 #2 gomoso 19-05-2009 14:24

Gracias por tu trabajo,Me parece muy estimulante y eficaz.

+1 #1 hems 18-04-2009 11:36

Gracias, muy muy instructivo, paso a paso (como para burros como yo), gracias

Refrescar lista de comentarios
Suscripción de noticias RSS para comentarios de esta entrada.

Debe registrarse para poder comentar

JComments

Comentarios

+ Componentes Joomla

Community Builder Joomla 1.5

Ext. Actualizadas

Ext. Mas Valoradas

Joomla

Ecommerce Joomla

Tutoriales Joomla

Traducciones Joomla