Curso online de Joomla: el aspecto de la Web, las plantillas

27 05 2008

El aspecto de tu sitio Web realizado en Joomla se encuentra prediseñado gracias a la utilización de plantillas. Por defecto, Joomla se instala con un número muy limitado de estos templates pero podrás descargar muchos gratuitamente desde Internet para mejorar el diseño de la Web. En realidad, los sitios Web realizados con Joomla se preocupan más del contenido, por ello es un Gestor de contenidos, que por el diseño (a veces, parecen ser iguales en su estética). Pero esto no es óbice, para que puedas modificar y editar la plantilla que estás utilizando y variar el diseño de tu sitio de una manera más creativa.

Nota. Debes conocer qué tipo de licencia tiene la plantilla que estás utilizando para saber si puedes realizar tareas de edición sobre ella. Busca plantillas gratuitas y preferentemente bajo licencias Creative Commons o GNU/GPL, o si no, puedes incurrir en alguna ilegalidad o irregularidad. Y, como protección del derecho de autor, mantén el nombre del creador al final de la página inicial.

La gestión de las plantillas se realiza desde el menú Sitio – Administrador de
plantillas – plantillas del sitio
.

gestión de las plantillas


Administrar las plantillas ya instaladas

Vas a realizar una primera aproximación a la utilización de plantillas en Joomla. Para ello accede a la pantalla inicial de Administración con tus datos de acceso y haz clic en el menú Sitio – Vista previa – En una nueva ventana para tener acceso simultáneo al Backend y al frontend de Joomla. En la pestaña de Administración haz clic sobre Sitio – Administrador de plantillas – plantillas del sitio

Aparecerá una tabla con todas las plantillas preinstaladas. La plantilla actual, la que está usando en este momento tu sitio Web, muestra una marca verde junto a la columna Predeterminado.

plantilla predeterminada

Si quieres mostrar la vista previa de una plantilla, pasa el puntero del ratón sobre el nombre de la misma. Aparecerá una miniventana con una imagen en miniatura del aspecto de la plantilla.

Para seleccionar otra plantilla diferente:

  • Activa la casilla correspondiente a la plantilla deseada haciendo clic en el botón situado a la izquierda de su nombre. Por ejemplo, madeyourweb.
  • Haz clic en el botón de la parte superior Defecto.
  • Vete a la pestaña en la que se muestra el Frontend y recarga la página (si utilizas Firefox puedes también pulsar la tecla F5). Ahora el aspecto de la página ha cambiado.
  • Repite el procedimiento con la otra plantilla prediseñada: spanishred. Ahora el diseño de tu página vuelve a ser diferente.

Si lo deseas puedes aplicar la plantilla únicamente a determinadas páginas y no a todo el sitio. Para ello, cuando selecciones una plantilla no hagas clic en Defecto, sino en el botón Asignar. Por ejemplo, haz clic sobre la plantilla madeyourweb y, a continuación, en el botón Asignar. En la nueva ventana, selecciona la página o páginas en las que deseas aplicar esa plantilla, por ejemplo, mainmenu – noticias y deja la plantilla rhuk_solarflare_ii por defecto. Observa los cambios en el Frontend: haz clic en el menú noticias y verás que el diseño es otro. Para quitar la asignación repite el procedimiento y selecciona la entrada Ninguno.

NOTA. ¡Asegúrate de que la plantilla Rhuk_Solarflare_II es la activa por defecto para la siguiente práctica, pues vas a cambiar el aspecto de su logotipo!.


Ajusta la imagen de cabecera a tu centro

Si estás realizando la Web de tu centro es evidente que te interesará poner como imagen de cabecera de la página una de tu propia creación, más acorde con la representación de tu IES o colegio. No es difícil hacerlo aunque necesitarás cierta soltura a la hora de trabajar con un programa gráfico (te recomendamos PhotoFiltre, por su sencillez de uso, aunque existen otros más potentes como El Gimp, libre y gratuito, Photoshop, comercial y de pago, etc).

1. Recuperar el logotipo original

Debes de tener en cuenta que este logotipo depende de la plantilla que estés utilizando. En primer lugar, tendrás que determinar dónde se encuentra. Para ello visualiza el Frontend de tu sitio Web y haz clic con el botón derecho del ratón en el logotipo en cuestión. Tendrás que seleccionar las entradas Propiedades o Ver imagen de fondo (las capturas de pantalla están realizadas utilizando Firefox como navegador). En el caso de la plantilla rhuk_solarflare_ii, que es la que está utilizando en este momento el sitio, selecciona Ver imagen de fondo. La imagen del logotipo se abre. Ahora haz clic con el botón derecho del ratón y selecciona la entrada Propiedades.

cabecera de la plantilla

Observa la información de la imagen:

  • Se localiza en la ruta templates/rhuk_solarflare_ii/images
  • Se llama header_short
  • Su formato es jpg
  • Su tamaño 635 x 150 píxeles

2. Editar o crear el nuevo logotipo

Tienes dos posibilidades a la hora de editar este archivo:

  1. Descargarlo, por FTP, y “retocarlo” con un programa de edición de imagen
  2. Crear una imagen nueva con el tamaño que tiene el original 635×150, en este ejemplo concreto. Cuando la guardes tendrás que llamarla exactamente igual que el original (mismo nombre, mismo formato jpg) y “subirla” por FTP a su ubicación original reescribiendo el archivo.

Instala una nueva plantilla

Visualiza nuevas plantillas para Joomla en Internet

Si buscas plantillas gratuitas para Joomla, no te preocupes, las hay a miles. Podrás localizarlas directamente mediante el buscador Google pero lo más recomendable es acudir a las páginas especializadas en plantillas Joomla. Y, sin duda, la mejor es Joomlademo, una página con más de 1600 plantillas, en alemán, pero que utilizarás sin problemas con nuestras indicacione.

JOOMLADEMO.DE http://www.joomlademo.de

Para seleccionar una plantilla, hazlo a través de la lista desplegable del centro de la página y a continuación haz clic en el botón de la derecha Auswahlen para visualizar cómo cambia el aspecto de la página.

Joomlademo, visualizar plantillas para Joomla

¿No quieres perder el tiempo ni sabes cuál elegir entre tantas plantillas? Depende claro está, de tus gustos y preferencias pero selecciona 247portal, ccportal, derya (originalísimo diseño), silver_flare_ex, sunshine, rhuk_solarflare_iii o vista_aero_template, para visualizar diferentes tipos de plantillas a dos columnas, a tres columnas, ocupando toda la pantalla, etc.

Descarga una nueva plantilla

En el site anterior visualizas la plantilla elegida pero no puedes descargarla. Para ello, tendrás que recurrir a otra página alemana igual de intuitiva en su navegación.

JOOMLAOS.DE http://www.joomlaos.de

Lo primero que debes hacer es anotar el nombre de la plantilla que te interesa. En este ejemplo hemos elegido 247portal. En la página inicial de Joomlaos.net vete al cuadro de diálogo de búsqueda y teclea en él el nombre de la plantilla que has elegido: en este caso, 247portal. Haz clic después sobre suche! - Buscar.

Joomlaos.de: descargar una plantilla

Aparecerá en pantalla un listado de entradas localizadas con el término escrito, entre ellas localizarás la referida a la plantilla. Para esta práctica vas a seleccionar el pack 247 Portal color-Pack, un paquete o carpeta comprimida que incluye todas las variedades de colorido de la plantilla 247Portal (para que en el aspecto de tu web predomine el rojo, violeta, azul o marrón, por ejemplo). Observa la posibilidad de descarga del pack mediante el enlace Download 247 Portal color-Pack – Descarga

Joomlaos.de: descargar una plantilla

Haz clic sobre el enlace Download de nuevo en la siguiente pantalla:

Joomlaos.de: descargar una plantilla

Y finalmente guarda el archivo comprimido zip en tu equipo, en una carpeta de tu elección. Este pack incluye varias plantillas, por tanto, descomprímelo para acceder a las distintas carpetas zip que incluye de las diferentes variedades de la plantilla.

Joomlaos.de: descargar una plantilla

En ciertos casos, en la página de Joomlaos.de te encontrarás que, al hacer clic sobre el enlace relativo a la plantilla escogida, te dirige a una página similar a la que ves a continuación:

Joomlaos.de: descargar una plantilla

Se refiere al acuerdo de licencia que tendrás que aceptar (en el caso anterior, una licencia Creative Commons) activando la casilla junto a Ich bin mit den Lizenzbestimmungen einverstanden. Sólo entonces se te ofrecerá el archivo Zip para su descarga al que accederás haciendo clic sobre el botón Download, ahora activo.

Instala la nueva plantilla descargada

Para instalar la nueva plantilla que acabas de descargar deberás seleccionar en el menú Instaladores, la opción Plantillas – Sitio.

instalar una nueva plantilla

A continuación, haz clic en el botón Examinar y localiza el archivo Zip de la plantilla elegida en tu disco duro (no es necesario que lo extraigas previamente), seléccionalo y haz clic en abrir.

instalar una nueva plantilla

Una vez localizado (la ruta al archivo aparecerá en el campo Paquete de archivo), haz clic sobre Subir archivo e instalarlo. Joomla se ocupará de colocar los archivos en su lugar correspondiente e instalarlos, sin requerir tu intervención. Si todo funciona correctamente, aparecerá una página en la que te informará de que la instalación ha sido satisfactoria.

Encontrarás la nueva plantilla en el Administrador de plantillas (recuerda Sitio - Administrador de plantillas - Plantillas del sitio) y desde allí podrás configurarla como plantilla estándar (por Defecto, tal y como te hemos mostrado en un paso anterior).

instalar una nueva plantilla

Sólo te queda comprobar que, en efecto, la nueva plantilla 247portal-red tiene el diseño que te gusta para tu sitio Web recargando de nuevo el Frontend de tu sitio Web.

Nota. No todas las plantillas disponen de todas las posiciones y de todos los módulos que has visto en una de las plantillas preinstaladas. Puede faltar algún menú, algún módulo como la encuesta o la barra de navegación: es el diseñador de la plantilla quien decide qué posiciones coloca en la plantilla o puede estar en otro lugar inesperado. Tendrás que entonces arreglarlo manualmente: visualiza la posición de los módulos en Sitio – Vista Previa – En línea con las posiciones, accede al Gestor de módulos y coloca los módulos no visibles en las posiciones disponibles o modifica la posición de aquellos que no te gusta su ubicación. O si conoces el lenguaje PHP podrás modificar completamente el código de la plantilla para adaptarlo a tus necesidades o diseñar una plantilla propia. Pero esto último escapa a las pretensiones de este curso online.


Como puedes comprobar, tras la lectura de este artículo, Joomla es una herramienta que te permitirá olvidarte de muchas horas de trabajo en el diseño de la Web: desarrolladores y voluntarios en el proyecto te ofrecen diseños para tu sitio Web ya listos, para todos los gustos y colores, de manera completamente gratuita. Una vez que decidas el aspecto del sitio Web de tu centro, con estos sencillos pasos podrás volver a cambiarlo siempre que lo desees e incluso Joomla te permitirá que el visitante de tu sitio utilice el diseño que prefiera. A partir de ahora, sólo tendrás que preocuparte de llenarlo de contenidos.

Descarga en formato PDF, Capítulo 3, manual de Joomla para sitios educativos
 Controlando el diseño de tu sitio Web: Descargar

Estadísticas Este artículo ha sido visitado  20341  veces


Acciones

Informaciones

Enviar un comentario


*
Para demostrar que eres un usuario (no un script de spam), introduce la palabra de seguridad mostrada en la imagen.
Anti-Spam Image