Capítulo XII - Maquetando con tamaños variables
Anuncio
Capítulo XII - Maquetando con tamaños variables
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
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: “<name>Auto Plantilla</name>”
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:
{codecitation style="brush:xhtml;"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
página 1 / 8
Capítulo XII - Maquetando con tamaños variables
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" lang="" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates//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>
página 2 / 8
Capítulo XII - Maquetando con tamaños variables
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
<!-- Fin de la barra lateral -->
<!-- Comiendo del pie de página -->
<div id="pie">
<a href="http://www.solojoomla.com">Tutorial para SoloJoomla</a>
by <a href="http://www.moatsoft.com.ar">MoatSoft </a>
</div>
<!-- Fin del pie de página -->
</div>
<!-- Fin del borde -->
</body>
</html>{/codecitation}
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
página 3 / 8
Capítulo XII - Maquetando con tamaños variables
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
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
{codecitation style="brush:css;"}body {
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
text-align: left;
}{/codecitation}
Código Anterior
{codecitation style="brush:css;"}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;
}{/codecitation}
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
{codecitation style="brush:css;"} #header{
background: #778AFF url(../images/banner.jpg) right no-repeat;
height : 100px;
}{/codecitation}
Código Anterior
{codecitation style="brush:css;"}#header{
página 4 / 8
Capítulo XII - Maquetando con tamaños variables
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
background: url(../images/banner.jpg);
height : 100px;
width: 700px;
}{/codecitation}
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
{codecitation style="brush:css;"}#contenedor {
float: left;
width: 100%;
background-color : #ffffff;
}{/codecitation}
Código Anterior
{codecitation style="brush:css;"}#contenedor{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
border: 2px groove green;
}{/codecitation}
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
{codecitation style="brush:css;"}#pie{
clear: left;
width: 100%;
border: 1px dotted #CCCCCC;
text-align: center;
padding : 3px 10px 5px 10px;
background: url(../images/fondonav.gif);
}{/codecitation}
Código Anterior
página 5 / 8
Capítulo XII - Maquetando con tamaños variables
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
{codecitation style="brush:css;"}#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}{/codecitation}
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:
{codecitation style="brush:css;"}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;
página 6 / 8
Capítulo XII - Maquetando con tamaños variables
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
}
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;
página 7 / 8
Capítulo XII - Maquetando con tamaños variables
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
margin-top: 0;
}{/codecitation}
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.
página 8 / 8
Powered by TCPDF (www.tcpdf.org)
