CSS3 en Joomla

Instalación de plantilla

css3Para 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:

 <!--
    YOUR CODE HERE
  -->

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 class="col-xs-2"  style="background:red">  <h4> col-xs-2 </h4>  </div>

<div class="col-xs-4"  style="background:white">  <h4> col-xs-4 </h4>  </div>

<div class="col-xs-6"  style="background:green">  <h4> col-xs-6 </h4>  </div>

</div> <!-- fin container -->

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 class="col-xs-2"  style="background:red">  <h4> col-xs-2 </h4>  </div>

<div class="col-xs-4"  style="background:white">  <h4> col-xs-4 </h4>  </div>

             <div class="col-xs-6"  style="background:green">  <h4> col-xs-6 </h4> 

<div class="col-xs-2"  style="background:red">  <h4> col-xs-2 </h4>  </div>

<div class="col-xs-4"  style="background:white">  <h4> col-xs-4 </h4>  </div>

<div class="col-xs-6"  style="background:green">  <h4> col-xs-6 </h4>  </div>

            </div>

</div> <!-- fin container -->

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> <!-- fin container -->


 <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.