Avisos
Vaciar todo
Hola.
Tengo un problema con la longitud de los items de menú, si le echáis un vistazo a mi URL: http://manceboa-cp74.webjoomla.es/zenith/, Menú Empresa y dentro de empresa Quienes Somos, dentro de quienes somos tengo las diferentes áreas de mi oficina, si os fijáis en la parte de dirección y demás áreas la longitud de los nombres de las personas que hay aparece en 2 lineas en vez de una linea, ademas en la pestaña Parameters (Expose Menu Settings) campo Drop-Down Width[px]
le he puesto un valor de 400px, pero lo que hace es engrandar la parte del Items de menú pero el nombre no ocupa toda la parte del items de menú.
Lo que realmente a mi me gustaría es que el nombre de las personas que aparecen no ocupasen 2 líneas
.
No se si me he explicado bien.
Un cordial saludo
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 05/01/2014 11:23 pm
Hola José Antonio Farfán,
Veo que has establecido 400px para el ancho del área del submenú pero otro estilo pinta 200px por lo que lo limita.
Mira la siguiente captura:
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/
Saludos
Respondido : 06/01/2014 12:39 am
Gracias Luis por tú respuesta:
He instalado el firebug que me has comentado, con el firebug, no lo veo bien lo que tú me reflejas en la imagen.
He utilizado la utilidad de inspeccionar elemento que trae el propio Google Chrome y te adjunto una imagen con lo que yo he capturado de la misma opción de menú que tú me has puesto, lo que no se la parte donde pone:
element.style {
width: 400px;
}
No tengo ni idea en que archivo css, lo tengo que modificar ya que en el archivo template.css no se encuentra esa linea.
Me puedes indicar como localizar con exactitud lo que tengo que modificar y en que archivo se encuentran los elementos de la página.
Un Saludo.
Respondido : 07/01/2014 9:47 am
Hola,
Tendrías que editar el archivo templates/tx_zenith/css/template.css. Previa copia de seguridad de este archivo añade el siguiente código al final del mismo:
.ex-menu .dropdown .column {
width: 270px !important;
}
.ex-menu li:hover > .dropdown li:hover > .dropdown {
width: 270px !important;
}
Respondido : 07/01/2014 11:20 am
Gracias Pablo por tú respueta:
Te adjunto una imagen que en parte me soluciona la parte final donde está el nombre del empleado, pero la parte del submenu Quienes somos y Dirección que lo ha puesto a una longitud de 270px, que no me gusta eso, yo solo quiero ampliar a 270px la parte de los empleados ya que son más largo.
¿Hay alguna forma de poner cambiar solo la parte de los empleados?
Un cordial saludo.
Respondido : 07/01/2014 11:53 am
Hola,
Estos cambios CSS que te he indicado se aplican de forma global para todos los elementos del desplegable de menú.
Aunque se podría llegar a aplicar cambios en los CSS para que solo afecta a elementos de cuarto nivel de menú no es recomendable hacerlo así porque posiblemente tendrás problemas con otros elementos de menú de distinto nivel de profundidad, por lo que he mejor dejarlo como te había indicado.
Respondido : 07/01/2014 12:15 pm
Gracias Pablo;
Como soluciono el problema de la longitud del menú Empresa, el marco es inferior a 270 y se sale el fondo y cuando paso el ratón del marco del submenú, los submenus que hay dentro de Empresa tiene la longitud de 270px, como le pongo también al Menú Empresa 270px..
Un Saludo
Respondido : 07/01/2014 12:37 pm
Hola,
Añade el siguiente código adicional al archivo que te había indicado antes:
.ex-menu li:hover > .dropdown {
width: 270px !important;
}
Respondido : 07/01/2014 2:29 pm
Muchísimas Gracias Pablo:
Problema resuelto. 🙂 🙂
Bueno no me queda claro como editar la parte que te indico en el post: #140431, ni con el firebug ni con la utilidad de google cromme, inspeccionar elemento.
Un cordial saludo
Respondido : 07/01/2014 3:01 pm
Hola,
La parte "element.style" del Firebug se corresponde a los estilos que se cargan para un determinado elemento desde el propio HTML y no desde ninguna hoja de estilos CSS.
Te pongo un ejemplo. Si tengo un código HTML como el siguiente:
Hola mundo
y exploras con el Firebug esa etiqueta div verás que en "element. style" te pondrá "width:500px;". Es decir, carga el estilo que se aplica directamente en el elemento a través del atributo style.
En muchas ocasiones estos estilos se generan de forma dinámica por lo que no se pueden cambiar editando un archivo, o podría llegar a ser complicado.
Respondido : 07/01/2014 3:10 pm
Gracias Pablo:
Entonces cuando aparezca una información en element.style, quiere decir que no se puede modificar a través del CSS, si se encuentra en el HTML, hay alguna posibilidad de modificar dicho archivo HTML?
Un saludo
Respondido : 07/01/2014 3:20 pm
Hola,
Como te decía modificar esto puede ser complicado ya que el HTML de la web se genera mediante php, por lo que no siempre se puede aplicar un cambio de forma directa y suele requerir de ciertos conocimientos de programación.
En cualquier caso se puede aplicar un estilo que sobreescriba a este utilizando el parámetro !important en los CSS.
Sí, por ejemplo, en la etiqueta style se le aplica un determinado width (ancho) puedes hacer que en lugar de este se aplique otro agregando al archivo template.css o el que proceda un estilo como !important al final.
Te pongo un ejemplo: supongamos que tiene un div como el siguiente:
Hola mundo
En él se le está aplicando a la capa un ancho de 500px. Si quisieras aplicar un ancho de 600px podrías agregar a alguna de las hojas de estilo que se cargan con la plantilla un código como el siguiente:
div.prueba {
width: 600px !important;
}
Este estilo prevalecerá sobre el anterior.
Respondido : 07/01/2014 4:14 pm
Gracias Pablo
Ya tengo solucionado este tema, cuando quieras puedes cerrar el tema.
Un Cordial Saludo
Respondido : 07/12/2014 4:28 pm
