La apariencia de tu sitio Joomla 2.5 - El Gestor de plantillas

Valoración del Usuario:  / 0
MaloBueno 

joomla25 logoUna de las grandes ventajas que tiene utilizar Joomla 2.5 para los que sólo queremos preocuparnos de publicar contenido es que la apariencia de la página Web que estás diseñando no requiere de tus conocimientos técnicos al respecto. En realidad, si no lo deseas, ni siquiera tienes que preocuparte del diseño del sitio ya que el aspecto estético del mismo se encuentra prediseñado gracias a la utilización de plantillas.

Te adelanto que una plantilla no es más que un conjunto de archivos que se encuentran instalados en la instalación básica de Joomla o que puedes instalar tú automáticamente (todas aquellas que necesites o quieras probar) y que otros ya han diseñado y realizado para ti. Es cierto que si eres un manitas del diseño y tienes algunos conocimientos especializados podrás crear tus propias plantillas (por si eso de la originalidad es un requisito que quieres cumplir). Pero es también cierto que, para la mayoría de los usuarios y administradores de este Gestor de contenidos, será algo innecesario. Despreocúpate, la tarea del diseño en Joomla 2.5 queda en manos de diseñadores y desarrolladores Web que trabajan para ti y que te ofrecerán estos diseños diferentes de manera totalmente gratuita (muchos) o comercial (por supuesto, también existen diseñadores para Joomla cuyo trabajo tendrás que abonar y muchas empresas que te ofrecen sus propias plantillas de altísima calidad a precios razonables). Pero también te indicamos que en Internet localizarás una gran variedad de plantillas de calidad completamente gratuitas, sin tener que pagar un sólo euro por ellas, plantillas que podrás descargar e instalar en tu sitio Joomla 2.5 mediante procedimientos muy sencillos.

En este artículo te mostramos:

  • Qué son las plantillas
  • Cuáles son las plantillas de una instalación básica de Joomla 2.5
  • Cómo cambiar la plantilla que utilizas en tu sitio
  • Cómo realizar la edición simple de la plantilla predeterminada beez2
  • Cómo duplicar y eliminar plantillas en el sitio

Las plantillas en la instalación básica de Joomla 2.5

Cuando realizaste la instalación básica de Joomla 2.5 con dicha instalación se instaló también un número muy limitado de estas plantillas que puedes utilizar en cualquier momento. De manera predeterminada Joomla 2.5 incluye tres plantillas para el Frontend y otras 2 para la parte administrativa.

En efecto, existen dos tipologías diferentes de plantillas según sean plantillas dirigidas al diseño del Frontend, es decir, aquellas que controlan el diseño de la parte pública de Joomla, es decir, el diseño de las páginas que ven los usuarios – visitantes de tu sitio cuando escriben la dirección URL del sitio en el navegador, o bien si son plantillas dirigidas al aspecto del Backend, es decir, plantillas que modifican el aspecto de la parte de la administración de tu sitio.

Nota

Por lo general la preocupación de los administradores de un sitio Joomla no suele estar en el aspecto que tiene la administración del sitio, en todo caso estará en el diseño de su sitio tal y como se verá en Internet por lo que, al ser más popular, también existirá un mayor número de plantillas disponibles en este caso. Pero eso no significa que si lo tuyo es tunearlo todo no puedas hacer que el diseño de la parte administrativa también cambie. Sólo tendrás que preocuparte de instalar nuevas plantillas específicas para el backend del sitio.

Localizarás en la Red tanto plantillas de un tipo como de otro; ahora bien, las más populares y más utilizadas, y por tanto también las más numerosas, son las primeras. Y son precisamente de las que nos ocuparemos en primer lugar. Nuestros próximos tutoriales irán dedicados precisamente a la gestión, instalación, configuración y edición de plantillas para el Frontend de tu sitio Joomla 2.5.

Puedes ver las plantillas que tienes instaladas en el sistema si acudes al menú Extensiones – Gestor de plantillas en la página principal de la administración del sitio. También puedes hacer clic, si lo deseas, sobre el botón Gestor de plantillas que aparece en el Panel de Control:

Joomla 2.5 - el gestor de plantillas     Joomla 2.5 - el gestor de plantillas

En ambos casos, el resultado será el mismo: acceder a la página de configuración de las plantillas instaladas en el sistema.

Joomla 2.5 - el gestor de plantillas

El Gestor de plantillas

Echemos un vistazo al Gestor de plantillas. En la parte superior derecha puedes ver la Barra de herramientas que te permitirá realizar diferentes acciones sobre la plantilla que esté seleccionada en el listado (observa el cuadradito de validación que se muestra justo a la izquierda del nombre de cada plantilla).

Joomla 2.5 - el gestor de plantillas

En la parte inferior de la pantalla se muestra el listado de plantillas instaladas en el sistema. Como ya te hemos indicado tres para el frontend del sitio (columna Localización – Sitio) y dos para la administración (columna Localización – Administración).

Establece por defecto una plantilla para tu sitio

El botón Establecer por defecto de la Barra de herramientas establece que la plantilla seleccionada sea la utilizada de manera predeterminada. Para ello sólo tienes que hacer clic sobre la plantilla que quieras utilizar (cuadradito de validación a la izquierda del nombre en el listado) y, a continuación, pulsar sobre este botón. El resultado será la aparición de una estrella dorada en la columna Defecto. Esto significa que esa es la plantilla que se está utilizando en el momento actual y que, por tanto, así será el aspecto que tendrá tu sitio.

Si te fijas detenidamente en el listado, de manera predeterminada (tiene la estrella dorada) se utiliza la plantilla Beez2 – Defecto en el sitio y, si acudes al frontend de tu sitio (por ejemplo, mediante el enlace Ver sitio en la parte superior de la pantalla) verás el diseño que tiene en este momento:

Joomla 2.5 - el gestor de plantillas

Joomla 2.5 - el gestor de plantillas

Cambiar el diseño del sitio es tan simple como seleccionar cualquier otra del listado y pulsar el botón Establecer por defecto o bien hacer clic directamente en la estrella correspondiente a la misma en la columna Defecto para que se vuelva dorada. Por ejemplo, hazlo sobre la plantilla Beez 5 – Default y actualiza o acude al Frontend de tu sitio y observa los cambios:

Joomla 2.5 - el gestor de plantillas

¡Ya ves qué fácil es cambiar el diseño de un sitio utilizando diferentes plantillas instaladas!

Los contenidos no han cambiado, siguen siendo los mismos y se muestran en el mismo sitio en el que estaban antes de proceder al cambio pero su aspecto es completamente diferente. Repite el procedimiento con la plantilla Atomic - Defecto y comprueba de nuevo su diseño y cómo cambia en cada caso la interfaz de tu sitio Web.

De la misma manera puedes modificar el diseño del Backend de tu sitio Joomla. Sólo tienes que repetir el procedimiento para seleccionar la plantilla Hathor – Default y el aspecto de la administración de Joomla también cambia en consonancia:

Joomla 2.5 - el gestor de plantillas

Personalmente prefiero la plantilla Bluestork pero... ¡pa gustos, colores!

Revertir los cambios es igual de sencillo. Vuelve a validar por defecto la plantilla que es tu preferida tanto para el sitio como la plantilla en uso para el Administrador (fíjate en la columna Localización en el listado de plantillas instaladas) repitiendo de nuevo los mismos pasos. En nuestro caso volvemos a la plantilla Beez2 para el frontend y Bluestork para la administración del sitio.

Ya ves... así, de esta manera tan simple tienes un sitio Web con un aspecto completamente diferente dependiendo de la plantilla que esté en uso en cada momento. Cambiar el diseño de tu sitio nunca fue tan fácil pero... ten cuidado también con esta opción y no abuses demasiado de ella porque, a veces, puedes no obtener el resultado esperado. Por ejemplo, habrá elementos de la página que aparezcan en diferentes lugares, otros ni siquiera se mostrarán... porque todo esto depende de cómo el creador de la plantilla la ha configurado. Hay un aspecto muy importante de las plantillas del cual aún no hemos hablado, pero que puede llevar al traste con todo el diseño que tenías configurado, que es el relativo a las posiciones de la plantilla. Quédate con la idea y ya entenderás de qué estamos hablando cuando llegue el momento.

Duplica una plantilla seleccionada

El botón Duplicar de la Barra de Herramientas del Gestor de plantillas te permite realizar una copia exacta de la plantilla seleccionada. Esta es una utilidad muy cómoda de Joomla 2.5, porque como ya verás, editar las plantillas en este popular CMS es relativamente fácil, al menos en lo que concierne a aspectos básicos como modificar el fondo, añadir / quitar imágenes a la cabecera, etc. y pudiera ser que quisieras utilizar la misma plantilla, aunque modificada en distintas opciones, en diferentes secciones de tu sitio Joomla 2.5.

Todo eso y más puedes hacer con Joomla y para que puedas tener varias instancias diferentes de una misma plantilla el sistema te ofrece este botón que realiza dicho duplicados. Después podrás modificar cada plantilla individualmente según tus preferencias y necesidades.

La edición sencilla de la plantilla – El botón Editar

Como su nombre indica este botón permite realizar diferentes cambios a la plantilla seleccionada. Son mínimos, pero te permitirán cambiar el aspecto de algunas plantillas, modificar su tamaño, sustituir el logo que presenta por otro de tu conveniencia, cambiar incluso la posición del menú de navegación, etc.

Ya te hemos indicado en el párrafo anterior lo útil que resulta utilizar el botón Duplicar. Vas a probarlo ahora. En primer lugar y ya que vamos a comenzar con la edición sencilla de una plantilla vamos a partir de utilizar directamente la plantilla Beez2 – Defecto. Por tanto, como primer paso, duplica esta plantilla. Para ello valida el cuadradito de validación a la izquierda del nombre Beez2, pulsa el botón Duplicar y observa cómo se muestra en el listado una nueva plantilla de nombre Beez2 – Defecto (2).

Vas a editar precisamente esta plantilla duplicada. Selecciónala y, a continuación, acude al botón Editar de la Barra de Herramientas del Gestor de plantillas. Idéntico resultado consigues si haces clic directamente sobre el nombre de la plantilla en el listado del gestor.

Accedes así a la página de edición de la plantilla:

Joomla 2.5 - editar la plantilla beez2

Sección Detalles

Nombre Estilo. El es nombre que se muestra en el listado del Gestor de plantillas. Te recomendamos no cambies dicho nombre en el caso de plantillas originales. Como el caso que nos ocupa es una plantilla duplicada puedes escribir otro valor en su lugar. Nosotros hemos definido como nombre de esta plantilla beez2 – Modificada.

Plantilla. Hace referencia al nombre de la plantilla (beez_20) y a su tipo (sitio). El nombre beez_20 es el nombre que tiene la carpeta en el sistema que incluye todos los archivos que conforman la plantilla. Puedes localizarla dentro de la carpeta templates de tu sitio. Cuando se instala una plantilla en el sitio Joomla 2.5 en realidad lo que la instalación hace es la copia de archivos a un subdirectorio de la carpeta templates con un nombre similar al nombre que posee la plantilla.

En el caso de un servidor local en Ubuntu 12.04, como es el que nos ocupa, puedes localizar la carpeta beez_20 dentro de la carpeta templates en /var/www/portal

Joomla 2.5 - editar la plantilla beez2

Defecto. Permite establecer si deseas que la plantilla en la que te encuentras sea la establecida de manera predeterminada para tu sitio. Lógicamente, en el caso de que la plantilla ya lo sea, esta opción no se encuentra activada. Es este ejemplo concreto utiliza la opción Todo para que la nueva plantilla que estás editando se utilice como la plantilla en uso en tu sitio.

ID. Muestra el número de identificación de la plantilla, ya sabes que es un número interno que utiliza Joomla 2.5 para organizar todo el contenido y los diferentes elementos del sitio.

Sección Asignación de menú

En la parte inferior de la página se encuentra esta sección en la que es posible asignar la plantilla a cada elemento que compone la página. No vamos a tocar este tema, por ahora, pero sí debes conocer que esta sección te permitirá asignar plantillas diferentes de forma individual a secciones distintas, sólo tendrás que validar cada casilla de verificación que corresponda. Lógicamente como nuestro sitio aún está incompleto y no tienes secciones configuradas ni menús de navegación establecidos, las opciones presentes en esta sección prácticamente no son útiles... ¡de momento, claro!

Sección Opciones avanzadas

Esta sección permite establecer y modificar diferentes opciones para la plantilla en uso. No todas las plantillas muestran las mismas opciones en esta sección, algunas mostrarán más, otras menos, depende de cómo el diseñador – desarrollador haya configurado cada plantilla que haya desarrollado.

En el caso de Beez2 las opciones susceptibles de ser modificadas son muy intuitivas:

Wrapper pequeño (%). El valor aquí establecido se refiere al porcentaje del ancho total de la sección principal de la plantilla (aquella donde se muestran los artículos y otros contenidos) en caso de que se inserte una nueva columna.

Wrapper grande (%). El valor aquí establecido se refiere al porcentaje del ancho total de la sección principal de la plantilla (aquella donde se muestran los artículos y otros contenidos) en caso de que se utilice una sola columna.

Logo. Se establece aquí la imagen que se muestra en el logo de la plantilla. En este caso concreto se trata del archivo logo-js.png que se localiza dentro de la carpeta images de la raíz del sitio. Es decir, en el servidor local puedes encontrarla en /var/www/portal/images/logo-js.png

Joomla 2.5 - editar la plantilla beez2

En el caso de la plantilla beez2 el logo se muestra en la cabecera del sitio, también llamado header:

Joomla 2.5 - editar la plantilla beez2

Como ya vas intuyendo puedes establecer tu propio logo mediante el botón Seleccionar. Al hacer clic sobre este botón se accede al Gestor Multimedia que te permitirá localizar la nueva imagen que quieras incluir como logo del sitio. Pero de esto ya hablaremos en otra ocasión.

Título sitio. El texto que aparece en este apartado será aquel que se muestre en la cabecera o header del sitio en el caso de que optes por un logotipo en texto puro, por tanto, si no utilizas una imagen como logo. Por ejemplo, puedes quitar el logo establecido de manera predeterminada pulsando sobre el botón Limpiar para que el campo de texto Logo esté vacío y así forzar a Joomla a que utilice en su lugar el título del sitio.

Descripción sitio. Escribe aquí el texto que aparecerá debajo del nombre del sitio en la cabecera o header, siempre y cuando no utilices una imagen como logo. Es, por tanto, un apartado complementario al anterior.

Joomla 2.5 - editar la plantilla beez2

Posición de la navegación. Este apartado define la ubicación de la navegación. Puedes optar por ubicar este menú antes o después del contenido. Según una u otra elección el menú de navegación Menú Principal se mostrará a la izquierda o a la derecha de la sección principal de la página (aquella que muestra los artículos que has realizado).

Color plantilla. En el caso de que la plantilla contenga más de una opción de combinación de colores, puedes seleccionar el que prefieras en el menú desplegable. Si seleccionas Naturaleza, la otra combinación disponible en beez2, observa el cambio en el aspecto de la plantilla:

Joomla 2.5 - editar la plantilla beez2

Nota

Puedes ir viendo los cambios realizados a medida que los vayas haciendo. Para ello pulsa cada vez el botón Aplicar de la Barra de herramientas y actualiza el frontend de tu sitio (tecla F5) en cada ocasión para visualizar cómo va quedando la página.

Cuando finalices de realizar todas las modificaciones deseadas, haz clic, para terminar, en el botón Guardar y Cerrar y volverás de nuevo al Gestor de plantillas.

Elimina plantilla instaladas

Puedes duplicar plantillas, como ya conoces, incluso instalar plantillas nuevas en el sistema (como ya sabrás), y puede llegar el momento que dichas plantillas no te interesen. El botón Eliminar permite borrar plantillas presentes en el listado del Gestor de plantillas. ¡Así de sencillo, así de fácil!

Descarga nuestro tutorial en formato PDF - 580 kb - Descargar

 

Comentarios   

 
0 #3 Carmela chavez 02-10-2014 22:08
Hola!
Como puedo cambiar el logo de mi pagina web, si ya tiene uno sin modificar nada del contenido.
Las características que debe tener la imagen para que pueda subirla
Citar
 
 
0 #2 Edita Sueiras 07-07-2013 17:07
Te refieres a esta plantilla comercial en concreto?
www.joomlaxtc.com/index.php?option=com_jxtcslim&view=package&id=2060
Citar
 
 
0 #1 david 07-07-2013 16:06
hola yo estoy usando la plantilla de minimalistix en mi joomla 2.5 pero no puedo sacar el logo y nombre del menu desde ya muchas gracias.
Citar
 

Escribir un comentario


Código de seguridad
Refescar

Información adicional