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.

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


Acciones

Informaciones

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

29 07 2009
nestor (09:02:30) :

hola, como puedo activar el menu superior en la plantilla etosha?? en que posición se debe poner?

gracias!

31 07 2009
Tino (08:02:16) :

Hola, Nestor.
Espero que indicando el proceso completo pueda servir, esta respuesta, para los que tengan algunas dudas generales.
Debemos de crear un menú nuevo (Menús-Gestor de Menús-Nuevo) que podemos llamar “superior”. A continuación creamos un módulo nuevo con el mismo nombre (Extensiones- Gestor de módulos- Nuevo- Menú). Se abre una pantalla en la que configuramos los detalles: Título, mostrar título, habilitado, posición (Aquí puedes elegir varias: banner para verlo encima de la imagen grande de la portada, breadcrumb, para verlo debajo de la imagen, u hornav, para verlo debajo de donde iría si lo situases en breadcrumb, tal y como yo lo he colocado en la página que indico más abajo).
Seguimos configurando: Nivel de acceso, Asignación de menú (elegimos los menús en los que queremos que aparezca este módulo).
En los parametros del módulo, a la derecha de la página, debemos elegir el nombre del menú.
El resto podremos configurarlo de diferentes formas, probando hasta encontrar la que mejor nos parezca.
Nos queda asignar los “items” al menú “superior”. Vamos a Menús-Superior-Nuevo y elegimos el tipo de item que nos interese. Así iremos añadiendo los que necesitemos y nos irán apareciendo en el módulo “superior”.
También podemos repetir todos los items de otro menú, por ejemplo el principal, y así nos aparecerá en dos lugares diferentes, a la izquierda y arriba, por ejemplo. En mi caso tengo dos diferentes(http://web.educastur.princast.es/cp/poetaant/joomla/)
Si no ha quedado claro, no dudes en indicarlo para intentar aclarar los puntos que hayan podido quedar confusos.
Un saludo y gracias por tu interés.

25 09 2009
samantha (02:22:13) :

modifique el settings.php pero estaba notando que
entre el texto y el link hay una palabra
von
practicamente esta asi:
von

quisiera saber donde debo modificar para que no aparezca la palabra von

16 02 2010
Sergio (10:45:19) :

Hola, alguien a conseguido quitar la palabra “von” tal como indica el comentario anterior.

Si lo ha conseguido por favor que nos diga como se hace, que yo no consigo hacerlo.

Gracias

3 03 2010
Caesar (19:54:03) :

Alguien ha conseguido quitar el von ???

Por favor que explique como se hace. Gracias

28 06 2010
Angela F (12:41:56) :

Interesante información.

12 08 2010
Tino (18:37:35) :

Para hacer desaparecer la palabra “von”, creo que hay que editar el archivo settings.php de la carpeta header. A continuación se borra lo que sigue al signo igual de cada tercera línea de cada grupo de cuatro líneas. Es decir se elimina lo que sigue a “owner =”.
También se puede suprimir lo que sigue a “url =”, en cuyo caso sólo veremos la imagen con su correspondiente pie, pero sin ningún enlace.
Espero que funcione a los interesados.
Un saludo.

$header[1]->img = “header_01.jpg”;
$header[1]->name = “Löwin im Etosha NP, Namibia”;
$header[1]->owner = “www.Etosha-Namibia.ch”;
$header[1]->url = “http://www.etosha-namibia.ch”;

$header[2]->img = “header_02.jpg”;
$header[2]->name = “Giraffe bei Namutoni, Etosha NP, Namibia”;
$header[2]->owner = “www.Etosha-Namibia.ch”;
$header[2]->url = “http://www.etosha-namibia.ch”;

$header[3]->img = “header_03.jpg”;
$header[3]->name = “Fisher’s Pan unter Wasser (März 07)”;
$header[3]->owner = “www.Etosha-Namibia.ch”;
$header[3]->url = “http://www.etosha-namibia.ch”;

12 08 2010
Tino (18:40:46) :

Hola a todos, de nuevo.
Se me había olvidado añadir que no se pueden borrar las comillas ni el punto y coma final de cada línea. Hay que borrar lo que hay entre las comillas.
Tambien hay que editar el archivo index.php de la carpeta ethosa y localizar el “von”. A continuación se puede suprimir o sustituir por la palabra “de” o por cualquier otra.

getParam(’headerimg’) == ‘flexheader’) {
// nun wird Flexheader verwendet
} else {
include_once (dirname(__FILE__).DS.’/header/settings.php’);

$imgid = rand(1,sizeof($header));
$headerImg = sprintf($tmpTools->templateurl().”/header/header_%02d.jpg”,$imgid);

$headerImgTxt = $header[$imgid]->name.” von url.”‘ target=’_blank’>”.$header[$imgid]->owner.”“;
}

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