Plantilla Protostar

 Protostar es una de las plantillas que trae por defecto Joomla 3.x , esta plantilla permite configurar en parte administrador varias cosas:

- Ancho fijo o fluido (Fluid Layout): El ancho predeterminado (contenedor) de la plantilla protostar está configurado para 960 px, esta se puede cambiar, en hay post de foro de joomla donde explican como hacerlo paso a paso.(link foro joomla)

- Permite añadir Logo , texto o ambos en cabecera.

Aunque se nos hace corto esta modificacion por ello empezamos a poder copiar y modificar nuestra plantilla protostar.

Empezamos a modificar nuestra plantilla protostar

Lo ideal inicialmente antes de empezar a cambiar nuestra plantilla protostar es realizar copia, creando asi vuestra plantilla para poder realizar todos los cambios sin miedo y evitando problemas, como que actualices y te cambie esos cambios que hiciste, dale un vistazo este otro post donde explico como copiar plantillas de Joomla.

Una vez copiada nuestra plantilla podemos entra a modificar sin miendo.

Menu horizontal

Para poner un menu horizontal en la plantilla protostar tenemos que poner el modulo del menu en la posicion 1 y ademas :

En el Módulo Menú debemos ir a la pestaña avanzado y modificar los valores de las cajas

Sufijo de clase CSS : nav-pills

Sufijo de clase CSS del Modulo: _menu

Modificaciones CSS de plantilla protostar

Tenemos que crear un fichero con el nombre user.css para poder sobreescribir el css de la plantilla protostar sin problemas.

Este fichero, user.css lo creamos en templates/protostar/css o en su defecto de la copia que realizaramos de la plantilla, sirve para sobreescribir el css de nuestra plantilla. Este fichero no viene en la plantilla precisamente para cuando se actualice la plantilla no sobre escriba ese fichero.

Ejemplo de Sergio Iglesias en este post nos demuestra como creando ese fichero y con unos pequeños cambios , la planitlla cambiar muchísimo.

Nosotros realizamos una copia de protostar que tenemos publicada en github (protostar_ayuda), con algunos cambios en  el fichero templace.css ya que  validar el css en W3C nos mostraba muchos errores, no arreglamos todos, pero si algunos.

CSS que utiliza es Bootstarp 2 en la plantilla protostar

Aunque ya hace un par años que Bootstrap 2 se quedo sin soporte,  sigue existiendo guia de Bootstrap 2 en la pagina oficial bootstrap.

Si lo coneces, te es muy facil utilizar, aunque para aquellos como yo que no lo conocen , vamos anotando algunas  clases que nos pueden parecer intersantes para que puedas utilizar tanto en el codigo de la plantilla como dentro del contenido de tu web.

Os dejo alguna anotaciones que tenemos.

.center

Esta clase dentro de un div centra el texto o el contenido.

.span1-12

La cuadricula de la plantalla bootstrap2 la divide en 12.

 Algunos ejemplos de web que tenemos con una copia modificada de la plantilla protostar

 Otras fuentes que encuentro interesantes:

Protostar como framevork. Presentacion de Valetín García muy currada, incluso tiene la modificaciones de la plantilla compartida en Github, plantilla protostar_garcia