Дарим чек-лист по подготовке к сезону продаж за подписку на наш телеграм Получить
База знаний
Bodysite.Help — единая база знаний и хаб поддержки по всем продуктам

Как изменить стили кнопки через CSS

В настройках плагина невозможно вывести абсолютно все параметры, которые позволяет изменить CSS, поэтому в некоторых случах придётся вручную менять стилизацию кнопки через CSS файлы. Как же это сделать?

За стилизацию сайта отвечает тема дизайна. Вам нужно найти файл, в котором можно прописать свои CSS свойства, чтобы они применились на сайте. 

Если ваша тема поддерживает пользовательские стили (например, в Megashop 3.0 свои стили можно задать в user.css, а в Mastershop в файле mastershop.custom.css), то отлично, а если нет - то вносите изменения в основном файле стилей. Подробнее про изменение стилей в теме дизайна Megashop 3.0 мы писали в этой статье. 

Посмотрите в браузере в консоли разработчика какие именно классы меняют цвет кнопки и добавьте для них свои записи в файлах темы дизайна.

ПРИМЕР №1

Мы вывели кнопку на сайте, но нам не нравятся её оступы и размеры:

Это тема Mastershop, поэтому изменения будем вносить в файл mastershop.custom.css, и не забываем включить использование этого файла в настройках темы: 

Добавляем запись в файл:

Изменили высоту, размер шрифта, размер строки и отступы. При необходимости применяйте !important, чтобы повысить приоритет над другими стилями

Результат:

К сожалению, мы не можем научить вас CSS за одну инструкцию. Конкретные свойства, которые следует изменить нужно смотреть индивидуально, в зависимости от темы и полученного отображения. Если у вас возникают сложности, попробуйте найти любого свободного специалиста по вёрстке.

ПРИМЕР №2

Вывели кнопки на странице товара, настроили отступы, добавили вывод на странице категории, но здесь уже оступы не устраивают. 

В данном случае тема дизайна Megashop 3.0, поэтому следуя инструкции включаем использование пользовательских файлов стилей в разделе "Тонкие настройки темы дизайна":

Все изменения вносятся в файл user.css:

Смотрим в консоли разработчика в браузере какие стили у нас сейчас регулируют отступы в категории 

 Пробуем, меняем, прописываем свои CSS свойства, сохраняем. В данном случае получилось следующее:

.product-thumb__buy-one-click2 {
    margin-top: 5px;
}

.page_buy1click2 .buy1click2-decorator {
    gap: 0;
}

.product-thumb__buy-one-click2 .buy1click2-open-button {
    margin: 0;
    margin-bottom: 5px;
}

Результат - красивый одинаковый отступ в 5 px между кнопками:

Инструкция была полезна?
76% считают ответ полезным
Спасибо за обратную связь!
Чтобы добавить комментарий, войдите в личный кабинет
Как правильно обращаться в техподдержку?
Не работает решение, что делать?
Не применяются настройки плагина, почему?
Куда пропали лицензии?
Как интегрировать плагин в мою тему дизайна
Купил плагин, как активировать лицензию?
Как можно получить скидку?
Есть ли тестовый период за продукт
Слетела лицензия что делать?
Не могу настроить CRON, что делать?
Написать в техподдержку
В техническую поддержку входит:
  • Консультации по вопросам приобретения
  • Консультации по функционалу и возможностям
  • Выявление и решение проблем в работе функционала
В техническую поддержку не входит:
  • Настройка решения
  • Доработка под запросы клиента
  • Устранение багов в консультационной форме (без предоставления доступов к сайту)
Платная диагностика:
  • Диагностика сложных и неоднозначных проблем
  • Выявление конфликтов со сторонними решениями
  • Выявление конфликтов в вашей среде сервера
  • Приоритетный срок на обработку тикетов
  • Оплата только банковской картой