Descuento 20% Diciembre
Plugin Optimización de Imágenes Gratuito para WordPress
Domingo, 01 Enero 2012 22:49

Insertando nueva posición en la plantilla Beez-20 para Joomla! 1.7 y añadiendo imágenes con enlace con JT Skitter Slideshow

Escrito por 
CMS:  Joomla! |  Versión:  1.7 |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  15 minutos


JT Skitter SlideshowUno de los cambios menos acertados por parte de Joomla! fue la incorporación de la plantilla Beez-20 como nativa para Joomla! 1.7 y también disponible en Joomla! 2.5 (beta), sobre todo si tenemos en cuenta que esta plantilla tiene menos desarrollo visual que su predecesora JA Purity II para Joomla! 1.5 que permitió a muchos usuarios, sobre todo noveles, desarrollar sitios webs a partir de la misma con una personalización más aceptable que la nueva Beez-20.

No obstante adaptar la plantilla a nuestras necesidades no es un proceso complejo, si algo laborioso, pero en absoluto imposible, y hacerlo nos permite poder llevar a un nivel más usable esta plantilla y de esta forma adaptar su comportamiento a las necesidades del proyecto que estemos acometiendo.

Vemos en este artículo como modificar la plantilla Beez-20 para sustituir el actual fondo central que aparece justo debajo del menú horizontal superior, donde actualmente no existe posición definida para que el usuario pueda situar un módulo, y lo convertimos en una posición que llamaremos "slideshow" dondo posteriormente instalaremos el módulo JT Skitter Slideshow que nos servirá para mostrar imágenes con carga aleatoria y múltiples efectos de transición y enlace definible a un artículo interno o externo de contenido.

Este módulo JT Skitter Slideshow dispone de 22 impresionantes efectos de pase de diapositivas enlazables que trabaja haciendo uso de la tecnología jQuery con posibilidad de anular conflictos con MooTools, en caso de existir con la plantilla u otras extensiones y que está disponible para Joomla! 1.7 de forma gratuita en el JED.

Características destacadas del módulo:

  • 22 efectos de transición aplicables.
  • 4 opciones de "ningún conflicto" jQuery.
  • jQuery versión 1.6.2, 1.6.4, 1.7, 1.7.1.
  • Posibilidad de especificar los colores de los botones de navegación del panel de administración.
  • Capacidad de ocultar los botones de navegación.
  • Posibilidad de establecer para cada imagen su propio efecto de aparición.
  • Descripción mediante HTML personalizado.


Ver y valorar JT Skitter Slideshow en el Joomla! Extensions Directory.

Descargar JT Skitter Slideshow desde la web del autor.


Para crear la posición lo primero que debemos hacer, previa copia de seguridad, preferiblemente con Akeeba Backup, es declarar dicha posición en el archivo de la plantilla Beez-20:

/templates/beez_20/templateDetails.xml

Editamos el archivo y a la altura de la linea 47:

< position>position-14< /position>
< /positions>

Abrimos un espacio e incorporamos la nueva posición y guardamos los cambios:

< position>position-14< /position>
< position>slideshow< /position>
< /positions>

A continuación localizamos en el archivo index.php de la plantilla Beez-20, a la altura de la línea 114 el siguiente código:

< div id ="header">
< div class ="logoheader">
< h1 id ="logo">
...

Y añadimos después de la etiqueta < div class="logoheader" > el código de la nueva posición, que actualmente no existe:

< div id ="header">
< div class ="logoheader">
< div class ="slideshow">
< jdoc:include type="modules" name="slideshow" style="beezDivision" />
< /div>
< h1 id="logo">
...



Añadimos una clase nueva llamada "slideshow" en la hoja:

/templates/beez_20/css/position.css

Que contenga a la altura de la línea 236 lo siguiente:

.slideshow
{
margin:0;
padding:0px 10px 10px ;
position:absolute;
z-index:10000;
text-align:left;
font-weight:normal;
line-height:1.5em;
min-height:159px;
}

Tambien en el mismo archivo debemos localizar el estilo "header" y añadir el código height: 300px; como se muestra para mantener la altura del módulo de slideshow:

#header
{
display:block !important;
position:relative;
padding:0px 0 0 0;
overflow:hidden;
width:100%;
height:300px;
}

Por último, en el proceso de añadir la nueva posición "slideshow", comentamos el estilo que carga la imagen de fondo de la plantilla /templates/beez_20/images/personal/personal2.png a la altura de la línea 94 en la hoja de estilos:

/templates/beez_20/css/personal.css



Ahora podemos proceder a instalar el módulo JT Skitter Slideshow, previamente descargado, desde el gestor de extensiones de Joomla! 1.7. Una vez instalado accedemos al mismo desde el Gestor de Módulos y lo configuramos asignándole como posición "slideshow" y el resto de configuraciones en base al vídeo adjunto.

Los textos del campo "label text" de cada imagen que se mostrarán sobre fondo negro en la esquina inferior derecha, pueden componerse con etiquetado html, por ejemplo.

< h3>& nbsp;& nbsp;& nbsp;& nbsp;Cocinas modernas equipadas con la últimas tecnologías& nbsp;& nbsp;& nbsp;& nbsp;< /h3>

En el siguiente vídeo repasamos la creación de la nueva posición en la plantilla y la instalación y configuración del módulo que nos permitirá disponer de un slideshow con enlace a contenidos en la plantilla Beez-20 de Joomla! 1.7



El resultado seria que tras estos cambios pasamos de ver esta cabecera en la plantilla Beez-20 de Joomla! 1.7/2.5:



A ver la siguiente nueva cabecera que ahora es una posición que se utiliza con el módulo JT Skitter Slideshow:



Mejorar las funcionalidades de la plantilla Beez-20 para Joomla! 1.7 y 2.5 (beta) es relativamente sencillo si observamos los pasos descritos en este artículo que permitirán que pasemos de una cabecera fija y estática a una posición donde podamos habilitar módulos con contenido dinámico como es el caso de JT Skitter Slideshow.

Nota: En alguna partes del código mostrado hemos introducido espacios para poder documentar el proceso.



¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Luis Méndez Alejo

Miembro del equipo técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Google+


Plugin Optimización de Imágenes Gratuito para WordPress