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

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

Тема в разделе "Вопросы, советы и доработки.", создана пользователем Moonlight31, 26 июл 2016.

  1. Moonlight31

    Moonlight31

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

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

    Вложения:

    • 1.png
      1.png
      Размер файла:
      75,2 КБ
      Просмотров:
      4
    • 2.png
      2.png
      Размер файла:
      77,2 КБ
      Просмотров:
      4
  2. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    553
    Баллы:
    113
    • Нравится Нравится x 1
  3. Moonlight31

    Moonlight31

    Сообщения:
    62
    Симпатии:
    6
    Баллы:
    8
    ушел читать, спасибо) достаточно добавить необходимый код в style.css темы?
     
  4. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    553
    Баллы:
    113
    Да. Для поиска и отладки нужных стилей можно использовать отладчик браузера, н-р, для Google Chrome по <F12>
     
  5. Moonlight31

    Moonlight31

    Сообщения:
    62
    Симпатии:
    6
    Баллы:
    8
    через firebug для мозиллы ищу, уже час разобраться не могу, где эта часть кода)
     
  6. dave14

    dave14 Местный

    Сообщения:
    129
    Симпатии:
    38
    Баллы:
    28
    Вот эти стили:

    Код:
    .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;
    }
     
    • Нравится Нравится x 1
    • Согласен Согласен x 1
  7. Moonlight31

    Moonlight31

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

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

    dave14 Местный

    Сообщения:
    129
    Симпатии:
    38
    Баллы:
    28
    да, верно. Например, чтобы инвертировать:
    Код:
    .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;
    }
     
    • Нравится Нравится x 1
    • Согласен Согласен x 1
  9. Moonlight31

    Moonlight31

    Сообщения:
    62
    Симпатии:
    6
    Баллы:
    8
    Добавил в 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;
    }
    и всё стало, как надо)) Спасибо большое всем за помощь)
     
    • Нравится Нравится x 1