• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Решено Инвертировать цвета на кнопке "добавить в корзину"

Moonlight31

Опытный
Добрый день! Подскажите, пожалуйста, как можно инвертировать цвета на кнопке "добавить в корзину", т.е. сменить стиль когда выделяется кнопка на стиль когда на кнопку не наведен курсор.
Скриншоты прилагаю
Тема: emmet-lite
http://santechpost.ru/

Заранее спасибо за ответ
 

Вложения

  • 1.png
    1.png
    75.2 KB · Просмотры: 7
  • 2.png
    2.png
    77.2 KB · Просмотры: 7

dave14

Опытный
Местный
через firebug для мозиллы ищу, уже час разобраться не могу, где эта часть кода)
Вот эти стили:

Код:
.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    display: block;
    padding: 13px 12px 11px;
    margin: 15px 0 0;
    background: #fff;
    color: #356AD4;
    border: 2px solid #356AD4;
}

.woocommerce-pagination a:focus, .woocommerce-pagination a:hover, .woocommerce-pagination span, .woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
    background: #356ad4;
    border-color: #356ad4;
}

чтобы цвет поменять, в конец style.css темы добавьте
Код:
.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    background: #e31e24 !important;
    color: #ffffff !important;
}
 

Moonlight31

Опытный
Вот эти стили:

Код:
.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    display: block;
    padding: 13px 12px 11px;
    margin: 15px 0 0;
    background: #fff;
    color: #356AD4;
    border: 2px solid #356AD4;
}

.woocommerce-pagination a:focus, .woocommerce-pagination a:hover, .woocommerce-pagination span, .woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
    background: #356ad4;
    border-color: #356ad4;
}

чтобы цвет поменять, в конец style.css темы добавьте
Код:
.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    background: #e31e24 !important;
    color: #ffffff !important;
}
Спасибо) меняет цвет в состоянии покоя)
для того, чтобы изменился цвет при наведение (через hover) необходимо добавить
.woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
background: #356ad4;
border-color: #356ad4;
}

с необходимыми цветами?
 

dave14

Опытный
Местный
Спасибо) меняет цвет в состоянии покоя)
для того, чтобы изменился цвет при наведение (через hover) необходимо добавить
.woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
background: #356ad4;
border-color: #356ad4;
}

с необходимыми цветами?
да, верно. Например, чтобы инвертировать:
Код:
.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    background: #356ad4 !important;
    border-color: #356ad4 !important;
}

.woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
background: #fff !important;
}
 

Moonlight31

Опытный
да, верно. Например, чтобы инвертировать:
Код:
.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    background: #356ad4 !important;
    border-color: #356ad4 !important;
}

.woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
background: #fff !important;
}

Добавил в style.css темы
Код:
.woocommerce ul.products .button, .woocommerce ul.products .added_to_cart {
    background: #356ad4 !important;
    border-color: #356ad4 !important;
    color: #fff !important;
}

.woocommerce ul.products .button:hover, .woocommerce ul.products .added_to_cart:hover {
background: #fff !important;
color: #356ad4 !important;
}

и всё стало, как надо)) Спасибо большое всем за помощь)
 
Сверху Снизу