En Joomla y en cualquier CMS del mercado, cada módulo debe ir colocado en una zona de la web. Con este tutorial de Joomla vamos a ver cómo podemos modificar las posiciones joomla para que los módulos queden en las posiciones que nos interesan y podamos distribuir el contenido de nuestra web a nuestro gusto.
¿Cómo ver posiciones Joomla?
Os voy a enseñar un pequeño truco para ver las posiciones de los módulos de Joomla.
Basta con añadir al final de la url de nuestra web joomla lo siguiente:
/?tp=1
La url quedaría así:
https://www.miweb.com/?tp=1
Y os debería salir algo como esto. Vuestra web con todos los módulos identificados con el nombre que tienen asignado.
Para que en Joomla! 2.5 funcione hay que activarlo desde el panel de administración en "Extensiones > Gestor de Plantillas > Botón Opciones > Pestaña Plantillas":
Una vez qua sabemos las posiciones joomla de nuestra plantilla, vamos a ver cómo podemos mover los módulos a las posiciones que nos interese.
Mover posiciones de los módulos Joomla
Vamos a ver cómo mover las posiciones de los módulos Joomla!. Las posiciones predefinidas de los módulos de una plantilla Joomla! se definen en el fichero templateDetails.xml entres las entradas <position>...</position>.
Normalmente existen estas posiciones predefinidas según la plantilla: left, right, top, bottom, inset, banner, header, footer, newsflash, legals, pathway, breadcrumb, user1, user2, user3, user4, user5, user6, user7, user8, user9, advert1, advert2, advert3, debug y syndicate.
A cada módulo de nuestra web Joomla! le asignaremos una de estas posiciones. Pero, ¿cómo sabemos las posiciones de las posiciones predefinidas?.
Podemos consultar las posiciones de forma visual, que es la que comentaba en mi anterior post. Añadiendo en la url "?tp=1". Para más detalles pinchar aquí.
Pero si queremos saber las posiciones exactas (x,y) para poder modificarlas, tenemos que jugar con varios ficheros de la plantilla.
Ficheros:
- templateDetails.xml
- index.php
- template_css.css
Con la ayuda de estos tres ficheros seremos capaces de averiguar las posiciones exactas de cada una de las posiciones predefinidas. Normalmente uno pensaría que en la hoja de estilo CSS vendría una definición de una clase "user5" por ejemplo, donde ya vendrían las posiciones de user5. Pero no es así. Veamos cómo averiguar la posición de user5:
- Con el fichero "templateDetails.xml" tenemos las posiciones configuradas para esta template. Puede darse el caso de que haya configuradas más posiciones de las que se están usando.
- Con el fichero "index.php" buscamos el nombre de la posición en las entradas "jdoc", no en los divs, y nos quedamos con el nombre de la división que lo contiene. En este caso, "ja-newsflash".
<div id="ja-newsflash"> <jdoc:include type="modules" name="user5" /> </div> - Con el fichero "template_css.css" buscamos el nombre de la división "ja-newsflash" para modificar su posición:
#ja-newsflash,#ja-searchwrap { width: 23%; }
Pues eso es todo. Un saludo y espero que os sea de utilidad.
¡Hola! Soy Javier. Soy informático y me gusta documentar todo lo que aprendo. En mi blog te enseño todo lo que sé y cómo puedes aprender a crear tu propia web, mejorar el SEO y aplicar técnicas de Marketing Digital para conseguir mayor visibilidad. Suscríbete para no perderte ninguna de mis guías sobre WordPress, posicionamiento SEO o Marketing Digital.
muy buen tip voy a ver si me sale algo
también muy bueno el truco para ver las posiciones de los modulos, la verdad excelente
ahora yo lo que quisiera saber es como se agrega una nueva posicion de moduvo.
Vete a editar un módulo que ya tengas. En el campo posición, escribe tu nueva posición, llámala por ejemplo "posicion". Después en la plantilla, añades la siguiente instrucción
haciendo referencia a la posición que has creado. Ya sólo te falta envolverlo en un DIV con una nueva clase y listo. Esto es un resumen de lo que explican en el Centro de Ayuda de Joomla!.
mmmm lo voy a chequear en el centro de ayuda a ver si lo encuentro
gracias javier
Muy util, mil gracias. ojala pongas más tutos de Joomla.
Muy buen aporte. Explicado con clarida. hasta yo, que soy un iniciado en joomla he podido modificar lo que necesitaba. Mil gracias.
Hola, no encuentro el archivo template_css.css en mi plantilla jnex... a que se debe?????
No te sabría decir. Cuando este tutorial lo hice sobre la versión 1.5 de joomla. Si estás usando una versión superior puede que haya cambiado un poco. Pero creo que algún fichero .CSS equivalente tendrás con la información que necesitas.
Mil gracias por el interés. He buscado hasta el cansancio por todos los .CSS, los PHP, los .XML y solo en el templateDetails.xml se menciona la posición que busco, pero no encuentro en cuales de esos archivos puedo cambiarle el ancho. Ese es mi problema. Gracias de todas manera por responder.
Tienes la web publicada en internet? Si me das la url y me dices qué es lo que quieres cambiar, a lo mejor te puedo ayudar.
Gracias. Deseo que el espacio del slide principal sea mas ancho y que el del medio obviamente se reduzca. Son 3 posiciones : el SL1 donde esta el slide principal, el SL2, el bloque del medio, y el SL3 donde esta el banner y un cuadro superior. Si hay una forma de saber donde se edita los anchos de cada posicion seria genial, por que los modulos no van mas alla del tamaño de cada posicion o el pero de los casos se desacomodan.
Pues parece que el ancho de cada módulo está definido dentro del HTML, no en el CSS (aunque no estoy seguro porque aparece también en un CSS ahí a la derecha). De todas formas, mira la captura: https://www.javierrguez.com/wp-content/uploads/editar_modulos1.jpg
Tienes que buscar entre todos los ficheros del theme la capa <div class="ja-box-wrap column ja-box-left" el center y el right y modificar los dos parámetros el ancho en % y el ancho en píxeles. Como puedes ver en la captura, estoy cambiando el ancho en % y se va ampliando la zona azul, cuando cambies el ancho en píxeles ampliarás el ancho del módulo hasta completar esa zona azul.
Puedes hacer lo mismo si te instalar el complemento de Firefox "FireBug" y así puedes hacer pruebas en "vivo" y localizar dónde tienes que tocar.
Un saludo.
Genial, al final di con la línea, no habia contado con que la medida se toma en porcentaje. Y ese add el firebug que util resulto, me esta ayudando bastante. Pero una consulta sobre eso, cuando encuentro una linea que me interesa en firebug, como se a que archivo lo pertenece?
Me alegro de haberte ayudado. Si es del CSS, sí te dice cómo se llama el archivo y en qué línea está. Si no te lo dice, puede ser porque pertenece al CSS principal de la plantilla. Si la línea que quieres cambiar es del HTML, no puedes saber que fichero PHP debes tocar porque el navegador lo ha interpretado todo y lo ha unido. Ahí necesitas un poco de intuición. Pero para que sea más fácil, yo uso el Notepad++, que te permite buscar en todos los archivos de una carpeta, pongo el nombre de la capa DIV y lo busco, y así localizo en qué fichero PHP está.
Un saludo.
Saludos Javier, excelente articulo, un favor, quiero crear un banner al pirncipio pero no existe esa posicion horizontal. La idea es que al principio pueda colocar un carrusel de noticias el cual está en la parte inferior en estos momentos porque no hay mas donde
Hola Fernando. No te sabría decir. Hace tiempo que ya no trabajo con Joomla!. Lo siento.
Hola una pregunta ¿como activar una posición que no aparece en la lista de posiciones de módulo? por ejemplo el masshead, aparentemente en la versión de Joomla 2.5 si estaba activada en la lista de posiciones pero ahora no. Estoy usando el joomla 3.5 y la plantilla Ja University
Lo siento Rody, hace tiempo ya que no utilizo Joomla. No sé decirte cómo hacerlo. Un saludo.