arrow_back_iosВопросы
help

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

check_circle
Вы можете самостоятельно отредактировать CSS с помощью браузера. Не пугайтесь незнакомых символов и программистских значений. Изменить внешний вид виджета таким образом совсем не сложно.
Откройте форму настроек виджета и перейдите на вкладку Вид. Здесь сначала выберите тему оформления максимально близкую к вашему сайту. Затем выставьте флаг Использовать свои css-стили и сохраните.
В поле стили мы будем вносить наш CSS и сохранять, чтобы увидеть результат.
Рассмотрим получение CSS на примере браузера Chrome.
На форме имеется предпросмотр нашего виджета. Выберите элемент, который хотите изменить. Кликните по нему правой кнопкой и выберите команду Просмотреть код.
Еще вы можете воспользоваться инструментом выбора элемента мышью. Нажмите Ctrl + Shift + C и водите мышью по странице, пока не будет выбран полностью нужный вам элемент.
В открывшихся инструментах на вкладке Elements будет выделена строка. В ней будет присутствовать название класса элемента. Оно нам и нужно.
В нашем случае класс называется month-picker. Находим этот класс на владке Styles. И меняем, к примеру, цвет фона - background. Если нужного свойства в классе нет, добавьте его кликнув на закрывающюю фигурную скобку. Затем нажмите Enter.
Аналогичным образом поменяем цвета некоторых других элементов.
Теперь давайте получим список всех наших изменений. Нажмите иконку меню, затем 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_outline support@bukza.com