06 May

Como hacer responsive nuestra plantilla #Joomla 3.X con #bootstrap

Tenemos que partir de la base que las plantillas en este caso como ejemplo usaremos protostar , tienen una serie de posiciones definidas. Estas posiciones tienen un ancho por defecto de 1 a 12 span. Span1,Span2…asignados a su clase.  Tenemos que comprender que el ancho total de la pantalla sea cual sea en pixel o pulgadas es siempre span12 . Pues bien, todo se basa en que la suma de span en una misma fila de siempre 12 por ejemplo.

Si tenemos una organización de pantalla de izquierda  donde ira un menú y un container donde estarán los artículos etc de joomla.  En el caso de que izquierda valiese 2 , para llegar a 12 container debe de valer span10. En el caso de que quisiésemos que la izquierda fuese igual que container , le pondríamos span6 a ambos.

Para poder definir este tamaño de container usamos lo siguiente en el index.php de nuestra  plantilla.

El ejemplo que vamos usar es con dos módulos position7 y position8 aparte de la parte central.

position-7 y position-8 siempre valen span3 por lo que ponemos las condiciones que aparecen en el ejemplo de al lado.

1º Caso:  Position-7 y position-8 están activos.
                       3        +           3      =6                      12 del total menos el 6 de la suma de ambos = 6, por lo que container o lo que es igual la variable $span de container será span6.

2º y 3º Caso: Solo uno de las dos posiciones está activa , Por lo que 12span de la pantalla completa – 3 span de uno de los módulos es 9span… por lo que la variable span de container = span9

4º El último caso en el que niguna de las posiciones este activa , container valdrá span12 que es el ancho total de la página.

/ Adjusting content width
if ($this->countModules(‘position-7’) && $this->countModules(‘position-8’))
{
$span = “span6”;
}
elseif ($this->countModules(‘position-7’) && !$this->countModules(‘position-8’))
{
$span = “span9”;
}
elseif (!$this->countModules(‘position-7’) && $this->countModules(‘position-8’))
{
$span = “span9”;
}
else
{
$span = “span12”;
}

La forma de ponerle el valor seria

<main id=”content” role=”main” class=”<?php echo $span; ?>”>

Si quieres contactar conmigo deja un mensaje de G+ en el blog o puedes hacerlo desde mi página web Diseñowebensevilla.org.
Un saludo y espero que este blog te sea de ayuda.

Share this

Leave a reply