Настройка цветов
Настройка цветовой схемы шаблона 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, если хотите углы без скругления.
Пример выполнения

footer-background
Фон футера (подвала) сайта.
Пример выполнения

footer-head-color
Цвет текста ссылок в меню футера (подвала) сайта.
Пример выполнения

cookie-background
Фон плашки с cookie.
Пример выполнения

cookie-title
Цвет заголовка в плашке cookie.
Пример выполнения

cookie-text
Цвет основного текста в плашке cookie.
Пример выполнения

cookie-a-color
Цвет текста ссылок в плашке cookie.
Пример выполнения

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

cookie-btn-background
Фон кнопки согласия в плашке cookie.
Пример выполнения

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

cookie-btn-color
Цвет текста на кнопке согласия в плашке cookie.
Пример выполнения

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