modificar aspecto menu lateral  

Hola,

Prueba a editar el archivo templates/ja_nex/css/template.css y busca todas las referencias que haya a #ja-container ul.menu. Tendrás que añadir su correspondiente relación con #ja-topsl1 ul.menu.

Por ejemplo, si encuentras el estilo:

#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:focus,
#ja-container ul.menu li a:active { background: #fff; color: #c33; text-decoration: none; }

tendrás que dejarlo de la siguiente forma:

#ja-topsl1 ul.menu li a:hover,
#ja-topsl1 ul.menu li a:focus,
#ja-topsl1 ul.menu li a:active,
#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:focus,
#ja-container ul.menu li a:active { background: #fff; color: #c33; text-decoration: none; }

Disculpa mi ignorancia pero porque sl1 y no sl3?
Y lo que tengo es que añadir encima o sustituir?
Es decir si encuentro:
#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:focus,
#ja-container ul.menu li a:active { background: #fff; color: #c33; text-decoration: none; }

encima le pongo:

#ja-topsl1 ul.menu li a:hover,
#ja-topsl1 ul.menu li a:focus,
#ja-topsl1 ul.menu li a:active,?

Hola,

La capa con id topsl1 es la que carga los 3 módulos de la cabecera.

Y tienes que añadirlo encima de lo que está, no sustituir. En caso contrario cambiaría el diseño de los módulos que tengas en la posición right.

He intentado lo que me dices pero no veo que funcione. Te pego las modificaciones que he hecho a ver si ves algún error:

/* Menu Module ---*/
.moduletable_menu h3 { border-bottom: none !important; }

div.moduletable_menu ul.menu { margin-top: -10px !important; }

#ja-container ul.menu li { border: none !important; }

#ja-container ul.menu li a {
background: url(../images/bg-menu.gif) repeat-x left bottom #fefefe;
border: solid 1px #ddd;
color: #666;
margin-bottom: 5px;
padding: 5px 10px;
}

#ja-topsl1 ul.menu li a:hover,
#ja-topsl1 ul.menu li a:focus,
#ja-topsl1 ul.menu li a:active,
#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:focus,
#ja-container ul.menu li a:active { background: #fff; color: #c33; text-decoration: none; }

#ja-container ul.menu li.active > a { color: #c33; font-weight: normal; }

#ja-container ul.menu li ul { margin-bottom: 10px; margin-top: 10px; }

#ja-container ul.menu li li { background: none !important; border: none !important; }

#ja-container ul.menu li li a,
#ja-topsl1 ul.menu li a:hover,
#ja-topsl1 ul.menu li a:focus,
#ja-topsl1 ul.menu li a:active,
#ja-container ul.menu li li a:hover,
#ja-container ul.menu li li a:focus,
#ja-container ul.menu li li a:active {
background: url(../images/arrow.png) no-repeat 0 center;
border: none;
margin-bottom: 0;
padding: 2px 10px;
text-indent: 0;
}

Hola,

Te faltan cambios por aplicar, no has añadido todas las relaciones que te había indicado. Por ejemplo, en lugar de

#ja-container ul.menu li a {
background: url(../images/bg-menu.gif) repeat-x left bottom #fefefe;
border: solid 1px #ddd;
color: #666;
margin-bottom: 5px;
padding: 5px 10px;
}

tienes que tener lo siguiente:

#ja-topsl1 ul.menu li a,
#ja-container ul.menu li a {
background: url(../images/bg-menu.gif) repeat-x left bottom #fefefe;
border: solid 1px #ddd;
color: #666;
margin-bottom: 5px;
padding: 5px 10px;
}

Y así con todos los sitios donde aparezca #ja-container ul.menu.

Vale ya lo pillo pensaba que sólo cuando salían las tres líneas juntas. Me pongo a ello. Mil gracias Pablo.

Vale algo he mejorado pero o algo no lo he puesto bién o me falta algo por añadir. En el eXtplorer al editar templare.css le doy a buscar y busco: #ja-container ul.menu. Con esto creo que he localizado todos los sitios donde debo añadir la referencia a ja-topsl1. Voy modificando tal y como me comentabas y creo que no me he dejado nada. Dudo en cuanto las modificaciones, a ver si le puedes echar un ojo. Además de en el apartado Menu Module también he hecho modificación en el apartado Default Joomla! Menu. Muchas gracias.

/* Menu Module ---*/
.moduletable_menu h3 { border-bottom: none !important; }

div.moduletable_menu ul.menu { margin-top: -10px !important; }

#ja-topsl1 ul.menu li,
#ja-container ul.menu li { border: none !important; }

#ja-topsl1 ul.menu li a,
#ja-container ul.menu li a {
background: url(../images/bg-menu.gif) repeat-x left bottom #fefefe;
border: solid 1px #ddd;
color: #666;
margin-bottom: 5px;
padding: 5px 10px;
}

#ja-topsl1 ul.menu li a:hover,
#ja-topsl1 ul.menu li a:focus,
#ja-topsl1 ul.menu li a:active,
#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:focus,
#ja-container ul.menu li a:active { background: #fff; color: #c33; text-decoration: none; }

#ja-topsl1 ul.menu li.active > a,
#ja-container ul.menu li.active > a { color: #c33; font-weight: normal; }

#ja-topsl1 ul.menu li ul,
#ja-container ul.menu li ul { margin-bottom: 10px; margin-top: 10px; }

#ja-topsl1 ul.menu li li,
#ja-container ul.menu li li { background: none !important; border: none !important; }

#ja-topsl1 ul.menu li li a,
#ja-container ul.menu li li a,

#ja-topsl1 ul.menu li li a:hover,
#ja-topsl1 ul.menu li li a:focus,
#ja-topsl1 ul.menu li li a:active,
#ja-container ul.menu li li a:hover,
#ja-container ul.menu li li a:focus,
#ja-container ul.menu li li a:active {
background: url(../images/arrow.png) no-repeat 0 center;
border: none;
margin-bottom: 0;
padding: 2px 10px;
text-indent: 0;
}

/* Default Joomla! Menu ---*/
#ja-topsl1 ul.menu li,
#ja-container ul.menu li { border-bottom: 1px dotted #ccc; }

#ja-topsl1 ul.menu li li,
#ja-container ul.menu li li { border-bottom: 0; border-top: 1px dotted #ccc; }

Hola,

Te recomiendo que utilices el Firebug (hemos hablado en multitud de ocasiones de él en el foro) para poder localizar los estilos CSS que se están aplicando en uno y otro caso.

Podrías abrir 2 ventanas del navegador y comparar los estilos que se aplican para cada caso. Así podrás localizar lo que te pueda faltar o sobrar.

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/

He intentado lo del firebug pero me viene grande. No acabo de entender las diferencias de css entre un menu y otro y no se lo que debo cambiar. Si pudierais ayudarme estaría genial ya que en cuestión de aspecto de la página esto sería de lo último que me queda por modificar. Gracias de nuevo, un saludo.

Hola,

Además de las modificaciones que has hecho prueba a añadir este código al final del archivo templates/ja_nex/css/template.css:

#ja-topsl1 ul.menu li {
background: none !important;
margin: 0 !important;
padding: 0 !important;
}

#ja-topsl1 ul.menu li a {
display: block;
}

Eres un megacrack, no te lo puedo agradecer lo suficiente.
La única diferencia es el texto de cada menú seleccionado que sale en rojo. Intentaré modificarlo yo sino te cuento. Mil gracias de nuevo.

Con el Firebug he conseguido modificar el template.css para cambiar lo del color del texto de los menús de la página de inicio. Muchas gracias nuevamente, doy el problema por solucionado.