ÚLTIMOS ASPECTOS DEL TEMPLATE QUASAR PARA JOOMLA 1.5

     Vamos a ver en esta última lección de este extenso manual sobre el template Quasar, algunos otros aspectos significativos del mismo. Antes de nada, recuerda que habíamos creado nuestro propio logo (bien con Fireworks CS3 o con Photoshop CS3 --en lecciones anteriores explico cómo hacerlo--) que salvamos con un nombre cualquiera:

    Lo último que debemos hacer ahora es proceder a cambiar los nombres tras subir nuestro logo a través de FTP al servidor de nuestra web. Concretamente, la subide debe hacerse a la carpeta: /templates/rt_quasar_j15/images/logo/style1 (o cualquier otro de los 6 estilos, según el que hayamos elegido para nuestra web). Ahí cambiamos el nombre:

    Tan simple como colocar nuestro logo con el nombre logo.png y al original ponerle otro cualquiera como ves. Si ahora entramos a nuestra web, ya debemos ver el cambio:

COLOCAR EL MENÚ EN NUESTRA WEB

    Pero ¿verdad que se echa algo en falta?, efectivamente, no aparece el menú en la parte superior de la web. Así que vamos a solucionarlo y para ello vamos a:

    Entramos en el Gestor de módulos desde nuestro Panel de administrador de Joomla 1.5 y picamos sobre Menú principal:

    Se trata ahora de publicar el menú en la posición correcta, concretamente en "header-b" para que se muestre correctamente en nuestra web. Elegimos dicha posición y "Guardar":

    Ya podemos ver que aparece perfectamente posicionada y funcionando también los submenús.

QUITAR MÓDULO PARA TAMAÑO DE TEXTO

    Efectivamente, he comprobado que --al menos en mi web de pruebas--, este módulo que aparece en la parte superior izquierda "Text Size" no funciona correctamente y cuando pico en una de las flechitas para aumentar o disminuir el tamaño de la fuente en la web, envía un error.    Para quitar este módulo, ya debes saber que es tan sencillo como ir a su posición desde Gantry:

    Y en el apartado "Features > Font-Sizer" no tenemos más que picar sobre ON para pasarlo a OFF en el apartado "Mostrar". Ahora si vamos nuevamente a nuestra web y actualizamos la misma con "Control + F5", ya habrá desaparecido:

OTRAS OPERACIONES QUE PUEDEN INTERESARTE

    Si quieres cambiar el "Copyright" original por el tuyo propio, deberías ir al archivo:

    Se encuentra como ves en la carpeta: /templates/rt_quasar_j15/features de tu servidor; ahí haces los cambios que quieras.

    Si lo que quieres es colocar una copia del menú principal dentro de la web (por ejemplo en la posición sidebar-a) no tendrías más que hacer una copia de ese menú y publicarla en dicha posición (tengo un manual publicado sobre cómo hacer una copia del menú, si no sabes hacerlo). Quedaría en este caso así:

    ** Enfín, seguramente se quedan muchas cosas en el tintero y seguro te surgirán dudas aún. Sin embargo este template es tan versátil que podrás resolver cualquiera de ellas usando la lógica y sobre todo haciendo pruebas con el template Quasar hasta que lo manejes sin problemas. Recuerda que dispones de un buen número de posiciones modulares así que juega con ellas publicando módulos ahí, y también no te olvides de aprender (y comprender) el uso de la extraordinaria utilidad GANTRY que te permitirá realizar cambios sin problemas.    ** Mi consejo es que instales Quasar en una web en local (con Xampp), y aprendas todos los secretos de este magnífico template que a pesar de todo...¡¡ es gratuíto !!, aunque no lo parezca.

QUASAR TEMPLATE: [ 1. Template interesante ] [ 2. Librería Gantry ] [ 3. Logo con Fireworks CS3 ] [ 4. Logo con Photoshop CS3 ] [ 5. Los menús ]

CREAR EL LOGO PARA QUASAR, CON ADOBE PHOTOSHOP

    Había quedado en la lección anterior en que explicaría la forma de crear nuestro logo para colocar en la cabecera del template Quasar, con Adobe Photoshop CS3 (si no dispones de Fireworks CS3 que es preferible). Supongo que tienes algo de experiencia en el manejo de Photoshop, aunque de no ser así creo que con las explicaciones que te doy en esta lección no tendrás problemas para llevar a cabo la tarea sin problemas.

    Te dije en las lecciones anteriores que tenías que descargar dos archivos necesarios para Quasar, y uno de ellos es el llamado "quasar-sources.zip" el cual debes descomprimir y ofrecerá entre otros el archivo "logo-source.png" que será el que tenemos que abrir con Photoshop:

    Fíjate que el archivo de imagen, tiene unas medidas de 350 x 100 px. así que ya dentro de Photoshop, ahora además de tener abierto este archivo como dije, tenemos que crear uno nuevo con las mismas medidas de 300 x 100:

    Picamos para ello en "Archivo > Nuevo" y nos aparecerá este cuadro de diálogo:

    Fíjate en que en "Contenido de fondo" debes colocar Transparente, y el resto de parámetros como te indico en la imagen de arriba. Picamos ahora sobre OK:

    Con la herramienta "Selección rápida" (que te indico en la imagen), pico sobre el triangulito rojo de la imagen original para que quede seleccionado (verás que queda rodeado por unas líneas cortas que parecer girar alrededor del triángulo rojo), ahora:

    Se trata de seleccionar un color picando sobre el cuadrado de "Configurar color frontal" (elijo un verde como ves); acto seguido picamos sobre el cubo "Herramienta bote de pintura" y picamos dentro del triangulito rojo que teníamos seleccionado. Pasará dicho triángulo a coger el verde seleccionado.

    Ahora nuevamente elegimos la "Herramienta selección rápida" y hacemos clic dentro de cada uno de los 3 triángulos (ver imagen de arriba) para que queden seleccionados. Ahora debemos "Copiar" esa selección mediante "Control + C" y acto seguido:

    Elegimos la "Herramienta marco rectangular" (ver imagen de arriba) y seleccionamos en la nueva imagen el lugar donde queremos colocar la selección (procura que sea más o menos en el mismo sitio que la imagen original). Procedemos a "Pegar" (mediante "Control + V") la selección que habíamos hecho. Ahora hay que escribir el texto del logo:

    Para ello hay que primeramente tomar la "Herramienta cuentagotas" y con ella colocarnos encima de una letra del logo original para tomas el color; se abre el "Selector de color" (ver imagen de arriba) y picaremos sobre OK aceptando el color que propone. Será el gris del texto original. Ahora:

    Es obvio: picamos sobre la "Herramienta texto horizontal" y elegimos una fuente arriba (yo elijo Forte) y un tamaño de fuente (elijo 48 pt) para finalmente picar dentro de la imagen (lugar aproximado donde queremos que se coloque el texto) y escribir el texto que queremos para nuestro logo. Procura que no sea muy largo para que las letras queden bastante grandes.    Con esto queda listo el texto principal; si además queremos colocar el texto secundario --el que aparece en rojo y más pequeño debajo--, no hay problema, creamos nueva capa picando en la esquina inferior derecha sobre el icono que te muestro:

    Y ahora los pasos son los que expliqué más arriba: seleccionar la herramienta texto, elegir un color para el mismo (rojo), colocarnos en el lugar donde queremos que aparezca y elegir la fuente (en este caso elijo Arial) y el tamaño (12 pt) y escribimos el texto:

    Dejamos listo así nuestro logo; sólo queda guardarlo y para ello picamos arriba en el menú, en "Archivo > Guardar como..." y le indicamos que queremos guardarlo como un ".png" además de indicarle la carpeta y el nombre que queremos darle:

    Queda así listo como puedes observar:

    Y si queremos verlo, podemos abrirlo por ejemplo con Paint y este será su aspecto:

    ¡¡ Perfecto !!, es un logo que sustituirá sin problemas al original del template Quasar de Joomla 1.5 y que si quieres que sea el que instales en tu web, será sumamente sencillo el cambio sin más que seguir las instrucciones que te dí en la lección anterior (subirlo por FTP a tu servidor y colocarlo en la carpeta correspondiente, sustituyendo el original por este --por supuesto cambiando nombre del original y poniéndoselo al nuestro--; así de sencillo.    Espero que esta lección te haya resultado útil. Seguiremos en la próxima viendo más sobre el template Quasar, pues queda aún algo que explicar...

 QUASAR TEMPLATE: [ 1. Template interesante ] [ 2. Librería Gantry ] [ 3. Logo con Fireworks CS3 ] [ 4. Logo con Photoshop CS3 ] [ 5. Los menús ]