botones css

jminaredo
(@jminaredo)

hace 4 años, 4 meses

buenas tardes,

he realizado un tema hijo y estoy intentando cambiar por css los colores de el submenu lateral.

Por ejemplo en el caso de componentes, vemos que si situamos el cursor encima el submenu apaece en color verde y si nos ponemos encima de naranja.

Con css he conseguido poner que el naranja aparezca cuando te situas encima, pero mi intencion no es que sea verde, si no naranja. No encuentro la parte del codigo que tengo que modificar para dejar las subcategorias del mismo color que el menú.

Gracias de antemano por vuestra ayuda

La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 10 respuestas - de la 1 a la 10 (de un total de 10)

Moderador LGrusin
(@lgrusin)

hace 4 años, 4 meses

¿Estás cargando bien los estilos del tema hijo?

Lo digo porque el verde lo tienes en el style.css del tema padre.

Iniciador del debate jminaredo
(@jminaredo)

hace 4 años, 3 meses

Y como lo puedo hacer para cargarlos correctamente?? Active el tema e hice una copia con el plugin child theme configurator.

Luego voy aplicando los cambios css en el style del hijo.

Gracias por la ayuda
Moderador LGrusin
(@lgrusin)

hace 4 años, 3 meses
En la versión en inglés te dicen cómo añadir los estilos del tema hijo en el archivo functions.php del mismo
https://codex.wordpress.org/Child_Themes

Tienes que tener en cuenta que si todos los estilos deben estar en el tema hijo debes copiar los estilos del padre y copiar y modificar en el hijo. No es adecuado tenerlos mezclados precisamente para evitar lo que te pasa.
- Esta respuesta fue modificada hace 4 años, 3 meses por LGrusin.
Iniciador del debate jminaredo
(@jminaredo)

hace 4 años, 3 meses

Lo estoy leyendo pero me estoy haciendo un lio, no tengo conocimiento avanzado de esto y me estoy liando, que se supone que debo hacer? copiar el contenido del functions.php del padre al del hijo?

Gracias Lgrusin
Moderador LGrusin
(@lgrusin)

hace 4 años, 3 meses
A ver, para modificar el color busca dentro de
@media screen and (min-width: 783px) lo siguiente:
```
.primary-navigation ul ul {
 background-color: #e94e1b; //color naranja
 float: left;
 margin: 0;
 position: absolute;
 top: 48px;
 left: -999em;
 z-index: 99999;
}
```
en
```
.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
 background-color: #e94e1b; //naranja claro para el hover
 color: #fff;
}
```
- Esta respuesta fue modificada hace 4 años, 3 meses por LGrusin.
Iniciador del debate jminaredo
(@jminaredo)

hace 4 años, 2 meses

Gracias por tu paciencia,

cuando me dices que busque dentro de «@media screen and (min-width: 783px)» te refieres al style.css del tema padre?

¿Que tendria que actualizar el codigo por el tuyo y esta?

UN SALUDO Y MUCHAS GRACIAS DE NUEVO

Iniciador del debate jminaredo
(@jminaredo)

hace 4 años, 2 meses

@lgrusin

Estoy buscando tanto en el style.css del tema padre como del hijo la linea “@media screen and (min-width: 783px)” y no la encuentro por ningun sitio.

No se que hacer y me temo que es algo muy sencillo ya que me lo estas dando chupado.. pero no me arreglo. Me lo podrias explicar para tontos a donde me tengo que dirigir y realizar dicho cambio? Esque no llego a la fecha de apertura de mi tienda fisica.

Muchas gracias de verdad
Moderador LGrusin
(@lgrusin)

hace 4 años, 2 meses
Si añades al archivo style.css del tema hijo lo siguiente debería funcionar:
```
@media screen and (min-width: 783px) {
.primary-navigation ul ul {
 background-color: #e94e1b;
 float: left;
 margin: 0;
 position: absolute;
 top: 48px;
 left: -999em;
 z-index: 99999;
}

.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
 background-color: #e94e1b;
 color: #fff;
}
}
```
Es lo mismo que tiene el tema padre pero cambiando el color verde por el naranja
Iniciador del debate jminaredo
(@jminaredo)

hace 4 años, 2 meses

He añadido el codigo alstyle del hijo como me has dicho pero tras actualizar la pagina sigue igual. Me temo que debo de tener alguna regla en las modificaciones que hice al hijo que me las rompe.

No se si estare en lo cierto, las modificaciones que hice son estas:

.woocommerce-info {
border-top-color: #e94e1b;
}

.woocommerce-info::before {
color: #e94e1b;
}

.search-toggle {
background-color: #e94e1b;
cursor: pointer;
float: right;
height: 48px;
margin-right: 38px;
text-align: center;
width: 48px;
}.search-toggle:hover, .search-toggle.active {
background-color: #e94e1b;
}

.search-box {
background-color: #e94e1b;
padding: 12px;
}
.site-navigation .current_page_item > a, .site-navigation .current_page_ancestor > a, .site-navigation .current-menu-item > a, .site-navigation .current-menu-ancestor > a {
color: #e94e1b;
font-weight: 900;
}

.primary-navigation li:hover > a, .primary-navigation li.focus > a {
background-color: #e94e1b;
color: #fff;
}
a {

color: #e94e1b;
text-decoration: none;

}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {

background-color: #e94e1b;
color: #fff;
-webkit-font-smoothing: antialiased;

}

.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {

background-color: #d84b1c;
color: #fff;

}

a {

color: #080707;
text-decoration: none;

}

a:active, a:hover {

color: #e94e1b;

}

a:active, a:hover {
color: #fbf7f6;
}

.primary-navigation ul ul a {
padding: 18px 12px;
white-space: normal;
width: 176px;
background-color: #515151;
}

.primary-navigation ul ul a:hover, .primary-navigation ul ul li.focus > a {
background-color: #e94e1b;
}

.search-toggle {
background-color: #e94e1b;
float: right;
height: 48px;
margin-right: 38px;
text-align: center;
width: 48px;
visibility: hidden;
}

.search-box {
background-color: #e94e1b;
padding: 12px;
visibility: hidden;
}

.site,
.site-header {
max-width: 100vw;
}

.tfwc {
max-width: 80vw !important;
}

.widget button, .widget .button, .widget input[type=»button»], .widget input[type=»reset»], .widget input[type=»submit»] {
background-color: #e94e1b;
border: 0;
font-size: 12px;
padding: 5px 15px 4px;
}

a:active, a:hover {
color: #E94E1B;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
padding: .5em 0;
margin: 0;
font-size: small;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: ‘Helvetica’,’Verdana’,’Monaco’,sans-serif;
font-size: 100%;
font-style: inherit;
font-weight: bold;
margin: 0;
outline: 0;
padding: 0;
vertical-align: inherit;
text-align: center;
}

.woocommerce ul.products li.product .price {
color: #e94e1b;
font-weight: 400;
font-size: .857em;
}

.content-sidebar .widget a {
color: #515151;
}

.content-sidebar .widget a:hover {

color: #e94e1b;

}

.secondary-navigation li:hover > a, .secondary-navigation li.focus > a {
background-color: #e94e1b;
color: #fff;
}

.secondary-navigation ul ul a:hover, .secondary-navigation ul ul li.focus > a {
background-color: #515151;
}

.secondary-navigation ul ul a:hover, .secondary-navigation ul ul li.focus > a {

background-color: #e94e1b;

}
.secondary-navigation ul ul a:hover, .secondary-navigation ul ul li.focus > a {

background-color: #515151;

}

.um input[type=»submit»].um-button, .um input[type=»submit»].um-button:focus, .um a.um-button, .um a.um-button.um-disabled:hover, .um a.um-button.um-disabled:focus, .um a.um-button.um-disabled:active {
background: #e94e1b;
}

.um input[type=»submit»].um-button:hover, .um a.um-button:hover {
background-color: #c83505;
}

.um .um-tip:hover, .um .um-field-radio.active:not(.um-field-radio-state-disabled) i, .um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i, .um .um-member-name a:hover, .um .um-member-more a:hover, .um .um-member-less a:hover, .um .um-members-pagi a:hover, .um .um-cover-add:hover, .um .um-profile-subnav a.active, .um .um-item-meta a, .um-account-name a:hover, .um-account-nav a.current, .um-account-side li a.current span.um-account-icon, .um-account-side li a.current:hover span.um-account-icon, .um-dropdown li a:hover, i.um-active-color, span.um-active-color {
color: #e94e1b;
}

.um-field-checkbox-option, .um-field-radio-option {
margin: 0px 0px 0px 36px;
line-height: 24px;
color: #e94e1b !important;
display: block;
}

a.um-link-alt {
line-height: 22px;
color: #ec4e1b !important;
display: block !important;
text-decoration: none !important;
font-weight: normal;
text-align: center;
border-bottom: none !important;
}

.archive-title, .page-title {
font-size: 16px;
font-weight: 900;
line-height: 1.5;
margin: 0;
visibility: hidden;
}

.woocommerce .woocommerce-result-count {
margin: 0 0 1em;
visibility: hidden;
}

.woocommerce .woocommerce-ordering select {
vertical-align: top;
visibility: hidden;
}

@media screen and (min-width: 783px) {
.primary-navigation ul ul {
background-color: #e94e1b;
float: left;
margin: 0;
position: absolute;
top: 48px;
left: -999em;
z-index: 99999;
}

.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
background-color: #e94e1b;
color: #fff;
}
}

Iniciador del debate jminaredo
(@jminaredo)

hace 4 años, 2 meses

@lgrusin, es ahi donde debo copiar el codigo que me pasas?

Gracias y un saludo

Viendo 10 respuestas - de la 1 a la 10 (de un total de 10)

El debate ‘botones css’ está cerrado a nuevas respuestas.

Etiquetas del debate

Vistas