Tamaños variables

Maquetando con tamaños variables – Capítulo 12

por

Ya vimos como hacer una plantilla para Joomla desde cero hasta conseguir 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 con tamaños variables, 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 siguientes navegadores:

– Internet Explorer / Eggs
– Opera
– Safari
– Firefox

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://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 tamaños variables

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.

Archivo PDF Tutorial Completo tutorial-maquetacion-pantilla-joomla

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.

Posdata: Este tutorial no esta relacionado con la técnica Responsive Web Design y se creo hace ya unos años, pero aún tiene validez para los que quieran empezar a adentrarse en la programación de plantillas joomla! desde cero, ya que hoy día disponemos de los frameworks templates que nos facilitan mucho la tarea.

11 comentarios en «Maquetando con tamaños variables – Capítulo 12»

  3. Macanudo pibe!!!!
    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é.
    [b]Muchas gracias[/b]

  7. Ayuda con el CSS…!!!!!
    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

  8. MUY BIEN, YA RECOMENDÉ EL SITIO
    😀 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…

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad