Wootique

  • Resuelto AranQby

    (@aranqby)


    hace 11 años, 3 meses

    Tengo instalado el tema WOOTIQUE, y estoy intentando personalizar los colores de fondo de los menús a través de la hoja de estilos CSS. ¿Alguien puede decirme dónde es exacatamente? no quiero utilizar los colores azul o negro/gris que vienen por defecto.
    Gracias

Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • Marventus

    (@marventus)

    hace 11 años, 3 meses

    Hola AranQby,
    ¿Podrías compartir un link a tu sitio? Me resultaría más fácil así decirte qué estilos tenés que cambiar.
    Saludos.

    Iniciador del debate AranQby

    (@aranqby)

    hace 11 años, 3 meses

    Hola Marventus
    Estoy trabajando en red local, pero tengo una copia «muy verde» en un servidor provisional, te dejo el link por si puedes echarme una mano:
    http://quebiyu.pruebafactoriadigital.com/
    Muchas gracias!

    Marventus

    (@marventus)

    hace 11 años, 3 meses

    En el primer menu de todos, que dice:

    TIENDA BLOG SOBRE MÍ CONTACTO

    Tenés un efecto de color cuando se pasa el mouse por encima, pero supongo que lo que estás buscando es un color de fondo para todo el contenedor de los menús, ¿verdad?
    De ser así, aquí vamos:

    1. Para el primer menu:
    a. Ancho de página:

    #top .col-full {
    background: #[color];
}

    b. Sólo el menu:

    #top-nav {
    background: #[color]
}

    2. Para el segundo menú:
    1. Ancho de página:

    #navigation {
    background: #[color];
}

    2. Sólo el menú:

    #main-nav {
    background: #[color];

    En cualquiera de los casos, tendrías que reemplazar [color] por el valor hexadecimal del color deseado.
    Saludos.

    Iniciador del debate AranQby

    (@aranqby)

    hace 11 años, 3 meses

    Marventus,

    El menú superior ya lo conseguí localizar, efectivamente le dí un efecto d ecolor al pasar el cursor sobre él.

    El problema lo sigo teniendo con el menú inferior.
    Con #navigation consigo modificar el ancho de menú, pero no el color. En el código pongo el color que me interesa (#ebdce9) y sin embargo continúa gris.

    El código para los menús me aparece así:

    /* 2.2 Navigation */

#navigation{z-index:9999; width:880px; border-top:1px; background: #ebdce9; bottom repeat-x rgba(0,0,0,0.1); clear: both; padding:0 50px; -webkit-border-top-left-radius:6px;
  -webkit-border-top-right-radius:6px;
  -moz-border-radius:6px 6px 0 0;
  border-radius:6px 6px 0 0; }

#navigation ul.rss{background:url(images/ico-rss.png) no-repeat right 5px;padding:6px 15px 3px 0;margin-right:10px;}
#navigation ul.rss li{display:inline;padding:0 10px 0 0;}
#navigation ul.rss li a{color:#c63f00;text-decoration:none;}
#navigation ul.rss li a:hover{text-decoration:underline;}

.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; }
.nav a  { position:relative; color:4COB5F !important; display:block; z-index:100; padding:15px 20px;text-decoration:STRONG; text-shadow: 0 1px 0 rgba(0,0,0,0.25);  }
.nav a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-item a { color:#4C0B5F !important; background-color: #fff; text-decoration: none !important; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -moz-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0; text-shadow: none; }
.nav li  { float:left; width: auto; margin-right:1px; }
.nav li:hover { background: #fff; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -moz-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0; color:#222; }
.nav li:hover a { color:#222 !important; text-shadow:none; }
.nav li a.sf-with-ul { padding-right:25px; }

#btn-cart a { padding:10px 20px 10px 40px; display: block; color:#fff; background-image:url(images/ico-cart-light.png); background-position:  16px 16px; background-repeat:  no-repeat; text-shadow:0 1px 0 rgba(0,0,0,0.25); }
#btn-cart a:hover {
	-webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -moz-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0; background-color: #fff; color:#222; text-decoration: none !important; background-image:url(images/ico-cart.png); text-shadow: none;
}

/* 2.2.1 Drop-down menus */
.nav li ul  { background: #fff; position: absolute; left: -999em; width: 200px; border-top:0; z-index:9999; margin-left:0; list-style: none; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 3px rgba(0,0,0,0.2); box-shadow:0 1px 3px rgba(0,0,0,0.2); -webkit-border-bottom-left-radius:3px; -webkit-border-bottom-right-radius:3px; -moz-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px; }
.nav li ul li  { float: none;  margin-right:0; }
.nav li ul li a  { display:block; color:inherit !important; border:none; padding:8px 20px; float: none; text-shadow:none; }
.nav li ul li a.sf-with-ul { padding:5px 10px; }
.nav li ul li a:hover  { background:#f6f6f6; color:#222 !important; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f6f6f6)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #ffffff, #f6f6f6); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #ffffff, #f6f6f6); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #ffffff, #f6f6f6); /* IE10 */
  background-image:      -o-linear-gradient(top, #ffffff, #f6f6f6); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #ffffff, #f6f6f6);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#f6f6f6'); /* IE6–IE9 */
}
.nav li ul li:last-child { -webkit-border-bottom-left-radius:3px; -webkit-border-bottom-right-radius:3px; -moz-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px;  }
.nav li ul ul  { margin: -30px 0 0 180px; }
.nav li ul ul li a  {  }
.nav li ul li ul li a  {  }

.nav li.current_page_parent ul li a{ color:#555; background: none; }
.nav li.current_page_item ul li a{ color:#555; background: none; }
.nav li ul li.current_page_parent a{ color:#222; background: #e9e9e9; }
.nav li ul li.current_page_item a{ color:#222; background: #e9e9e9; }

.nav li:hover,.nav li.hover  { position:static; }
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul  { left:auto; }

.nav .sf-sub-indicator {background:	url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.6em;top:1.5em;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
.nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat;}

#navigation #nav-home a { padding:15px 20px 13px; height: 18px; width: 17px; display: block; opacity:0.7;}
#navigation #nav-home a:hover { opacity:1; }

#account-nav li a{border:none;font-weight: normal;}
#account-nav li a:hover{ }
#account-nav li.account:hover, #account-nav li.checkout:hover {opacity:1}
#account-nav li.checkout a { padding-left:40px; background-image: url(images/ico-checkout-light.png); background-position: 16px 16px; background-repeat: no-repeat; }
#account-nav li.checkout a:hover { background-image: url(images/ico-checkout.png); }

/* 2.2.2 Top Navigation (optional) */
#top { background: #fff; -webkit-box-shadow:0 0 0 1px rgba(235,220,233,0.2); -moz-box-shadow:0 0 0 1px rgba(235,220,233,0.2); box-shadow:0 0 0 1px rgba(235,220,233,0.2); }
#top .nav { border:0; padding:20px 0 0 600px }
#top .nav a { color:#000 !important; padding:8px 10px; line-height:26px; text-decoration:strong; text-shadow:none; border:0; text-shadow:none; }
#top .nav li  {  }
#top .nav li a.sf-with-ul { padding-right:20px; }

#top .nav li a:hover,
#top .nav li.current_page_item a,
#top .nav li.current_page_parent a,
#top .nav li.current-menu-ancestor a,
#top .nav li.current-cat a,
#top .nav li.current-menu-item a,
#top .nav li.sfHover,
#top .nav li:hover { background-color: #ebdce9 !important;  text-shadow:none; }

#top .nav li ul  { background-color: #000 !important; margin:0; padding:0px; width: 180px; border: none; z-index:999;
	/* Box Shadow */
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
	box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
#top .nav li ul, #top .nav li ul li:last-child a {
	/* Border Radius */
	border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px;
}
#top .nav li ul li { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background: #222; border:0; }
#top .nav li ul li a  { padding:8px 10px; width:160px; color:#ddd; background: none; background: #222; }

#top .nav li.current_page_item ul li a,
#top .nav li.current_page_parent ul li a,
#top .nav li.current-menu-ancestor ul li a,
#top .nav li.current-cat ul li a,
#top .nav li.current-menu-item ul li a,
#top .nav li.sfHover,
#top .nav li ul li a:hover  { background-color: #000 !important; filter: none; }
#top .nav li ul li a.sf-with-ul { padding-right:10px; }
#top .nav li ul ul  { margin: -34px 0 0 180px; }

#top .nav li:hover, #top .nav li.hover  { position:static; }
#top .nav li:hover ul ul, #top .nav li.sfhover ul ul,
#top .nav li:hover ul ul ul, #top .nav li.sfhover ul ul ul,
#top .nav li:hover ul ul ul ul, #top .nav li.sfhover ul ul ul ul { left:-999em; }
#top .nav li:hover ul, #top .nav li.sfhover ul,
#top .nav li li:hover ul, #top .nav li li.sfhover ul,
#top .nav li li li:hover ul, #top .nav li li li.sfhover ul,
#top .nav li li li li:hover ul, #top .nav li li li li.sfhover ul  { left:auto; }
    Marventus

    (@marventus)

    hace 11 años, 3 meses

    Probá así:

    #navigation {
background: #ebdce9 !important;
}

    Otra cosa, viendo tu página en Chrome, la baliza <body> me sale con una clase ie8. Supongo que tu tema debés tener algún script para detectar el navegador, pero claramente no está andando bien. Eso puede producir errores de estilo también.
    Saludos.

    Iniciador del debate AranQby

    (@aranqby)

    hace 11 años, 3 meses

    Solucionado.
    Efectivamente el problema estaba en el navegador, queda solucionado con Chrome.
    Gracias, y saludos

    Marventus

    (@marventus)

    hace 11 años, 3 meses

    Genial. Cualquier otra duda, mandame un mensaje por aca.
    Saludos.

Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • El debate ‘Wootique’ está cerrado a nuevas respuestas.