Перейти к содержимому

Настройка цветов

Настройка цветовой схемы шаблона Default для Публичной части.

Где находится

Панель управления → Дополнения → Шаблоны → Default → Настройка цветов

Сделать гифку прям с переходом в настройку, прям с прямым переходом!!!

Что можно настроить

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

Что проверить:

  • изменения цветов применяются в Публичной части
  • цветовая схема выглядит гармонично
  • текст читается на фоне выбранных цветов

theme-background

Цвет фона, который лежит под всеми блоками и элементами сайта — он задаёт общий фон всех страниц.

Пример выполнения

theme-color

Основной цвет Публичной части: он окрашивает ссылки, акценты над блоками и другие выделенные элементы. Обычно это цвет бренда или компании.

Пример выполнения

theme-hover-color

Цвет подсветки, который появляется, когда Вы наводите курсор на ссылку с цветом бренда или компании (theme-color).

Пример выполнения

theme-border-radius

Радиус скругления углов — задаёт мягкость блоков.

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

theme-card-background

В шаблоне большинство элементов оформлено как «карточки» (card) над общим фоном сайта (theme-background). Этот параметр меняет фон таких блоков.

Пример выполнения

theme-card-border

У «карточек» (card) в шаблоне есть рамка (border). Этот параметр задаёт цвет рамки у карточек.

Пример выполнения

theme-card-border-radius

Радиус скругления углов «карточек» (card) — задаёт мягкость блоков.

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

theme-card-box-shadow

Тень у «карточек» (card). Этот параметр задаёт, будет ли у карточек тень и насколько она заметна.

Далее показаны параметры и их обозначения:

Пример: box-shadow: 0 0 30px 0 rgb(0 0 0 / 7%)

Расшифровка (по порядку):

1) 0 — смещение тени по горизонтали (влево/вправо)
2) 0 — смещение тени по вертикали (вверх/вниз)
3) 30px — размытие тени (чем больше число, тем мягче и шире тень)
4) 0 — “растяжение” тени (если поставить больше 0 — тень станет больше; если меньше 0 — компактнее)
5) rgb(0 0 0 / 7%) — цвет и прозрачность тени:

  • 0 0 0 — чёрный цвет
  • 7% — прозрачность (очень лёгкая тень)

Если хотите «более заметную» тень — обычно увеличивают размытие (3-е число) и/или прозрачность (последний параметр).

Для удобства, можно использовать конструктор теней: https://active-vision.ru/icon/box-shadow/

Чтобы убрать тень, укажите none.

Пример выполнения

theme-h1-color

Цвет заголовка H1 на страницах (самый крупный заголовок).

Пример выполнения

theme-h2-color

Цвет заголовков H2 на некоторых страницах.

Пример выполнения

theme-h3-color

Цвет заголовков H3 на некоторых страницах.

Пример выполнения

theme-p-color

Цвет обычного текста (параграфов).

Пример выполнения

theme-input-border

Цвет рамки (border) у полей ввода информации - input и textarea.

Пример выполнения

theme-input-border-radius

Радиус скругления углов полей ввода — задаёт мягкость.

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

theme-input-box-shadow

Тень у полей ввода.

Формат такой же, как у box-shadow.

Чтобы убрать тень, укажите none.

Пример выполнения

theme-input-placeholder-color

Цвет подсказки внутри поля (placeholder).

Пример выполнения

theme-btn-background

Фон основных кнопок всего сайта.

Пример выполнения

theme-btn-border

Цвет рамки (border) у основных кнопок всего сайта.

Пример выполнения

theme-btn-border-radius

Радиус скругления углов основных кнопок всего сайта — задаёт мягкость.

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

theme-btn-color

Цвет текста на основных кнопках всего сайта.

Пример выполнения

theme-btn-hover-background

Стиль фона для основных кнопок при наведении курсора (мышью).

Пример выполнения

theme-btn-hover-border

Цвет рамки (border), который появляется, когда Вы наводите курсор на основные кнопки.

Пример выполнения

theme-btn-hover-border-radius

Cкругление углов основных кнопок всего сайта при наведении — задаёт мягкость.

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

theme-btn-hover-color

Цвет текста основных кнопок всего сайта при наведении.

Пример выполнения

panel-head-background

Фон верхней строки шапки.

Пример выполнения

panel-head-border-bottom

Цвет нижней границы (полосы) верхней строки шапки.

Пример выполнения

panel-head-background-a

Фон ссылок в верхней строке шапки.

Можно оставить none, если фон не нужен.

Пример выполнения

panel-head-border-a

Цвет рамки (обводки) у ссылок в верхней строке шапки.

Можно оставить transparent, если рамка не нужна.

Пример выполнения

panel-head-color-a

Цвет текста ссылок в верхней строке шапки.

Пример выполнения

panel-head-background-a-hover

Фон ссылки в верхней строке шапки при наведении курсором (мышью).

Пример выполнения

panel-head-border-a-hover

Цвет рамки (border) ссылки в верхней строке шапки при наведении курсором (мышью).

Пример выполнения

panel-head-color-a-hover

Цвет текста ссылки в верхней строке шапки при наведении курсором (мышью).

panel-center-background

Фон средней строки шапки.

Пример выполнения

panel-center-input-background

Фон основного поискового поля в шапке.

Пример выполнения

panel-center-input-border

Цвет рамки (border) основного поискового поля в шапке.

Пример выполнения

panel-center-input-box-shadow

Тень основного поискового поля в шапке.

Формат такой же, как у box-shadow.

Чтобы убрать тень, укажите none.

Пример выполнения

panel-center-btn-search-background

Фон поисковой кнопки в основном поисковом поле шапки.

Пример выполнения

panel-center-btn-search-border

Цвет рамки (border) поисковой кнопки в основном поисковом поле шапки.

Пример выполнения

panel-center-btn-search-color

Цвет текста поисковой кнопки в основном поисковом поле шапки.

Пример выполнения

panel-center-btn-search-border-radius

Скругление углов поисковой кнопки в основном поисковом поле шапки.

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-center-btn-search-hover-background

Фон поисковой кнопки в основном поисковом поле шапки при наведении курсором (мышью).

Пример выполнения

panel-center-btn-search-hover-border

Цвет рамки (border) поисковой кнопки в основном поисковом поле шапки при наведении курсором (мышью).

Пример выполнения

panel-center-btn-search-hover-color

Цвет текста поисковой кнопки в основном поисковом поле шапки при наведении курсором (мышью).

Пример выполнения

panel-center-btn-search-hover-border-radius

Скругление углов поисковой кнопки в основном поисковом поле шапки при наведении курсором (мышью).

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-center-btn-background

Фон основных кнопок в средней строке шапки.

Пример выполнения

panel-center-btn-border

Цвет рамки (border) основных кнопок в средней строке шапки.

Пример выполнения

panel-center-btn-color

Цвет текста основных кнопок в средней строке шапки.

Пример выполнения

panel-center-btn-border-radius

Скругление углов основных кнопок.

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-center-btn-hover-background

Фон основных кнопок при наведении курсором (мышью).

Пример выполнения

panel-center-btn-hover-border

Цвет рамки основных кнопок при наведении курсором (мышью).

Пример выполнения

panel-center-btn-hover-color

Цвет текста основных кнопок при наведении курсором (мышью).

Пример выполнения

panel-center-btn-hover-border-radius

Скругление углов основных кнопок при наведении курсором (мышью).

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-center-btn-cart-background

Фон кнопки корзины в шапке.

Пример выполнения

panel-center-btn-cart-border

Цвет рамки (border) кнопки корзины в шапке.

Пример выполнения

panel-center-btn-cart-color

Цвет текста кнопки корзины в шапке.

Пример выполнения

panel-center-btn-cart-border-radius

Скругление углов кнопки корзины.

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-center-btn-cart-hover-background

Фон кнопки корзины при наведении курсором (мышью).

Пример выполнения

panel-center-btn-cart-hover-border

Цвет рамки кнопки корзины при наведении курсором (мышью).

Пример выполнения

panel-center-btn-cart-hover-color

Цвет текста кнопки корзины при наведении курсором (мышью).

Пример выполнения

panel-center-btn-cart-hover-border-radius

Скругление углов кнопки корзины при наведении курсором (мышью).

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-center-btn-cart-a-span-background

Фон кружка с количеством товара в корзине.

Пример выполнения

panel-center-btn-cart-a-span-color

Цвет текста в кружке с количеством товара в корзине.

Пример выполнения

panel-bottom-background

Фон нижней строки шапки.

Пример выполнения

panel-bottom-border-top

Цвет верхней границы (border) нижней строки шапки.

Пример выполнения

panel-bottom-border-bottom

Цвет нижней границы (border) нижней строки шапки.

Пример выполнения

panel-bottom-box-shadow

Тень нижней строки шапки.

Формат такой же, как у box-shadow.

Пример выполнения

panel-bottom-btn-catalog-background

Фон кнопки «Каталог» в нижней строке шапки.

Пример выполнения

panel-bottom-btn-catalog-border

Цвет рамки (border) кнопки «Каталог».

Пример выполнения

panel-bottom-btn-catalog-color

Цвет текста кнопки «Каталог».

Пример выполнения

panel-bottom-btn-catalog-border-radius

Скругление углов кнопки «Каталог».

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-bottom-btn-catalog-hover-background

Фон кнопки «Каталог» при наведении курсором (мышью).

Пример выполнения

panel-bottom-btn-catalog-hover-border

Цвет рамки кнопки «Каталог» при наведении курсором (мышью).

Пример выполнения

panel-bottom-btn-catalog-hover-color

Цвет текста кнопки «Каталог» при наведении курсором (мышью).

Пример выполнения

panel-bottom-btn-catalog-hover-border-radius

Скругление углов кнопки «Каталог» при наведении курсором (мышью).

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-bottom-menu-ul-background

Фон выпадающего меню (списка) в нижней строке шапки.

Пример выполнения

panel-bottom-menu-ul-border

Рамка (border) выпадающего меню.

Можно указать none, если рамка не нужна.

Пример выполнения

panel-bottom-menu-ul-border-top

Цвет верхней полосы выпадающего меню.

Пример выполнения

panel-bottom-menu-a-color

Цвет текста ссылок меню в нижней строке шапки.

Пример выполнения

panel-bottom-menu-a-hover-color

Цвет текста ссылок меню при наведении курсором (мышью).

Пример выполнения

panel-bottom-btn-auth-background

Фон кнопки входа (авторизации) в нижней строке шапки.

Можно указать none, если фон не нужен.

Пример выполнения

panel-bottom-btn-auth-border

Цвет рамки (border) кнопки входа.

Пример выполнения

panel-bottom-btn-auth-color

Цвет текста кнопки входа.

Пример выполнения

panel-bottom-btn-auth-border-radius

Скругление углов кнопки входа.

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-bottom-btn-auth-hover-background

Фон кнопки входа при наведении курсором (мышью).

Пример выполнения

panel-bottom-btn-auth-hover-border

Цвет рамки (border) кнопки входа при наведении курсором (мышью).

Пример выполнения

panel-bottom-btn-auth-hover-color

Цвет текста кнопки входа при наведении курсором (мышью).

Пример выполнения

panel-bottom-btn-auth-hover-border-radius

Скругление углов кнопки входа при наведении курсором (мышью).

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-bottom-btn-reg-background

Фон кнопки регистрации.

Можно указать none, если фон не нужен.

Пример выполнения

panel-bottom-btn-reg-border

Цвет рамки (border) кнопки регистрации.

Можно указать transparent, если рамка (border) не нужен.

Пример выполнения

panel-bottom-btn-reg-color

Цвет текста кнопки регистрации.

Пример выполнения

panel-bottom-btn-reg-border-radius

Скругление углов кнопки регистрации.

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

panel-bottom-btn-reg-hover-background

Фон кнопки регистрации при наведении курсором (мышью).

Пример выполнения

panel-bottom-btn-reg-hover-border

Цвет рамки (border) кнопки регистрации при наведении курсором (мышью).

Пример выполнения

panel-bottom-btn-reg-hover-color

Цвет текста кнопки регистрации при наведении курсором (мышью).

Пример выполнения

panel-bottom-btn-reg-hover-border-radius

Скругление углов кнопки регистрации при наведении курсором (мышью).

Выставьте значение 0, если хотите углы без скругления.

Пример выполнения

Фон футера (подвала) сайта.

Пример выполнения

Цвет текста ссылок в меню футера (подвала) сайта.

Пример выполнения

Фон плашки с cookie.

Пример выполнения

Цвет заголовка в плашке cookie.

Пример выполнения

Цвет основного текста в плашке cookie.

Пример выполнения

Цвет текста ссылок в плашке cookie.

Пример выполнения

Цвет текста ссылок в плашке cookie при наведении курсором (мышью).

Пример выполнения

Фон кнопки согласия в плашке cookie.

Пример выполнения

Фон кнопки согласия в плашке cookie при наведении курсором (мышью).

Пример выполнения

Цвет текста на кнопке согласия в плашке cookie.

Пример выполнения

Цвет текста на кнопке согласия в плашке cookie при наведении курсором (мышью).

Пример выполнения

База знаний для EMS-платформы PlatParts.