Могу ли я изменить дизайн виджета, чтобы он стал частью сайта?

На панели Дизайн выберите светлую или темную тему в зависимости от дизайна вашего сайта. Затем выберите цвет для кнопок и полей формы.

Для ВКонтакте есть специальная тема. Она адаптирована под дизайн соцсети и учитывает ночной режим приложения.

Также существует аналогичная тема для Одноклассников.

Если же вам требуется более детальная настройка дизайна, то вы можете менять внешний вид виджета с помощью CSS. Это позволит менять шрифты, цвета, форму любых элементов виджета. Для этого потребуются базовые навыки верстки веб страниц.

Стили виджета организованы по методологии БЭМ. Каждому элементу соответствует свой класс.

Для изменения дизайна конкретного элемента выясните его CSS класс. Это легко сделать через средства разработчика в браузере. Например, в Chrome кликните по элементу правой кнопкой мыши и выберите команду Просмотреть код.

Для названия дня на календаре мы определили его класс - day.

Теперь напишем простой CSS для смены фона, цвета и толщины шрифта:

.day{
  background: #fdeedb;
  font-weight: 700;
  color: #8a5714;
}

И наконец откроем настройки виджета на панели Дизайн. Активируем флаг Свой стиль CSS и вставим наш CSS.

Результат получился такой:

Если вам нужно добавить пользовательский шрифт или внешний стиль с помощью директивы CSS @import, выполните следующие шаги:

Добавьте @import в начало вашего пользовательского CSS. Например:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
Вставьте блок [bukza_theme_styles] ниже всех ваших @import директив.
Добавьте остальной CSS-код, чтобы переопределить стили темы при необходимости.

Блок [bukza_theme_styles] будет автоматически заменён стилями темы. Если этот блок отсутствует, стили темы будут применяться перед вашим пользовательским CSS.

Не нашли ответа на ваш вопрос?
Задайте его нам на

support@bukza.com