Страница онлайн-записи в цветах вашего бренда: настройка через CSS

По умолчанию страница онлайн-записи NaPriem использует стандартные цвета сервиса. Для начала работы этого достаточно, но если у вашей компании уже есть собственный стиль — логотип, фирменная палитра и сайт — страницу записи можно оформить в тех же цветах.

Для этого в NaPriem есть поле с пользовательскими CSS-стилями. Через него можно изменить цвета, фон занятых ячеек, вид полей и кнопок — сразу для полной и мобильной версии страницы записи.

Ниже возьмём календарь «Пилатес» и за три шага переведём его в спокойную зелёную гамму. Весь CSS можно копировать как есть: чтобы использовать свои цвета, достаточно заменить четыре значения в начале.

1. Что получится

До настройки страница выглядит так:

После настройки — так:

Изменения заметны сразу:

• заголовки, ссылки, иконки и кнопки используют фирменный цвет;
• занятое время выделено спокойной штриховкой вместо яркой заливки;
• шапка календаря получила лёгкий фирменный оттенок;
• поля выбора стали белыми, с тонкой рамкой и скруглёнными углами;
• групповое занятие выделяется цветной полосой слева.

Мобильная версия использует те же стили — отдельную таблицу CSS для неё создавать не нужно.

2. Где находится настройка

Откройте Интеграция → Настройка внешнего вида (кастомизация).

На странице есть большое поле «Таблица стилей CSS» и кнопка «Сохранить»:

Порядок работы простой:

1. Вставьте CSS в поле.
2. Нажмите «Сохранить».
3. Откройте страницу записи в соседней вкладке и обновите её.

Изменения применяются сразу.

Стили можно ограничивать конкретной частью сервиса с помощью родительских классов:

В этой статье меняем только клиентскую часть, поэтому правила начинаются с .CompanyIndex и .CompanyMobile. Кабинет администратора при этом остаётся в стандартном оформлении.

3. Шаг 1. Фирменные цвета

Начнём с основных цветов. Вставьте этот блок и сохраните:

/* ===== Шаг 1. Фирменные цвета ===== */
.CompanyIndex, .CompanyMobile {
  /* Ваши цвета: чтобы сменить гамму, достаточно поменять эти четыре строки */
  --brand: #2f7d5b;        /* основной цвет бренда */
  --brand-dark: #215c43;   /* тот же цвет, потемнее: кнопка под курсором */
  --brand-light: #e7f2ec;  /* очень светлый оттенок: подложки */
  --line: #d6e3db;         /* рамки и линии сетки */

  /* Дальше ничего менять не нужно: подставляем ваши цвета вместо стандартных */
  --blue: var(--brand);
  --blue-hover: var(--brand-dark);
  --orange: var(--brand);
  --orange-hover: var(--brand-dark);
  --dark-orange: var(--brand);
  --green: var(--brand);
  --green-hover: var(--brand-dark);
  --btn-success-hover: var(--brand-dark);
}

Здесь мы создаём четыре собственные переменные:

• --brand — основной фирменный цвет;
• --brand-dark — более тёмный оттенок для наведения и активных состояний;
• --brand-light — очень светлый оттенок для подложек;
• --line — цвет рамок и линий календаря.

Затем эти значения подставляются вместо стандартных цветов интерфейса.

Уже после первого шага страница заметно меняется:

Заголовки, ссылки и кнопки навигации уже перекрашены. Занятые ячейки пока остаются стандартными — их настроим следующим блоком.

4. Шаг 2. Календарь

Добавьте этот код после первого блока:

/* ===== Шаг 2. Календарь ===== */
/* Занятое время: мягкая штриховка вместо оранжевого */
.CompanyIndex .EventTypeBusy,
.CompanyIndex .EventTypeOffHours {
  background: repeating-linear-gradient(135deg, var(--brand-light) 0 6px, var(--line) 6px 12px) !important;
  border-color: var(--line) !important;
}

/* Собственные записи клиента (сервис красит их в зелёный) */
.CompanyIndex .EventTypeBusy[style*="140, 179, 140"] {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

.CompanyIndex .EventTypeBusy[style*="140, 179, 140"] .SeriesMarker {
  color: #fff;
}

/* Групповое занятие: белая карточка с цветной полосой */
.CompanyIndex .EventTypeGroup {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--brand) !important;
}

/* Шапка с днями недели */
.CompanyIndex .fc-day-header {
  background: var(--brand-light);
  color: var(--brand-dark);
  padding: 6px 0 !important;
}

/* Сетка: белый фон и светлые линии */
.CompanyIndex .fc-view-container {
  background: #fff;
}

.CompanyIndex .fc td,
.CompanyIndex .fc th {
  border-color: var(--line) !important;
}

Здесь меняется уже сам календарь.

Занятое и нерабочее время получает светлую диагональную штриховку. Она хорошо показывает, куда записаться нельзя, но не перетягивает внимание с действительно свободных ячеек.

Собственные записи клиента остаются заметными и окрашиваются в основной цвет бренда.

Правило с style*="140, 179, 140" нужно потому, что собственные записи клиента сервис окрашивает встроенным цветом. Отдельного класса для них нет, поэтому CSS находит такие ячейки по их текущему цвету и заменяет его на --brand.

Групповые занятия остаются белыми, но получают цветную полосу слева.

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

5. Шаг 3. Поля, кнопки и мелочи

Последний блок добавьте в самый конец:

/* ===== Шаг 3. Поля, кнопки и мелочи ===== */
/* Поля выбора: белые, со скруглёнными углами */
.CompanyIndex .select2-container .select2-selection--single,
.CompanyMobile .select2-container .select2-selection--single {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
}

.CompanyIndex .select2-container .select2-selection--single .select2-selection__rendered,
.CompanyMobile .select2-container .select2-selection--single .select2-selection__rendered {
  background: transparent !important;
  box-shadow: none !important;
}

.CompanyMobile .select2-container .select2-selection__arrow {
  background: transparent !important;
  border: none !important;
}

.CompanyMobile .form-DatePickerWrapper .form-control,
.CompanyMobile .form-DatePickerWrapper .input-group-addon {
  background: #fff !important;
  border: 1px solid var(--line) !important;
}

/* Кнопки скруглённые */
.CompanyIndex .btn,
.CompanyMobile .btn {
  border-radius: 10px !important;
}

/* Иконки у ссылок «О компании» и «Отправить сообщение» */
.CompanyIndex .booking-action svg path {
  fill: var(--brand) !important;
}

/* Название компании в мобильной версии и заголовок окна подтверждения */
.CompanyMobile .booking-title,
.CompanyIndex .modal-header .title {
  color: var(--brand) !important;
}

/* Полоска под названием компании */
.CompanyIndex .title-box::before {
  background: var(--brand);
}

/* Галочки */
.CompanyIndex input[type=checkbox],
.CompanyMobile input[type=checkbox] {
  accent-color: var(--brand);
}

Этот блок отвечает уже не столько за цвет, сколько за общий вид интерфейса: поля становятся светлее, рамки — аккуратнее, кнопки — мягче.

После сохранения и обновления страницы получится итоговый вариант из начала статьи.

6. Как это выглядит у клиента на телефоне

На телефоне нет большой недельной сетки: клиент выбирает услугу, дату и время в компактной форме. Но основные цвета, поля и кнопки используют тот же CSS.

До настройки:

После:

Название компании, ссылки, иконки, поля и кнопка «Создать запись» теперь выглядят в одном стиле с полной версией.

Окно подтверждения на компьютере также подхватывает фирменный цвет:

7. Другой бренд — другие четыре цвета

Весь CSS из шагов 2 и 3 использует переменные, объявленные в первом блоке. Поэтому для другой цветовой гаммы не нужно искать оттенки по всему коду — достаточно поменять четыре строки.

Например, для фиолетового оформления:

--brand: #6a55a8;
--brand-dark: #4f3e85;
--brand-light: #f0ecf8;
--line: #e0d9ef;

Несколько готовых сочетаний:

Как подобрать свои значения:

• --brand — основной цвет логотипа или сайта; на нём должен хорошо читаться белый текст;
• --brand-dark — более тёмный вариант того же цвета;
• --brand-light — очень светлый оттенок, близкий к белому;
• --line — чуть темнее, чем --brand-light, чтобы линии календаря оставались заметны.

Код нужного цвета можно взять из макета сайта, логотипа или определить обычной «пипеткой» в графическом редакторе и инструментах разработчика браузера.

8. Если хочется поменять что-то ещё

Через CSS можно менять не только цвета: размеры, отступы, шрифты и видимость отдельных элементов тоже настраиваются.

Например, чтобы скрыть ссылку «Отправить сообщение»:

.CompanyIndex .MessageSendButton {
  display: none;
}

Чтобы найти класс нужного элемента, откройте страницу записи в браузере, нажмите на элемент правой кнопкой мыши и выберите «Просмотреть код».

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

• booking-title — название компании;
• booking-action — действия в верхней части страницы;
• booking-slot--busy — занятое время;
• booking-contacts — контакты.

Если нужный элемент сложно определить, можно обратиться в техническую поддержку.

Итог: что за что отвечает

Короткий чек-лист

1. Откройте Интеграция → Настройка внешнего вида (кастомизация).
2. Вставьте код из шагов 1, 2 и 3 одним блоком.
3. Замените четыре цвета в начале на свою фирменную палитру.
4. Нажмите «Сохранить».
5. Проверьте полную и мобильную версии страницы записи.
6. Убедитесь, что свободное и занятое время хорошо различаются.

Что стоит иметь в виду

Стили применяются ко всей компании. Все календари используют одну и ту же пользовательскую таблицу CSS.

Кабинет администратора останется без изменений, пока правила ограничены .CompanyIndex и .CompanyMobile. Для оформления «Моего календаря» нужны отдельные правила с .Timetables.

Следите за контрастом. Если штриховка занятого времени стала слишком светлой и сливается со свободными ячейками, сделайте --line немного темнее.

Вернуть стандартный вид просто. Очистите поле CSS и нажмите «Сохранить». Перед экспериментами удобно сохранить текущий код в отдельный файл.

В поле используется только CSS. HTML, JavaScript и другие теги сюда вставлять не нужно.

После обновлений интерфейса отдельные CSS-селекторы могут измениться. Если какой-то элемент перестал оформляться, найдите его заново через «Просмотреть код» и обновите соответствующее правило.