Ancho disponible en submenú plantilla Dione Joomla 3  

Hola Micky,

¿Nos puedes indicar a que "submenú" te refieres? yo solo veo el menú superior único en esa plantilla.

Saludos

Perdona, Luis, quizás no me he explicado bien.

Me refiero al menú desplegable que aparece bajo el item "Servicios" del menú principal. De este item "cuelgan" 5 sub-items: Reformas y Adecuación..., Obra Civil y Medioambiental, Ingeniería de Proyectos, etc...

El problema es que al ser títulos de menú muy largos me aparecen en dos líneas, y lo que quiero es aumentar el width disponible (ahora este valor es de 180px) a 230px para que se vean en una sóla línea.

Cómo comentaba antes, he creado el archivo "dione-custom.css" en la carpeta css de la plantilla y he intentado modificar el ancho desde allí, probando con varias opciones que he encontrado en el foro, pero no he sido capaz.

¡Gracias de nuevo 😉

Hola Mickey,

Tienes que centrarte en los estilos .dropdown-menu a partir de la línea 1808 del archivo de estilos /public_html/templates/dione/css-compiled/bootstrap.css de tu plantilla.

OJo con lo que modificas porque podrias destrozar la plantilla en cuestión de minutos si no conoces el comportamiento de BootStrap en Joomla para CSS.

Haz copia de seguridad antes de proceder.

- Copias de Seguridad en Joomla 2.5.x y 3.1.x con Akeeba Backup: www.webempresa.com/blog/item/1109-copias-de-seguridad-en-joomla-25-y-3x-con-akeeba-backup.html

Saludos

Muchísimas Gracias, Luis

Pruebo y os digo algo.

¡Vaya trastada!... todo el código css del archivo "bootstrap.css" está en una sola línea :silly:

¿Hay alguna forma sencilla (no sé si utilizando Notepad++ :S ) de ordenarlo por filas?

¡Gracias!

Hola,

Lo mas sencillo es que bajes el tamaño de la letra ya que al aumentar el ancho se descuadra para dispositivos móviles. Prueba a insertar el siguiente código en el fichero dione-custom.css que haz creado:

.gf-menu .item {
    color: #6E6E6E;
    cursor: pointer;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    line-height: 21px;
    outline: 0 none;
    padding: 4px 8px;
    text-align: left;
    text-decoration: none;
}

Buenas noches, Johnny. Muchas gracias por tu respuesta.

He probado el código css que me has pasado en el dione.custom.css, pero no funciona ( muy raro, porque parece estar todo bien). He probado a cambiar el valor font-size a otros valores, pero no hace ningún efecto. Por si las moscas, he probado a borrar la caché de Joomla, cambiar de navegador..., pero nada. He probado el cambio en el Firebug y la verdad es que esta solución, aunque no es la que más me gusta, me soluciona el problema de una forma bastante aceptable.

No sé qué puede pasar porque tengo otro código css en el mismo archivo, para modificar el color del pie de la web y sí que me funciona.

/*Para cambiar el color del footer*/

#rt-copyright {
    background: none repeat scroll 0% 0% rgb(68, 113, 143);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
}

La verdad es que preferíria intentar ampliar el ancho en 20 o 30 píxeles. No creo que afectara a la vista móvil, ya que en ese modo se pasan todos los items del desplegable a 2 líneas. En cualquier caso me merecería la pena probarlo.

¿Alguna otra sugerencia?

Muchísimas gracias de nuevo, Johnny 😉

Hola,

Puedes confirmarnos la ruta del fichero?. Para cambiar el ancho tienes que realizar algunas modificaciones en el código, te recuerdo que no brindamos soporte sobre CSS.

No ofrecemos soporte a webs alojadas en servidores externos o localhost ni soporte css o programación.

Esta es la ruta donde tengo el archivo css: /public_html/soltum/templates/dione/css/ dione-custom.css
La verdad es que no sé por qué no funciona. Creo que la ruta es correcta y el otro código me está funcionando 🙁

Sé que no ofrecéis soporte css, Jhonny, y por eso no espero un tuto detallado, pero lo único que necesito es una mínima orientación sobre qué archivos modificar. Siempre me habéis ayudado muchísimo de esta forma. .-D

Te agradezco mucho tu ayuda. 😉

Ya dí con el fallo del código css del dione-custom.css. Se me había escapado un asterísco y tenía el código como comentario. ¡Mil disculpas, Johnny!

De momento lo voy a solucionar reduciendo la letra. Pero si me pudieras indicar dónde tocar para ampliar el ancho, te lo agradecería mucho. Ya es cuestión de curiosidad. 😉

¡Gracias!

Hola,

Mi recomendación es que utilices una herramienta como firebug. En el siguiente artículo del Blog de Webempresa se explica el uso de Firebug, herramienta destinada a localizar cadenas de código, estilos, etc., desde tu navegador:

-

Firebug Lite for Google Chrome:
- https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench

Fifebug Firefox:
- https://addons.mozilla.org/es-es/firefox/addon/firebug/

Una vez localizada la sección de código a modificar tendrás que copiarla y pegarla en el fichero CSS personalizado, tendrás que verificar que el cambio no afecte al modo Responsive.

Gracias, Johnny ¡Qué tengas una buena jornada de soporte!