Plantillas

plantilla

Una de las características más sobresalientes de Joomla es la gran facilidad que tiene para cambiar su aspecto estético (colores, tamaños de tipografías, distribución de las zonas de contenido ...) y la gran variedad y cantidad de templates o plantillas disponibles para instalar en nuestro sitio. Hay más de mil plantillas distintas listas para descargar e instalar en tu portal.

Y es que en Joomla -como en otros sistemas dinámicos- el contenido va por un lado y el diseño por otro. Esto quiere decir que podemos cambiar en un instante el diseño del sitio sin alterar sus contenidos ni su organización.

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

El mundo de las plantillas en Joomla es bastante grande, incluso hay framework que son extensiones que nos confeccionan la plantilla de una forma interativa , aunque yo personalmente los descarto, porque pienso que hacen que las plantillas que generan son muy pesadas y con código totalmente innecesario. (es una opinión personal)

A todos nos paso que te pones a buscar plantillas encuentras alguna que te parece que es lo que necesitas, luego la instala , al poco tiempo te das cuenta que no es exactamente lo que buscas, la descartas y buscas otras, se repite la historia.

Modificar una plantilla Joomla suele ser una tarea bastante sencilla, lo primero conocer un poco a fondo todas las posibilidades que nos da esa plantilla, opciones y configuraciones, luego si aun así no puedes resolver tus necesidades con unos pequeños conocimientos php, html y css, unas nociones básicas donde tocar y donde no, se puede poner a nuestro gusto.

Hay un sinfín de artículos que habla de como modificar plantillas, principalmente recomendamos la lectura de los documentos oficiales de Joomla:

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Muchas veces nos puede hacer falta cambiar el formulario de contacto del componente que no facilita Joomla ( Contact ).

formularioContactoNormal

Recordar que es hacer overwrite de este componente en nuestra plantilla, los ficheros que encontramos Nuestrotemplate/html/com_contact/contact/default_form.php

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

El no saber la diferencia entre duplicar y copiar plantilla puede provocar si vas modificar código de una plantilla de joomla no puedas volver a la plantilla original.

Índice de "Copia o duplicado de una plantilla de Joomla"

¿ Cual es la diferencia entre copiar una plantilla o duplicar ?

La gran diferencia entre duplicar y copiar una plantilla en Joomla, al duplicar no crea una nueva plantilla lo que hace es un nuevo registro en la tabla_extensiones y permite utilizar la misma plantilla con distintos parámetros.

Duplicar es una opción que nos facilita el gestor plantillas en:

duplicarPlantillasJoomla

Es muy útil, cuando queremos utilizar la misma plantilla pero con parámetros distintos en varias secciones de la web.

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Crear una vista distinta de un articulo en Joomla.

Simplemente creado la vista en nuestra plantilla en html/com_content/article/nuevavista.php

Y seleccionando en la opciones del articulo :

Presentacion alternativa -> Seleccionamos la nueva vista creada.

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Configuracion de "Articulos Principales e Introducidos" en view de Blog de Joomla

La configuracion de view de blog Joomla se puede realizar en tres sitios distintos, en el item de menu, en el articulo y en la categoria de ese articulo, las tres son validad, pero el rango de valor es orden anterior.

En las opciones que podemos encontrar en view de blog de Joomla que tenemos del componente  content son las siguientes entre otras:

Articulos Principales: Que los articulos que presentamos al principio, como si fueran los destacados.

Introducción de Articulos: Son los articulos que vamos a mostrar en las columnas.

Columnas: El numero de columnas para introducir el numero de articulos que pusimos en el campo anterior.

Hay que tener en cuenta que la plantilla que utilizas debe soportar las opciones que tiene por defecto el componente content.

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

 Protostar es una de las plantillas que trae por defecto Joomla 3.x , por ello vamos tratar en este post todo lo necesario para poder cambiarla y modificarla.

Empezamos a modificar nuestra plantilla protostar

Lo ideal inicialmente antes de empezar a cambiar nuestra plantilla , os recomiendo copiar vuestra plantilla para poder realizar todos los cambios sin miedo y evitando problemas, como que actualices y te cambie esos cambios que hiciste, puedes hecharle un vistazo este otro post donde explico como copiar la plantilla.

Una vez copiada nuestra plantilla podemos entra a modificar el CSS.

Modificaciones CSS

Lo primero es saber que creando un fichero podemos sobreescribir el css de template.css

Este fichero es user.css en templates/protostar, con el podermos modificar el css de la plantilla protostar o el nuestra copia, ideal aunque no hubieramos hecho una copia de la plantilla, al actualizar joomla ( por consecuencia puede que la plantilal) este fichero no cambiaría nunca ya que no se existe en la plantilla por defecto.

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

Esta web tambien utilizamos una copia de protostar, la tengo publicada en github (protostar_ayuda), aunque tengo cambiado el fichero templace.css ya que tiene errores, los puedes ver con el  validar el css en W3C.

 

Menu horizontal

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

Sufijo de clase Menu : nav-pills

Sufijo de clase Modulo: _menu

 

CSS un poco a fondo de la plantilla protostar

Siempre es bueno conocer un poco a fondo el CSS, la clase que utiliza y podemos reutilizar dentro de los articulos o modulos, para mejorar estectica o presentación de nuestra web. Os dejo alguna anotaciones que tenemos.

.center

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

 

 

 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

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Si estás buscando un PLANTILLA PARA JOOMLA, nosotros te informamos sin compromiso. CONTACTAR con SOLUCIONES VIGO

Visión : 

img-articulo-joomla-plantillas-parte1

El objetivo es conseguir mostrar el funcionamiento de las plantillas en Joomla. Este manual usuario es para versiones de Joomla 1.6 hasta 3.0, aunque esta ultima cambia la estetica bastante en comparación con las anterires.

La versiones de Joomla 1.5 no tienen todas las fucionalidades de que mostramos.

Hay varios MANUALES DE USUARIO de Joomla:

Hay muchas webs con manuales de uso de Joomla donde explican y muy bien todo el funcionamiento de las plantillas de Joomla, como instalarlas y que funcionalidad tienen, también desde la parte administrativa podras encontrar un icono de ayuda donde nos lleva a a siguiente link, lo explica en ingles , bastante bien. 

Pero el principal objetivo de esta entrada es apuntar y aclarar algunas punto que pensamos que son importantes entender.

Duplicar plantilla en el nuevo gestor de plantillas de Joomla.

img-articulo-joomla-plantillas-gestorplantillas25-1

Como indica en la imagen , el icono que tenemos de duplicar, lo que hace realmente es darnos la opción a tener la misma plantilla pero con selecciones distintas de sus parametros, para poder utilizarlos en alguna de nuestras secciones de la web.

Es algo interesante , y sobre todo muy util sin nuestra plantilla tienes parametros que pueden gustarnos varias opciones para distintas secciones de nuestra plantilla.

Claro esta que la plantilla tiene que tener parametros creandos, sino no tiene sentido está opción de duplicar esa plantilla.

La opción de duplicar plantalla no duplica codigo de plantilla.

Realmente para aquellos usuarios que ya se atreven a cambiar algo de código en las plantillas, pueden llegar a pensar que así tendrían una copia de su plantilla , le recordamos y advertir  que está opción no duplica la plantilla realmente, solo duplica el registro en la tabla de la base de datos.

Vea la entrada que tenemos "Crear una version de una plantilla" donde explicamos como duplicar una plantilla en código.

Fuentes y Referencias sobre Joomla 2.5:

Post de Captus: En este post un poco novedades de Joomla 2.5

Otras Referencias de lugares donde puedes descargar plantillas gratis de 2.5

Joomla24.com: Puedes encontrar plantillas para varias versiones joomla.

Joomlaos.com: Donde tanto puedes encontrar plantillas, como extensiones para varias versiones de Joomla

Taringa: Un post donde lista plantillas para joomla 2.5 gratis.

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Las posiciones de las plantillas Joomla son donde van los módulos y contenido que utilizamos en nuestra web, JOOMLA hasta el momento no tiene un estándar para nombra esas posiciones, por lo que cada plantilla puede nombrar está posiciones como quiere el creador de la plantilla.

Lo que pretendemos con esté articulo es crear un estándar de posiciones, por supuesto para nuestras plantillas, para las plantillas que creemos para Joomla 3.*, basándonos en las posiciones que utiliza las plantillas que trae por defecto Joomla.

Con esto pretendemos conseguimos que la web se pueda ver tanto en nuestras plantillas como las que trae por defecto joomla, algo que no es posible 100% sin cambiar la posición de algunos de eso módulos que utilizados.

Antes de empezar te puede interesar  ver de una forma interactiva cuales son las posiciones de las plantillas que trae por defecto Joomla, debes saber que la previsualización de posiciones de la plantillas viene deactivado por defecto en el Gestor Plantillas, en las opciones puedes activarlo. Es una medida de seguridad por lo que activala para verlo y luego desactivala. :-)

previsualizar posiciones plantilla

Antes de empezar hay que entender que:

  • Un modulo que es muy fácil cambiar de posición desde el gestor de módulos.
  • Que para ver las posiciones de la plantilla que utilizamos podemos verlas si activamos la opción de "Vista previa posiciones de modulos", que viene por defecto desactivado en opciones del Gestor de plantillas.
  • [Más a fondo] La posiciones tiene un estilo el cual puede puede cambiar la presentación y el comportamiento del modulo, este estilo viene predefinido en index.php de la plantilla , aunque en Joomla 3 en el gestor de módulos se pude cambiar.

[Más fondo] Estilos de posiciones de modulos

Los estilos de posiciones de modulos , joomla ya tiene en el sistema unos estandar predeterminado, los cuales es interesante conocer y saber su utilidad.

No encuentro información detallada de estos estilos por lo que poco a poco iré ampliando.

Las plantillas que trae joomla por defecto son beez5 y protostar del sitio. Estás plantillas tiene varios tipos de posiciones, unas son ya estandar de Joomla y otras no.

TIPOS DE POSICIONES ESTANDAR DE JOOMLA

  • none ( Que no pone titulo modulo)
  • xhtml (En la opción de modulos tenemos marcado mostrar titulo, pues lo muestra)
  • table ( Crea una tabla html con el contenido del modulo)

En las plantillas que trae joomla hay varios tipos más, que ya son particulares de ellas. TIPOS DE POSICIONES DE LAS PLANTILLAS POR DEFECTO DE JOOMLA

BEEZ5

  • style beezDivision
  • sytle beezTabs

PROTOSTAR

  • well

Estos estilos y algunos más de sistema podremos seleccionarlos en el Gestor de Modulos, pero no es necesario, ya que la plantilla tendrá uno por defecto para esa posicion que se define en el fichero index.php de la plantilla.

A los creadores de plantillas, normalmente definen los suyos en la plantilla en el fichero /template/nombretemplate/html/modules.php , donde crean una función para cada estilo llamada modCrome_NOMBRESTYLE

En este link de la web documentación oficial de joomla puedes ver más información sobre esto.