Joomla. Diseño, manipulación de plantilla y gestión de módulos

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.

• 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 block 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 como podemos manipular la plantilla en su totalidad, tanto los fondos, como el largo, el alto, no solo del menú, sino también, del “Header”; “Footer”, entre otras cosas. Todos los módulos tienen su titulo que los encabeza de la siguiente manera; (/* Menu*/) o (/* Footer */), esto nos hace más fácil la búsqueda de ellos; y generalmente están por orden, el header al comienzo; y el footer al final.
  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 remplazamos 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 remplazando 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 lo 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 puedes hacer, para ir ganando experiencia.
  Ahora nos centraremos en la instalación de extensiones, especialmente a 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 modulo 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 modulo, primero la medida lo 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”, os cambios los realizamos dependiendo la página que estamos diseñando. En este caso vamos 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 modulo linkeamos las imágenes, si lo subimos en el 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.

• Ahora colocaremos un píe 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.

• 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 selecciona 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 las que coloquemos el usuario, recuerda no coloques todo el url, sino solo el usuario.