Avisos
Vaciar todo

modificar aspecto menu lateral  

 
Andres
 Andres
Estimable Member

Se que lo que voy a plantear no se ajusta plenamente a la intención del foro, pero he leido varios post en los que indicáis modificaciones menores de plantilla.
Veréis por el diseño de mi plantilla, en función de que página se trate la columna de la derecha presenta dos configuraciones. La primera opción sería tal y como aparece en la página Inicio o El Servicio en que la parte superior derecha debajo del menú principal es la posición sl-3. La segunda opción sería la que se ve en el resto de páginas, como por ejemplo Formación, donde esta posición corresponde a right.
Bien, en ambas he publicado menús laterales pero su diseño no es el mismo. Me imagino que esto es css pero sería posible hacerle una modificación para que el módulo de menú lateral de las páginas Inicio y El Servicio aparecieran igual que en el resto? No debería ser muy complicado al fin y al cabo el otro estilo (el del resto de páginas) ya existe y solo habría que indicar que la posición sl-3 mostrara el mismo estilo de menú que la posición right.

Muchas gracias de antemano, un saludo,

Andrés.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 20/06/2013 9:09 am
Pablo Velasco
 Pablo Velasco
Illustrious Member

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; }
ResponderCitar
Respondido : 20/06/2013 9:55 am

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

Andres
 Andres
Estimable Member

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,?

ResponderCitar
Respondido : 20/06/2013 10:50 am
Pablo Velasco
 Pablo Velasco
Illustrious Member

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.

ResponderCitar
Respondido : 20/06/2013 12:47 pm

Andres
 Andres
Estimable Member

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

ResponderCitar
Respondido : 22/06/2013 11:19 am
Pablo Velasco
 Pablo Velasco
Illustrious Member

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.

ResponderCitar
Respondido : 24/06/2013 9:13 am

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

Andres
 Andres
Estimable Member

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

ResponderCitar
Respondido : 24/06/2013 9:31 am
Andres
 Andres
Estimable Member

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

ResponderCitar
Respondido : 24/06/2013 10:19 am

Cursos Gratuitos WordPress

Pablo Velasco
 Pablo Velasco
Illustrious Member

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/

ResponderCitar
Respondido : 24/06/2013 10:55 am
Andres
 Andres
Estimable Member

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.

ResponderCitar
Respondido : 28/06/2013 9:17 am

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

Pablo Velasco
 Pablo Velasco
Illustrious Member

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;
}
ResponderCitar
Respondido : 28/06/2013 9:38 am
Andres
 Andres
Estimable Member

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.

ResponderCitar
Respondido : 28/06/2013 9:44 am

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

Andres
 Andres
Estimable Member

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.

ResponderCitar
Respondido : 28/06/2013 12:18 pm