Etosha, una plantilla de Joomla 1.5 interesante y fácil de adaptar a nuestra página.

13 07 2009

A la hora de darle forma a nuestra página surgen infinidad de posibilidades, tantas como plantillas.

Una de ellas es ésta que originalmente tiene como tema el parque nacional del mismo nombre, en Namibia, y que reúne algunas particularidades:

  • Es algo diferente a la mayoría porque su logo superior de 1200×200 píxeles puede cambiarse cada vez que el usuario o visitante haga clic en un enlace.
  • También podemos colocar el nombre que nos interese en la margen superior izquierdo de manera que siempre permanece en ese mismo sitio aunque vayamos moviéndonos por la página verticalmente.
  • Tiene los módulos más habituales y se adapta a las diferentes pantallas.
  • Su licencia es GNU/GPL, completamente libre, la cual la hace susceptible de ser copiada y editada a tu gusto sin problemas de derechos de autor.

free templates JoomlaPara empezar puedes descargarla desde este enlace: http://www.joomla24.com/Joomla_1.5.x_Downloads/Joomla_1.5_Templates/Etosha.html

El resultado será que dispones de un archivo zip en tu equipo llamado etosha_101 que no necesitarás descomprimir, porque Joomla lo hará por ti.

Una vez descargada se instala por el procedimiento normal, es decir, entra en tu sitio Web como administrador (http://localhost/portal/administrator y teclea tus credenciales de acceso). Ahora acude al menú Extensiones - Instalar/Desinstalar:

 Joomla 1.5: instalar una nueva plantilla

En la pestaña “Instalar”, pulsa en el botón “Examinar” y busca el archivo etosha_101.zip, selecciónalo, y Joomla lo “subirá” a tu espacio web y realizará la instalación automática de la nueva plantilla.

Ya  instalada, puedes ver su estructura. Para ello vete a Extensiones - Gestor de plantillas.

Joomla 1.5: instalar una nueva plantilla

Elige la que te interesa haciendo clic sobre ella: en este caso, sobre el nombre Etosha.

Joomla 1.5: instalar una nueva plantilla

Se abre una pantalla con las características más destacadas de esta plantilla.

En nuestro caso, tras varias pruebas y cambios para experimentar algo, los parámetros que mejor se adaptan a nuestras preferencias son los que se recogen de forma predeterminada en la plantilla, pero puedes variar estos parámetros a tu antojo (juega con ellos, haciendo cambios, pulsando en el botón Aplicar y haciendo clic en el botón Previsualizar para comprobar el resultado final).

Joomla 1.5: instalar una nueva plantilla

Al pulsar en el enlace Previsualizar que se localiza en la parte superior de la pantalla, se abre la imagen que sigue y que corresponde a la página con la plantilla ya aplicada:

Joomla 1.5: instalar una nueva plantilla

En ella se puede apreciar la foto que ocupa toda la banda superior (1200×200) y que irá cambiando tantas veces como queramos al hacer clic en algún enlace. Al mismo tiempo también se puede ver el nombre al que aludí al principio en la banda lateral superior izquierda. Ese nombre aparece siempre visible en esa posición aunque realices scroll con el ratón por la página.

¿Cómo modificar los logos superior y lateral?

Una de las modificaciones más simples que puedes realizar en una plantilla es modificar las imágenes de la cabecera y, en esta plantilla en concreto, no resulta difícil hacerlo. Paso a paso te mostramos cómo.

Primero explora los archivos de la plantilla. Para ello extrae su contenido en un directorio y localiza los archivos existentes en la carpeta header. Originalmente aparecen tres imágenes y un archivo php

Joomla 1.5: editar una plantilla instalada

Las imágenes se llaman

  • header_01.jpg,
  • header_02.jpg y
  • header_03.jpg
  • El archivo php se llama settings.php

Estos son los archivos con los que tendrás que trabajar.

Paso 1. Preparar las imágenes

Primero debes preparar las imágenes que quieras que vayan apareciendo cuando se haga clic en algún enlace con tu editor de imágenes preferido (tienes tutoriales en este mismo blog para trabajar con Photofiltre - programa gratuito o con Gimp - programa libre, open source). Todas deben tener un tamaño de 1200×200 píxeles. Hemos probado hasta con 15 imágenes. Debes nombrarlas header_01.jpg, header_02.jpg… y así sucesivamente. Las tres primeras sustituirán a las que ya existen en la carpeta original (sobreescribe las imágenes); las demás añádelas en la carpeta.

Paso 2. Modificar el archivo settings.php

Si no haces nada más, sólo se verán las 01, 02 y 03, eso sí, con los rótulos originales, no con los que nos podrían interesar y al hacer clic sobre ellas el visitante de tu página acudirá a la página original del autor. Pero si modificas el archivo settings.php con un editor html, por ejemplo, el propio bloc de notas de Windows harás que funcionen todas las imágenes que quieras y con el comportamiento que desees.

Manos a la obra: abre settings.php con el Bloc de notas. Para ello utiliza la opción Abrir del botón derecho del ratón sobre settings.php y selecciona en el listado correspondiente Bloc de notas.Visualizarás el código php del archivo:

Joomla 1.5: editar una plantilla instalada

Si quieres tener, por ejemplo, 5 imágenes, copia cualquier grupo de 4 líneas y pégalo  a continuación de los que hay, en este caso, dos veces, siempre antes del código final ?>. Ahora aparecerán 5 grupos de 4 líneas. Lógicamente aún debes cambiar algunos parámetros.

Sólo deja sin tocar la primera línea de cada grupo, la que corresponde al nombre del archivo imagen: img = “header_01.jpg”; (lógicamente, modifica header_04.jpg, header_05.jpg… si has añadido nuevas imágenes en la carpeta). Las segundas líneas de cada grupo se cambian por la frase que quieras que aparezca en la parte inferior derecha de cada imagen. Las terceras y cuartas líneas de cada grupo se refieren a la dirección a la que quieras enlazar la imagen. Si no se quiere poner un enlace basta con borrar todo lo que hay entre las comillas en cada línea, pero, atención, no borres las comillas. Muy importante es acordarse de poner el número correspondiente al grupo de cada imagen: (4), (5)… aparecen siempre detrás de header entre paréntesis y llevan el mismo número que el de la imagen que quieras que aparezca.

Después de hacer los cambios que te parezca oportunos, guarda el archivo settings.php mediante la opción del menú Archivo - Guardar.

Para que en tu sitio Web Joomla se aprecien los cambios debes enviar los archivos por ftp a la carpeta /portal/templates/etosha/header” y sobreescribir los que originalmente están en ella. En el servidor local es muy simple: copia - pega el contenido de la carpeta header en la ruta xampp/htdocs/portal/templates/etosha/header.

Por lo que respecta al nombre que aparece en vertical, basta abrir con cualquier editor de imágenes, la imagen “Etosha/images/logo.png” y editar la imagen según las preferencias deseadas. Por ejemplo, borra la dirección y sustituye por la frase o nombre que quieras que aparezca. Guarda y sube el archivo de nuevo a la carpeta images sobreescribiendo el archivo logo.png original que había allí.

Joomla 1.5: editar una plantilla instalada

Paso 3. Convertir Etosha como plantilla predeterminada de tu sitio Web

Todo listo: ahora acude a la administración de Joomla y en concreto a “Extensiones - Gestor de plantillas”. En el listado de plantillas instaladas marca la opción de validación de Etosha y pulsa, a continuación, en el icono en forma de estrella amarilla, predeterminada. Prueba los cambios y el nuevo aspecto de tu sitio abriendo la página con tu navegador preferido (actualiza con la tecla F5 si fuese necesario).

Si no te gusta el resultado, sólo tienes que volver a elegir otra de las plantillas del Gestor, marcarla como predeterminada y seguir con ella como si nada hubiera pasado.

Por supuesto, falta decir que si te gusta la nueva plantilla etosha aún quedarán por adaptar la ubicación de los módulos que ya tenías en Joomla a esta nueva plantilla para que siga funcionando todo como hasta ahora.

Mi agradecimiento a Constantino García León, reciente colaborador de este blog y autor de este artículo, al que aprovecho para darle la bienvenida, por este magnífico post que muestra cómo la edición de plantillas en Joomla 1.5 puede ser un procedimiento relativamente sencillo incluso para usuarios no experimentados.


Diseño Web ¿libre y gratuito?

1 07 2007

¿Tienes un sitio Web y deseas renovar su aspecto? O tal vez, ¿quieres iniciar una y no deseas dedicar mucho tiempo a las tareas de su diseño?. ¿Quieres que la estética de tu sitio sea elegante y con aspecto profesional, pero no sabes cómo hacerlo?. Pues elige entre los miles y miles de diseños web Open Source o bajo licencias Creative Commons (e incluso sitios Web de dominio público), plantillas listas para descargar y utilizar como quieras. ¡Y todo gratis, sin gastarte un euro!

Open Source Web Design

Open Source Web DesignComunidad de diseñadores fundada en el año 2000 que comparten libremente sus plantillas y diseños gráficos para la web. 2080 diseños que podrás ver y descargar libremente a tu equipo si te interesan. Podrás realizar búsquedas entre las plantillas seleccionando el color del sitio web deseado, la distribución en columnas, si posee hojas de estilo css o no, con imágenes o sin ellas…El sitio está en inglés pero no te resultará complicado navegar por él o descargar la plantilla que te interese. Puedes acceder a las diferentes plantillas mediante el enlace Browse all designs, unas flechas de navegación te permitirá acceder a las diferentes páginas del sitio (puedes ordenar las plantillas por fecha -date- o por el número de descargas de cada plantilla -downloads-).

Cuando elijas una de las plantillas podrás verla directamente en el navegador (utilizando la opción View) o descargarla a tu equipo (Download). El archivo zip descargado incluirá las diferentes páginas necesarias para el diseño del sitio web, las imágenes (si las hubiere) o las hojas de estilo css necesarias para el diseño

Accede a Open Source Web Design

OpenDesigns.org

OpenDesigns.orgOtra comunidad de diseñadores que pone a tu disposición varias decenas de plantillas Web, plantillas que cumplen el estándar W3C y que son distribuidas bajo licencia Open Source.

Accede a OpenDesigns.org

Open Web Design

Open Web DesignComunidad de diseñadores y propietarios de sitios que comparten gratuitamente plantillas web. Puedes navegar entre todos sus diseños utilizando el enlace Browse Designs o bien seleccionar aquellas plantillas que te interesen utilizando diversos filtros para mejorar las búsquedas: ordenarlas por fecha, por descargas o popularidad. Puedes ver los diseños en el navegador (view) o descargarlos a tu equipo (download).

Accede a Open Web Design