Как изменить цвета элементов Смарт-каталога

В разделе Приложения - Смарт-каталог - Мои сайты - Параметры - Оформление каталога вы можете выбрать тему оформления смарт-каталога.

Доступны три варианта: светлая, тёмная и пользовательская тема.

В пользовательской теме вы можете задать любые цвета для всех элементов Смарт-каталога. Чтобы выбрать цвета элементов нажмите кнопку Настроить в блоке с пользовательской темой. Указать цвета можно с помощью кода в формате HEX, либо выбрав цвет на палитре. Для вызова палитры необходимо нажать на превью цвета.


Доступно изменение следующих элементов Смарт-каталога:

Основные настройки

Фон каталога – общий фон, на котором располагаются ключевые элементы. Например, на виде Объекты (пример ниже) установлен белый фон. При изменении общего фона каталога автоматически будут изменены цвета для элементов Фон шапки каталога и Фон подложки фильтров и таблиц, но вы можете самостоятельно, вручную, задать нужные цвета для этих элементов.

Фон шапки каталога – фон верхней части каталога, где расположены кнопки Назад, Домой, строка поиска по названию объекта, номер телефона и кнопка Вернуться на сайт.

Фон подложки фильтров и таблиц – фон фильтра и заголовков внутри каталога. На примере ниже выделен зеленым.

Основной цвет бренда цвет основных кнопок («Найти», «Оформить заявку»), цвет активных элементов. На примере ниже выделены красным.

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


Текст в главных кнопках – цвет текста в кнопках «Найти», «Оформить заявку».

Основной текст – цвет основного текста в ключевых элементах каталога (карточка помещения, карточка дома), на примере ниже выделен красным.

Второстепенный текст – цвет текста в фильтре, текст параметрического поиска, названия полей в карточке помещения. На примере ниже выделен красным.


Дополнительные настройки

Эффекты главных кнопок

  • Эффект наведения – цвет кнопок «Найти», «Оформить заявку» при наведении курсора.
  • Эффект фокуса – подсветка кнопок «Найти», «Оформить заявку» при нажатии.
  • Эффект нажатия – цвет кнопок Найти, Оформить заявку при нажатии.

Второстепенные элементы

Второстепенный цвет – цвет отмеченных элементов в фильтре. На примере ниже выделен красным.


Текст – цвет текста выбранных элементов в фильтре. На примере ниже выделен красным.


Обводки – цвет обводки карточки дома, карточки помещения, фильтра. На примере ниже выделен красным.


Второстепенные кнопки

Цвет кнопки – цвет кнопок «Ещё», «Закрепить» в фильтре и кнопки «Поделиться» в карточке помещения. На примере ниже выделен красным.


Текст в кнопках – цвет текста в кнопках «Ещё», «Закрепить» в фильтре и кнопки «Поделиться» в карточке помещения. На примере ниже выделен красным.


Эффект наведения – цвет кнопок «Ещё», «Закрепить» в фильтре и кнопки «Поделиться» в карточке помещения при наведении курсора.

Эффект фокуса – цвет подсветки кнопок «Ещё», «Закрепить» в фильтре и кнопки «Поделиться» в карточке помещения при клике.

Эффект нажатия – цвет кнопок «Ещё», «Закрепить» в фильтре и кнопки «Поделиться» в карточке помещения при клике.

Ссылки

Основные – цвет текста ссылки. На примере ниже выделены красным.


Эффект наведения – цвет текста ссылки при наведении курсора.

Эффект нажатия – цвет текста ссылки при клике на неё.

Выпадающие списки

Фон наведения – цвет фона при наведении на кликабельный элемент в списках. На примере выделено красным.


Фон выбора – цвет фона при клике на кликабельный элемент в списках, также эффект выбранного элемента в выпадающих списках. На примере выделено красным.