arrow_back_iosВопросы
help

Могу ли я без веб-дизайнера изменить дизайн виджета, и как?

check_circle
Вы можете попробовать самостоятельно отредактировать CSS с помощью браузера. Изменить внешний вид виджета таким образом не так сложно.
Откройте форму настроек виджета и перейдите на вкладку Вид. Здесь сначала выберите тему оформления максимально близкую к вашему сайту. Затем выставьте флаг Использовать свои css-стили и сохраните.
В поле стили мы будем вносить наш CSS и сохранять, чтобы увидеть результат.
Рассмотрим получение CSS на примере браузера Chrome.
На форме имеется предпросмотр нашего виджета. Кликните по любому элементу правой кнопкой и выберите команду Просмотреть код.
Еще вы можете воспользоваться инструментом выбора элемента мышью. Нажмите Ctrl + Shift + C и водите мышью по странице, пока не будет выбран полностью нужный вам элемент.
В открывшихся инструментах на вкладке Elements будет выделена строка. В ней будет присутствовать название класса элемента. Оно нам и нужно.
В нашем случае класс называется month-picker. Находим этот класс на владке Styles. И меняем, к примеру, цвет фона - background. Если нужного свойства в классе нет, добавьте его кликнув на закрывающюю фигурную скобку.
Аналогичным образом поменяем цвета некоторых других элементов.
Теперь давайте получим список всех наших изменений. Нажмите иконку меню, затем More Tools и Changes.
Снизу откроется вкладка со всеми изменениями. Для каждого класса переносим в наш стиль по порядку:
  1. Название класса с точкой и открывающейся фигурной скобкой.
  2. Все отмеченные зеленым строки и добавьте закрывающую фигурную скобку в конце.
В нашем случае получился такой css стиль:
.month-picker {
  background-color: #5e406f;
}

.calendar-header {
  background-color: #432a51;
}

.calendar__card {
  background-color: #291734;
}

.button_primary {
  background-color: #f321c8;
}
Календарь виджета теперь выглядит так:

Свойства CSS

В нашем примере мы меняли только цвет фона. Вы же можете менять и добавлять любые свойства элемента. Перечислим наиболее популярные:
  • color - цвет текста. Например: color: #000000;
  • background - цвет фона. Например: color: #FFFFFF;
  • margin задает величину внешнего отступа от краев элемента. Перечислите количество пикселей по порядку: сверху, справа, снизу, слева. Например: margin: 1px 2px 3px 4px;
  • padding задает величину внутреннего отступа элемента. Перечислите количество пикселей по порядку: сверху, справа, снизу, слева. Например: padding: 1px 2px 3px 4px;
  • font-family - название шрифта. Например: font-family: Tahoma;
  • font-size - размер шрифта. Например: font-size: 20px;
  • font-weight - толщина шрифта. Например: font-weight: 500;
  • height - высота элемента. Например: height: 100px;
  • weight - ширина элемента. Например: weight: 100px;
  • border - обводка элемента. Например: border: 1px solid #000000;
  • border-radius - скругление краев. Например: border-radius: 10px;
  • display позволяет скрыть элемент. Используйте: display: none;
  • opacity - прозрачность элемента. Например: opacity: 0.5;
  • box-shadow - тень элемента. Например, чтобы убрать тень: box-shadow: none;
Не нашли ответа на ваш вопрос?
Задайте его нам на
mail_outlinesupport@bukza.com