Creación de módulo flotante para Joomla

A veces queremos curiosear un poco más allá y meternos en el código fuente de la aplicación. A continuación os dejo dos maneras para crear un módulo flotante y una nueva posición dentro de una plantilla de Joomla. Cabe destacar que dicho ejemplo funciona para cualquier versión de Joomla.

Importante: antes de iniciar hacer siempre una copia de seguridad de tu sitio.

Paso 1.
En el archivo TemplateDetails.xml crear un nueva posición de nombre flotar, por ejemplo: flotar

Paso 2.
Tendremos que editar tres archivos:

a. index.php
b. templateDetails.xml
c. template.css

Abrimos index.php con un editor de notas y agregamos justo debajo de la etiqueta body la siguiente posición:

Cabe destacar que en este caso editar el index.php es aplicable para las plantillas básicas de Joomla (Atomic, Beez_20, Beez5), pudiendo ser diferente para plantillas de pago como las de Gavick, rockettheme, Joomlart, etc…

Explicación del código:

a) En el archivo index.php colocar la etiqueta div cuyo contenedor alojará el módulo.

b) La etiqueta class: define los estilos CSS que va a tener el módulo y que irán incluidos en el fichero template.css.

c) Name define el nombre de la posición del módulo. Este nombre lo asignamos en el archivo templateDeatils.xml.

d) jdoc, etc..: Es siempre igual para crear las posiciones de los módulos, solo hay que cambiar el nombre que tendrá cada módulo, en nuestro caso se llama “flotar”. Este código lo colocarás justo después de la etiqueta body y luego la puedes adaptar con los estilos de los márgenes.

Paso 3.
En el fichero template.css colocarás el siguiente código para definir los estilos CSS del módulo, e incluso podrás personalizarlo:

/*FLOAT MODULE*/
.compartir{
left: 0;
margin-top: 60px;
z-index: 2;
width: 180px;
height: 50px;
line-height: 20px;
padding: 0px;
text-align: left;
cursor: pointer;
border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
-webkit-border-radius: 0px 10px 10px 0px;
-o-border-radius: 0px 10px 10px 0px;
position:fixed;;
overflow:hidden;
}
.compartir a{
text-decoration: none;
}