Ancho disponible en submenú plantilla Dione Joomla 3  

 
Micky
 Micky
Estimable Member

Buenas noches,

Estoy tratando de modificar el ancho del submenú en la plantilla Dione con Joomla 3, pero no consigo modificarlo.

En Firebug me aparece que este estilo está marcando el ancho disponible para el submenú:

element.style {
    width: 180px;
}

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.

Os agradecería mucho que me orientaráis un poco.

¡Gracias! 😉

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 19/06/2014 11:26 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Micky,

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

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 20/06/2014 12:15 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Micky
 Micky
Estimable Member

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 😉

ResponderCitar
Respondido : 20/06/2014 12:35 am
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 20/06/2014 12:58 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Micky
 Micky
Estimable Member

Muchísimas Gracias, Luis

Pruebo y os digo algo.

ResponderCitar
Respondido : 20/06/2014 1:04 am
Micky
 Micky
Estimable Member

¡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!

ResponderCitar
Respondido : 20/06/2014 1:23 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

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;
}

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 20/06/2014 1:36 am
Micky
 Micky
Estimable Member

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 😉

ResponderCitar
Respondido : 20/06/2014 2:09 am

Cursos Gratuitos WordPress

Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

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.

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 20/06/2014 2:21 am
Micky
 Micky
Estimable Member

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. 😉

ResponderCitar
Respondido : 20/06/2014 2:29 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Micky
 Micky
Estimable Member

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!

ResponderCitar
Respondido : 20/06/2014 2:39 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

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:

- https://www.webempresa.com/blog/usando-firebug-para-modificar-la-apariencia-de-una-plantilla-joomla.html

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.

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 20/06/2014 2:46 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Micky
 Micky
Estimable Member

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

ResponderCitar
Respondido : 20/06/2014 2:48 am

Por favor Iniciar Sesión o Registro