En el siguiente tutorial, vamos a manipular la plantilla instalada en el anterior tutorial. Trabajaremos directamente sobre los archivos de la plantilla y tocaremos algunos parámetros del CSS, de esta manera podremos dejar visualmente la plantilla a nuestro gusto y trasladar los conocimientos adquiridos a diferentes plantillas. También instalaremos y posicionaremos diferentes módulos.
Manipulación de la plantilla desde el administrador
- Entramos al administrador de Joomla, nos dirigimos a “Extensiones” y en el desplegable escogemos “Gestor de plantillas”. Hacemos clic sobre la plantilla.
- Dejamos estos parámetros como vienen por defecto. Esta plantilla nos da la opción de cambiar el logo desde su panel, pero esto no lo vamos a utilizar porque ya lo cambiamos en el anterior tutorial; pasa lo mismo con la descripción. Pinchamos en “Guardar y cerrar”.
- Luego pinchamos en “Plantillas” y nos dirigimos a la plantilla que estamos utilizando.
- Un consejo antes de tocar los parámetros de CSS: lo recomendable es copiar el código y pegarlo en un bloc de notas, por las dudas, si tocamos algo que rompa nuestro sitio.
- Buscamos el parámetro “Menú” para personalizar el menú.
- Podemos ver el cambio de color del fondo del menú.
- Ahora cambiemos el color del desplegable.
- Vemos cómo podemos manipular la plantilla en su totalidad, tanto los fondos como el largo y el alto, no solo del menú, sino también del “Header” y el “Footer”, entre otras cosas. Todos los módulos tienen su título que los encabeza de la siguiente manera: (/* Menu*/) o (/* Footer */); esto nos hace más fácil la búsqueda de ellos. Generalmente están por orden: el header al comienzo y el footer al final.
Trabajo con los archivos de la plantilla
- Ahora vamos a trabajar directamente sobre los archivos de la plantilla. Nos dirigimos al ordenador, más exactamente a la carpeta que contiene la plantilla, y la descomprimimos.
- Entramos a la carpeta “Images” y seleccionamos el archivo “Header”; este archivo corresponde al cabecero de la web.
- Con cualquier programa de edición y retoque fotográfico, editamos el actual archivo o creamos uno nuevo, siempre respetando el diseño del sitio que estamos desarrollando. Si reemplazamos el archivo lo tenemos que guardar con el mismo nombre y formato.
- Ahora entramos vía FTP al servidor y reemplazamos el archivo, ubicado en la siguiente ruta: tudominio/templates/jt004_j25/images.
- También podemos retocar la textura del fondo de la página, modificando o reemplazando el archivo “bg”. Luego de reemplazarlo o modificarlo, realizamos el mismo trabajo que el anterior archivo, subiéndolo vía FTP.
- Los demás archivos no los vamos a utilizar, porque pertenecen al Slide Show; no vamos a usar el Slide Show correspondiente a la plantilla, sino uno mucho más potente. Tampoco utilizaremos los iconos de la carpeta “System”. Pero si quieren hacerlo e ir probando, lo pueden hacer, para ir ganando experiencia.
Instalación de extensiones y módulos
Ahora nos centraremos en la instalación de extensiones, especialmente en la publicación e instalación de módulos.
Primero instalaremos y posicionaremos los módulos que vamos a utilizar. Recordemos que las posiciones que nos brinda la plantilla son todas posiciones donde podemos colocar los diversos módulos que iremos publicando.
- Empecemos por instalar el módulo de Slide Show, para darle más dinamismo a la página. Nos dirigimos a extensiones y en el desplegable seleccionamos la opción “Gestor de Extensiones”, e instalamos el siguiente módulo.
- Una vez instalado, nos dirigimos a “Gestor de Módulo” y entramos a “Autson Slideshow”.
- Ahora tendremos que manipularlo a nuestro gusto, manipulando los parámetros y posicionarlo. Primero cambiamos el título por uno más ameno y seleccionamos la opción ocultar título; también le indicamos la posición correcta, en este caso “slideshow”.
- Lo publicamos y en “Módulo asignado” pinchamos en “Todas las páginas”. Si queremos que el slide no aparezca en alguna página en concreto, seleccionamos “Solo en las seleccionadas”; y deseleccionamos la que queremos.
- Tocaremos los parámetros del módulo. Primero la medida la realizaremos de 960 de ancho (que es el ancho de la plantilla) y 300 de alto. En “SlideShow Effect”, elegimos el efecto que mejor se adapte a la página que estamos diseñando.
- En el parámetro “Navigation”, los cambios los realizamos dependiendo de la página que estamos diseñando. En este caso vamos a utilizar todos los parámetros de navegación (no deseleccionaremos ninguna). En “Type of navigation”, usaremos la opción “Thumbs”.
- En “Appearance”, “Navigation Appearance” y “Jquery” lo dejamos tal cual vienen por defecto, salvo que el diseño de la página lo demande.
- Ahora en “Images” tenemos que linkear las imágenes al slide. Pinchamos en “Guardar y cerrar”, nos dirigimos al panel de control y pinchamos en “Gestor Multimedia”. Subimos las imágenes al gestor (previamente tratamos las imágenes).
- Volvemos al módulo “Slide” para linkear las fotos. Ya dentro del módulo linkeamos las imágenes; si lo subimos en la raíz del gestor multimedia, la ruta es la siguiente (images/slide.png). Puedes colocar hasta veinte imágenes.
- Coloquemos un título, una descripción y un link, si queremos que vaya a una nota interna o externa.
- En este caso colocaremos solo dos imágenes, pero como dijimos anteriormente podemos colocar hasta veinte. Ahora pinchamos en “Guardar y cerrar” y nos dirigimos a la página para ver el resultado.
Pie de página, acceso y búsqueda
- Ahora colocaremos un pie de página con los datos principales de la página. En “Gestor de módulo”, pinchamos en “Nuevo” y escogemos el módulo “Personalizar HTML”. Lo dejamos tal cual lo mostramos.
- Haremos un acceso a usuarios, donde también podrán registrarse. Creamos un nuevo módulo y seleccionamos el módulo “Acceso”.
- Los parámetros los dejamos tal cual lo mostramos a continuación; luego pinchamos en “Guardar y cerrar”.
- Creamos un nuevo módulo y seleccionamos el módulo “Buscar”. Así tendremos una opción de búsqueda dentro de la página.
- Seleccionamos la posición, manipulamos el ancho de la caja y lo publicamos.
Publicación de las redes sociales
- Ahora instalemos una extensión para publicar las redes sociales. Instalamos el módulo y nos dirigimos a “Gestor de módulos”; ingresamos al módulo stalker.
- Modificamos el título, seleccionamos la posición y en los parámetros seleccionamos la medida del icono en “Icon Size”; y también el estilo en “Selecta n image Set”. Luego ya insertamos las redes sociales. Tenemos una gran variedad, casi todas las existentes en el mercado, pero solo aparecerán aquellas en las que coloquemos el usuario. Recuerda: no coloques todo el url, sino solo el usuario.
