Joomla, html5 y css3

Instalación de plantilla

css3 Para los siguientes manuales necesitamos tener conocimientos avanzados de HTML5 Y CSS3. Vamos a instalar una plantilla vacía y aprenderemos a crearla desde cero.

Bájatela de aquí >> /downloads/Blank-Template-2.6.1.zip. Ahora vas a Extensiones -> Gestor de extensiones -> Instalar -> Examinar -> Buscas el zip que te has bajado -> le clicas doble y Upload and Install.

Ahora vamos a Extensiones -> Gestor de Plantillas y le decimos que la plantilla por defecto es Frontend, vemos en el navegador que tenemos una página en blanco. Vamos a practicar un poco como funciona el css de esta plantilla.

Editamos el archivo Templates -> Frontend -> index.php y quitamos:

Container

Esta clase se encuentra definida en la línea 784 de Templates -> Frontend -> css -> bootstrap.css

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

y en la línea 811 del mismo archivo adopta diferentes medidas para diferentes anchos de pantalla

@media (min-width: 768px) {
.container {
width: 750px;
}
}

@media (min-width: 992px) {
.container {
width: 970px;
}
}

@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

Utilizaremos la clase container si queremos tener una hoja centrada en la pantalla donde pondremos los demás elementos de la web, si queremos que todo ocupe el 100% de la pantalla, simplemente no utilizamos esta clase. Así que vamos al index.php y escribimos:
<div class="container" > <h4> CLASE CONTAINER </h4> </div>

Le puse min-height a 600 para que lo veamos mejor más alto :Templates -> frontend -> css -> template2.css y escribes .container {min-height:600px;background:aliceblue}

Con unos ejemplos vamos a entender rápido como funcionan las clases col-xs- En bootstrap.css 923 tenemos los tanto por ciento del contenedor que ocupan estas clases col-xs-

.col-xs-12 {
width: 100%;
}

.col-xs-9 {
width: 75%;
}

.col-xs-6 {
width: 50%;
}

.col-xs-3 {
width: 25%;
}

.col-xs-1 {
width: 8.333333333333332%;
}

Como vemos, col-xs-1 es la doceava parte de 100, col-xs-6 es la mitad y col-xs-12 ocupa el 100%. Con este método no tenemos que medir nada para ubicar perfectamente las cajas. Vamos a verlo.

<div class="container" > <h4> CLASE CONTAINER </h4>

Dentro de .container escribimos:

</div> 

Vemos que las cajas quedan perfectamente sin tener que darles medida ninguna. Qué pasa si escribimos lo mismo dentro de col-xs-6:

<div class="container" > <h4> CLASE CONTAINER </h4>

</div>

</div> 

Como vemos funciona igual para todos los contenedores. col-xs- tienen un padding left y right de 15 px, se lo podemos quitar para que queden pegadas las cajas a los bordes del contenedor.

Otro ejemplo con offset -> indica el % del margin left

<div class="col-xs-offset-8 col-xs-4" style="background:blue;"> <h4> col-xs-offset-8 col-xs-4 </h4> </div>

Ahora tenemos una caja de medida 4 desplazada a la derecha una medida de 8. Con este sistema podemos posicionar las cajas rápidamente y sin complicarnos la vida midiendo los píxeles.

Podemos aplicar esto a cualquier elemento, p, span, img, etc. Ponemos antes de </div>

<p class="col-xs-6" style=" background:yellow"> p col-xs-6</p>
<span class="col-xs-offset-3 col-xs-3" style=" background:grey">col-xs-offset-3 col-xs-3 </span>

Vemos que el primer p está alineado a la izda. y ocupa una longitud de 6 (50% del contenedor) y el span a continuación tendrá una medida de 3 y distará del p una medida de 3.

CSS3 en Joomla

Instalación de plantilla

Container