• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

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

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

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

Вложения

  • 75.2 KB Просмотры: 4
  • 77.2 KB Просмотры: 4

dave14

Опытный
Местный
#6
через 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;
}
 
#7
Вот эти стили:

Код:
.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

Опытный
Местный
#8
Спасибо) меняет цвет в состоянии покоя)
для того, чтобы изменился цвет при наведение (через 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;
}
 
#9
да, верно. Например, чтобы инвертировать:
Код:
.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;
}
и всё стало, как надо)) Спасибо большое всем за помощь)