Как изменить стили кнопки через 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 между кнопками:
