Entramos al administrador de Joomla, nos dirigimos a “Extensiones” y en el desplegable escogemos “Gestor de plantillas”. Hacemos clic sobre la plantilla.
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”
Plantilla retocada
Luego pinchamos en “Plantillas” y nos dirigimos a la plantilla que estamos utilizando.
Plantilla utilizada
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ú.
-
Original
-
Con los cambios realizados
Podemos ver el cambio de color del fondo del menú.
Menú
Ahora cambiemos el color del desplegable.
Original
-
Con los cambios realizados
-
Página
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.
-
Descomprimimos
Entramos a la carpeta “Images” y seleccionamos el archivo “Header”, este archivo corresponde al cabecero de la web.
Header (Azul)
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
Header
Ahora entramos vía FTP al servidor y remplazamos el archivo, ubicado en la siguiente ruta, (tudominio/templates/jt004_j25/images).
FTP
Vamos al sitio y vemos los cambios.
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.
-
FTP
-
Fondo modificado
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.
Posiciones
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”.
-
Pinchamos en el módulo
-
Módulo slide
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”.
Posición
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.
Menú
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.
SlideShow Effect
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”.
Otros parámetro
En “Appearance”; “Navigation Appearance” y “Jquery” lo dejamos tal cual vienen por defecto. Salvo que el diseño de la página lo demande.
Navigation Appearance
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).
-
Gestor multimedia
-
Gestor multimedia, subida
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.
Imágenes
Coloquemos un título, una descripción y un link, si queremos que vaya a una nota interna o externa.
Coloquemos un título, una descripción
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.
Página
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.
-
Personalizar HTML
-
Así queda en el sitio.
Haremos un acceso a usuarios, donde también podrán registrarse. Creamos un nuevo módulo y seleccionamos el módulo “Acceso”.
Acceso
Los parámetros los dejamos, tal cual lo mostramos a continuación, luego pinchamos en “Guardar y cerrar”
Parámetros
Creamos un nuevo módulo; y seleccionamos el módulo “Buscar”. Así tendremos una opción de búsqueda dentro de la página.
Buscador
Seleccionamos la posición, manipulamos el ancho de la caja y lo publicamos.
-
Paramétros buscador
-
Página
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.
Redes Sociales
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.
Redes Sociales página
Cargando...
