La plantilla rhuk milkyway: adapta el logo original de la plantilla

Tags: CMS | diseño | gestor de contenidos | gimp | imagen | Joomla | plantillas

 

Te recomendamos que, antes de seguir este artículo, leas nuestros artículos anteriores dedicados a la plantilla Rhuk Milkyway. Sólo así comprenderás la estructura de la plantilla, los archivos que la afectan e incluso a qué archivo concreto acudir para realizar una edición total o parcial de la plantilla.

1.- La estructura de archivos y carpetas en la plantilla

2.- Parámetros de configuración

3.- El archivo templateDetails.xml

4.- El archivo index.php

Si utilizas la plantilla Rhuk Milkyway como predeterminada en tu sitio verás que, en el Frontend, se muestra un pequeño logo en la parte superior izquierda de la página.

La mayoría de los desarrolladores de plantillas suelen utilizar este espacio en concreto, el encabezado de la página, para mostrarlo. Suele ser diseñado para contener el logotipo de la organización o de la compañía que el sitio representa. Y es, por supuesto, el mejor lugar para incluir en él una imagen o logotipo representativo de tu centro, de tu aula, de la temática de tu sitio o del departamento del IES en el que impartes clase.

Una de las ediciones más básicas, y no siempre complicadas o difíciles de ejecutar, que puedes realizar en una plantilla es suprimir el logotipo que muestra o sustituirlo por uno personalizado que identifique al sitio, a tu centro por ejemplo. En la mayoría de los casos los procedimientos que tendrás que hacer será localizar en los archivos de la plantilla cuál es el fichero imagen que se corresponde a cada logo y la fórmula exacta que la plantilla utiliza para mostrarlo.

En concreto, son múltiples las referencias al logo en la plantilla Rhuk Milkyway:

• En el archivo index.php aparece identificado con la etiqueta <div id=”logo”>

 

• En el archivo template.css se muestran las características concretas gráficas que debe tener el logo:

 

En concreto, el logo actual que se muestra en tu sitio si utilizas esta plantilla tiene las siguientes propiedades:

• Su nombre: mw_joomla_logo

• Su formato: transparente PNG. Esto significa que si cambia el fondo de la página, el color de fondo que se visualiza a través de la imagen del logo también cambia mostrándose el nuevo color en todas las áreas que no sean sólidas de la imagen.

• Sus dimensiones: 298 píxeles de ancho x 75 píxeles de alto

• La carpeta en la que se aloja: la carpeta images de la carpeta raíz de la plantilla (la localizarás en la carpeta templates de Joomla, subcarpeta rhuk milkyway.

Como vas a realizar cambios diversos en la plantilla, y en sus archivos asociados, te recomendamos primero tengas una copia a buen recaudo de la carpeta rhuk milkyway de la carpeta templates de Joomla. En caso de que los cambios no sean satisfactorios, “metas la pata” en algún archivo o desees recuperar el aspecto original de la plantilla siempre podrás volver a sustituirla con la carpeta original (un simple copiar – pegar en el caso de que estés trabajando en local o un subir archivos y sobreescribir por FTP en el caso de que estés modificando la plantilla en un servidor remoto).

 

Modifica el logo previo para adaptarlo a tu sitio

Este es el supuesto más sencillo. La premisa fundamental es aprovechar el logo presente en la plantilla, editarlo convenientemente con un programa de edición de dibujo (Gimp, por ejemplo) y volver a “colocar” esta nueva imagen en su carpeta correspondiente sobreescribiendo el archivo imagen original.

Así debes proceder en el caso de la plantilla rhuk milkyway.

Paso 1. Localiza el archivo imagen del logo de la plantilla

Acude a la carpeta donde se encuentra instalado Joomla y localiza la carpeta templates. En su interior se encuentra la carpeta rhuk milkyway que es la carpeta en la que se alojan todos los archivos necesarios para que la plantilla funcione correctamente. En ella se encuentra la carpeta images que es la que contiene todos los archivos de imagen de la plantilla.

En su interior está el archivo mw_joomla_logo.png que es el responsable del logo de la cabecera.

Copia este archivo a modo de copia de seguridad en una carpeta o directorio de tu equipo por si necesitas recuperarlo (misma recomendación que en el caso de una copia de seguridad de la carpeta completa de la plantilla, nunca se sabe qué puede pasar...).

Como vas a editar el archivo con un programa de edición de imágenes (utilizaremos Gimp) utiliza la opción Abrir con... del menú contextual del botón derecho del ratón y selecciona dicha aplicación (No lo olvides: Con el ordenador a cuestas utiliza Ubuntu 10.10 y las capturas de pantalla se corresponden con este sistema, pero puedes adaptar estos tutoriales si eres un usuario windows sin problemas).

 

Paso 2. Edita la imagen

El archivo mw_joomla_logo.png se abre en Gimp. Utiliza la herramienta borrador para eliminar el contenido completo de la imagen. Observa que cuando haces clic sobre su icono en la barra de herramientas de Gimp la parte inferior de la barra cambia para mostrar las opciones de la herramienta. Utiliza el tirador del apartado Escala para aumentar el tamaño de la herramienta y así trabajar con mayor comodidad y rapidez.

 

Ahora utiliza las herramientas que Gimp pone a tu disposición para incluir el nombre de tu sitio en la imagen. Por ejemplo, haz clic en la herramienta Texto, modifica sus opciones según tus preferencias y escribe Mi sitio (en nuestro caso hemos colocado el texto a la derecha de la imagen.

 

Incluir una imagen en este archivo es muy sencillo. Localiza la imagen que te gustaría incluir (puedes localizarla en Internet, tenerla en alguna carpeta de tu ordenador o en un disco duro o memoria USB, etc.). Nosotros hemos acudido al sitio web Open Clip Art Library que contiene numerosas imágenes, todas ellas de dominio público, hemos localizado una imagen que nos gusta y la hemos guardado en nuestro equipo.

En concreto, utilizaremos la imagen en la dirección URL siguiente por si deseas usarla: http://www.openclipart.org/image/800px/svg_to_png/BlockShape_1.png

Abre esta segunda imagen en Gimp. Ahora sólo tienes que reducirla al tamaño deseado (opción del menú Imagen – Escalar la imagen): 70 píxeles de alto. Haz clic en la ventana imagen de este archivo y selecciona el menú Editar – Copiar.

 

Acude a la ventana imagen del archivo mw_joomla_logo.png haciendo clic en su título para activarla y ahora haz clic en el menú Editar – Pegar como – Capa nueva.

¡Listo! Coloca la nueva capa para que el efecto sea agradable o te parezca adecuado (o coloca todos los elementos con cuidado en la imagen) con la herramienta mover.

Ahora guarda la imagen mediante Archivo – Guardar. Acepta las ventanas informativas (botón Exportar) y ya puedes ver el aspecto de tu nuevo sitio con la imagen.

Nota

Si estás trabajando en local, con la orden anterior de Gimp, has sobreescrito el archivo jw_joomla_logo.png. Por tanto, sólo necesitas acudir a tu navegador, teclear la dirección URL correspondiente http://localhost/portal y ver el nuevo logo que acabas de realizar ya disponible en la página.

 

Paso 3. Sobreescribe la imagen

En el caso de que estuvieras editando la imagen jw_joomla_logo.png fuera de su carpeta una vez que has editado la imagen correspondiente debes sustituir la original con esta nueva que acabas de editar. Y esto es muy sencillo.

• En el servidor local utiliza un copiar y pegar para “colocar” la nueva imagen jw_joomla_logo.png en la carpeta images de la carpeta rhuk milkyway reemplazando la existente.

• En un servidor remoto utiliza un cliente FTP para subir la nueva imagen a la carpeta images de la carpeta rhuk milkyway sobreescribiendo la existente.

El resultado final será que el nuevo logo será el mostrado en el sitio:

Mostrar este artículo en su sitio web

< Prev		Próximo >

Joomla - Plantillas