Визуальные темы¶

Визуальные темы управляют внешним видом виджета – цветом кнопок, шрифтом и размером текста, фоном и другими параметрами. Поддерживается 5 цветовых схем, в том числе есть и темная тема.

Вы можете изменить свойства выбранной вами визуальной темы. Для этого нужно указать переопределяемое свойство в параметрах адресной строки.

В примере ниже цвет общего текста изменен на красный

https://widget.med.me/?NETWORK_ID=311&textColor=red

Чтобы передать значение цвета в формате RGB(A) в адресной строке, вам нужно символ решетка # заменить на символьную последовательность %23. Пример описанный выше будет выглядеть следующим образом:

https://widget.med.me/?NETWORK_ID=311&textColor=%23ff0000

Здесь красный цвет передается через числовую последовательность ff0000, перед которой стоит префикс %23. Закодированный код цвета (#000000 станет %23000000).

Если необходимо передать значение цвета RGBA вы можете заменить запятые, разделяющие параметры цвета на символьную последовательность %2C. Например, цвет rgba(0,0,0,.1 станет равным rgba(0%2C0%2C0%2C.1). Так же, для этих целей используйте консоль, в инструментарии разработчика браузера (обычно открывается через F12). В консоле используйте функцию encodeURIComponent для преобразования значения в URI совместимое.

Далее дан перечень свойств, которые вы можете переопределить.

Каждое из свойств возможно указать как используя параметры адресной строки, так и переопределив соответствующее свойство внутри страницы сайта. Свойства визуального оформления виджета gbooking определены и доступны в объекте window.gbookingWidgetTheme.

Ниже приведено описание визуальных свойств виджета (в объекте window.gbookingWidgetTheme) и их значения по умолчанию.

window.gbookingWidgetTheme = {
     textColor: '#929292',
     mainColor: 'rgba(59, 73, 73, 1)',
     secondColor: '#ffffff',
     backgroundColor: '#000',
     itemBackgroundColor: '#000',
     chevronColor: '#a4a4a5',
     itemSecondColor: '#9B9B9B',
     borderBottomColor: 'rgba(255, 255, 255, 1)',
     mapClusterTemplate: 'islands#blackClusterIcons',
     backdropColor: '#F1F1F2',
     discountColor: '#279362',
     passiveColor: '#F1F1F2',
     home: {
        buttonIconColor: 'rgba(59, 73, 73, 1)',
        buttonBackgroundColor: '#000',
     },
     locationItem: {
        iconColor: 'rgba(59, 73, 73, 1)',
     },
     timeSlots: {
        enable: 'rgba(255, 255, 255, 1)',
        disable: 'rgba(255, 255, 255, 0.8)',
        disableColor: 'rgba(0, 0, 0, 0.5)',
        headerColor: '#ffffff',
        titleColor: 'rgba(59, 73, 73, 1)',
     },
     confirm: {
        label: 'rgba(0, 0, 0, 0.35)',
        value: '#000',
        checkColor: '#ffffff',
     },
};

Регистр букв (строчные или прописные) в названиях свойств и значениях важен!

textColor¶

Цвет текста в виджете. По умолчанию #929292.

Цвет текста

mainColor¶

Цвет разнообразных цветных элементов в виджете. По умолчанию #279362.

Цвет разнообразных цветных элементов

secondColor¶

Цвет заметок и дополнительных элементов в виджете. По умолчанию black.

Заметки и дополнительные элементы

backgroundColor¶

Цвет фона и подвала в виджете (и на цвет фона нескольких дополнительных компонентов). По умолчанию ffffff.

Цвет фона и подвала в виджете

itemBackgroundColor¶

Цвет фона списочных элементов в виджете (на Экране филиалов, на Экране услуг, Экране специалистов). По умолчанию #ffffff.

Цвет фона списочных элементов в виджете

chevronColor¶

Цвет иконки “Назад” на всех страницах и на цвет кнопок выбора следующей/предыдущей недели при выборе времени в виджете. По умолчанию #a4a4a5.

Цвет иконки "Назад"и выбора следующей/предыдущей недели

itemSecondColor¶

Цвет теста дополнительной информации в списочных элементах в виджете. По умолчанию #9B9B9B.

Цвет теста дополнительной информации

borderBottomColor¶

Цвет разделителя в списках в виджете. По умолчанию стоит rgba(0, 0, 0, 0.05).

Цвет разделителя в списках

home.buttonIconColorx¶

Цвет иконок на Главной странице в виджете. По умолчанию #009464.

Цвет иконок на Главной странице

mapClusterTemplate¶

Цвет кластеров внутри компонента карты Экрана филиалов.

Закодированные текстовые значения из списка секция Значки кластеров. Пример: islands%23blackClusterIcons or islands%23invertedOliveClusterIcons. По умолчанию стоит islands#darkGreenClusterIcons.

Цвет кластеров внутри компонента карты Экрана филиалов