> For the complete documentation index, see [llms.txt](https://docs.iexexchanger.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.iexexchanger.com/guide/sait/vneshnii-vid/dizain-konstruktor.md). # Дизайн-конструктор Дизайн-конструктор позволяет настроить оформление публичного сайта iEXExchanger: выбрать готовый стиль, изменить светлую и тёмную палитры, шрифт, высоту и скругление элементов. Для дополнительных изменений предусмотрен редактор пользовательского CSS. Раздел находится в **«Настройки» — «Дизайн-конструктор»**. Изменения цветов и размеров сразу видны в предпросмотре. На сайте они появляются после публикации.
### Доступ к разделу Доступ к конструктору предоставляет одно из двух разрешений группы пользователей: * **«Настройки интерфейса»** в группе разрешений **«Настройки»**. * **«Общие настройки»** в группе разрешений **«Админпанель»**. Достаточно одного разрешения. Оно открывает настройку палитр, параметров, библиотеки стилей и пользовательского CSS, включая публикацию и возврат к стандартному оформлению. Чтобы предоставить сотруднику доступ через настройки интерфейса: 1. Откройте **«Пользователи» — «Список групп пользователей»**. 2. Нажмите название группы, к которой относится сотрудник. 3. В группе разрешений **«Настройки»** включите **«Настройки интерфейса»**. 4. Нажмите **«Сохранить изменения»**. 5. Проверьте доступ к **«Дизайн-конструктор»** под учётной записью сотрудника. {% content-ref url="/pages/3OPChZoOwE8CnKr6Icyq" %} [Группы прав пользователей](/guide/polzovateli/gruppy-prav-polzovatelei.md) {% endcontent-ref %} ### Вкладки конструктора
ВкладкаНазначение
«Стили»Выбор готового оформления и сохранённых пользовательских стилей.
«Параметры»Включение оформления на сайте, выбор шрифта, настройка размеров и скруглений.
«Цвета»Настройка двух палитр и отдельных элементов сайта.
«CSS-файл»Создание, проверка и публикация дополнительных CSS-правил.
Переключение вкладок сохраняет текущие изменения внутри открытой страницы. Обновление страницы или выход из раздела может привести к потере неопубликованного черновика. Автоматического сохранения всей формы нет. Метка **«Есть изменения»** относится к параметрам и палитрам конструктора. У CSS-редактора есть собственное состояние сохранения. *** ## Готовые и сохранённые стили ### Выбор готового стиля На вкладке **«Стили»** находятся варианты оформления с готовыми светлой и тёмной палитрами. Для отбора карточек используйте фильтры: * **«Все»** — готовые и сохранённые пользовательские стили. * **«Готовые»** — встроенные варианты оформления. * **«Мои»** — стили, сохранённые в библиотеку этого сайта. Просматривайте варианты прокруткой списка карточек. Рядом с фильтрами отображается количество стилей в выбранной категории. Чтобы применить готовое оформление: 1. Нажмите карточку нужного стиля. 2. Проверьте предпросмотр светлой и тёмной палитр. 3. При необходимости измените параметры и отдельные цвета. 4. Нажмите **«Опубликовать»**. Выбор встроенного стиля заменяет обе цветовые палитры. Текущий шрифт, размеры и переключатель показа оформления на сайте сохраняются. Независимые цвета элементов возвращаются к связям с выбранной палитрой, если для них нет отдельного значения в готовом стиле. ### Создание своего стиля Кнопка **«Собрать свой стиль»** открывает вкладку **«Цвета»**. Можно начать с готового варианта или изменить текущие настройки. Чтобы сохранить результат для повторного использования: 1. Настройте палитры, шрифт и размеры. 2. На вкладке **«Цвета»** нажмите **«Сохранить в библиотеку»**. 3. Введите **«Название стиля»** длиной до 80 символов. 4. Нажмите **«Сохранить в библиотеку»** в открывшемся окне. После сохранения стиль появится на вкладке **«Стили»** в фильтре **«Мои»**. Библиотека общая для сайта: сохранённые варианты доступны другим администраторам с соответствующим разрешением. В стиль входят обе палитры, источник и семейство шрифта, насыщенность, размеры и состояние **«Показывать выбранный дизайн на сайте»**. Содержимое `custom.css` хранится отдельно и в стиль не входит. Сохранение в библиотеку создаёт новый вариант. Повторное использование того же названия не заменяет ранее сохранённый стиль. Оформление сайта при сохранении в библиотеку не меняется; для его применения нужна публикация. {% hint style="warning" %} Библиотека хранит 30 последних пользовательских стилей. При сохранении следующего варианта самые ранние записи выходят из этого списка. Библиотека не заменяет резервную копию настроек и пользовательского CSS. {% endhint %} ### Повторное применение сохранённого стиля 1. Откройте **«Стили»** и выберите фильтр **«Мои»**. 2. Нажмите карточку сохранённого варианта. 3. Проверьте палитры, шрифт, размеры и состояние показа оформления на сайте. 4. Нажмите **«Опубликовать»**. Пользовательский стиль восстанавливает сохранённые параметры целиком. Если в редакторе включена общая светлая или общая тёмная палитра, правило объединения палитр применяется и к выбранному стилю. Для восстановления двух разных палитр сначала выберите режим **«Раздельно»**. ## Параметры оформления ### Показ оформления на сайте На вкладке **«Параметры»** в блоке **«Основные настройки»** находится переключатель **«Показывать выбранный дизайн на сайте»**. * **«На сайте»** — после публикации сайт использует настройки конструктора и сохранённый пользовательский CSS. * **«Выключен»** — после публикации сайт использует базовое оформление без файла конструктора и его пользовательского CSS. Изменение переключателя нужно подтвердить кнопкой **«Опубликовать»**. Палитры, параметры, библиотека и CSS-файл при выключении сохраняются. Предпросмотр продолжает показывать выбранные настройки и при выключенном оформлении. Это позволяет подготовить изменения до их включения на сайте. ### Шрифт сайта | Поле | Что настроить | | ------------------------- | ------------------------------------------------------ | | **«Откуда брать шрифт»** | Источник: **Google Fonts** или **«Шрифт устройства»**. | | **«Шрифт сайта»** | Семейство шрифта из доступного списка. | | **«Насыщенность шрифта»** | Набор начертаний, перечисленных через точку с запятой. | При выборе **Google Fonts** семейство и указанные начертания подключаются из Google Fonts. Загрузка зависит от доступности сервиса в браузере посетителя. При выборе **«Шрифт устройства»** внешнее подключение Google Fonts не создаётся. Выбранное семейство используется, если оно установлено на устройстве; иначе браузер выбирает доступный системный шрифт из запасного списка. Поле насыщенности определяет набор загружаемых начертаний для Google Fonts; в режиме шрифта устройства такая загрузка не выполняется. Стандартные значения конструктора: **Google Fonts**, **Inter**, `400;500;600;700`. Допустимые значения насыщенности: `300`, `400`, `500`, `600`, `700`, `800`. Вводите их через `;` без пробелов. Для Google Fonts выбирайте начертания, которые поддерживает указанное семейство. Общий шрифт передаётся через CSS-переменную `--font-sans` и применяется к основному тексту и элементам ввода. Если пользовательский CSS задаёт другой `font-family`, проверьте его влияние отдельно. ### Размеры и формы В блоке **«Размеры и формы»** находятся общие размеры элементов сайта. Эти параметры одинаковы для светлой и тёмной палитр. | Поле | Назначение | CSS-переменная | | -------------------------------- | -------------------------------------------------------- | --------------------------------------------------- | | **«Скругление углов»** | Общий радиус элементов, использующих базовое скругление. | `--radius` | | **«Высота полей»** | Высота полей ввода. | `--input-container-height` | | **«Высота списков»** | Высота элементов выбора. | `--select-container-height` | | **«Скругление полей»** | Радиус полей ввода и элементов выбора. | `--field-container-radius`, `--input-border-radius` | | **«Высота обычных кнопок»** | Базовая высота обычных кнопок. | `--control-height` | | **«Скругление элементов валют»** | Радиус элементов списка валют. | `--ex-list-item-border-radius` | Указывайте неотрицательное число с единицей измерения: `px`, `rem` или `em`. Дробную часть отделяйте точкой. Значения без единицы, отрицательные числа, проценты и выражения `calc()` в этих полях не принимаются. `px` задаёт размер в пикселях, `rem` зависит от базового размера шрифта страницы, `em` — от размера шрифта соответствующего элемента. Стандартное **«Скругление углов»** — `0.75rem`, стандартная **«Высота полей»** — `50px`. Эти два поля обязательны. Остальные поля можно оставить пустыми: * **«Высота списков»** наследует **«Высота полей»**. * **«Скругление полей»** использует общее скругление с прибавлением `4px`. * **«Высота обычных кнопок»** использует `2rem`, что соответствует `32px` при базовом размере шрифта `16px`. * **«Скругление элементов валют»** использует общее скругление с прибавлением `4px`. Высоты маленьких и больших кнопок рассчитываются относительно обычной кнопки через `--control-height-sm` и `--control-height-lg`. Геометрия меняется у компонентов, которые используют эти общие переменные. ## Светлая и тёмная палитры ### Выбор палитры для редактирования На вкладке **«Цвета»** переключатель **«Палитра для настройки»** позволяет выбрать **«Светлая»** или **«Тёмная»**. Он определяет, какие значения редактируются и какая палитра отображается в предпросмотре. Сам по себе этот переключатель не задаёт тему для посетителей сайта. Для каждой палитры доступны 59 цветовых настроек, распределённых по шести группам. ### Раздельная и общая палитра В блоке **«Режим светлой и тёмной темы»** выберите способ настройки: | Режим | Что происходит | | --------------- | ------------------------------------------------------------------------------------------------------- | | **«Раздельно»** | Светлая и тёмная палитры редактируются независимо. | | **«Светлая»** | Текущая светлая палитра копируется в тёмную. Последующие изменения цветов применяются к обеим палитрам. | | **«Тёмная»** | Текущая тёмная палитра копируется в светлую. Последующие изменения цветов применяются к обеим палитрам. | {% hint style="warning" %} Выбор общей палитры заменяет значения второй палитры в текущем черновике. Возврат к режиму «Раздельно» не восстанавливает прежние цвета. Перед объединением сохраните нужный вариант в библиотеку. {% endhint %} Выбранный способ редактирования действует в открытой странице конструктора. После повторного открытия редактор начинает с режима **«Раздельно»**. Опубликованные цвета остаются теми, которые были сохранены, включая одинаковые значения обеих палитр после объединения. ### Выбор темы посетителями Правила выбора темы находятся в **«Настройки» — «Интерфейс» — «Оформление»**, в блоке **«Светлая и тёмная тема»**. В этом блоке настройте: * **«Разрешить пользователям выбирать тему»** — возможность переключения темы посетителем. * **«Доступные режимы»** — режимы, которые посетитель сможет выбрать: **«Системная»**, **«Светлая»**, **«Тёмная»**. * **«Тема по умолчанию»** — режим до самостоятельного выбора посетителя, когда переключение разрешено. * **«Фиксированная тема сайта»** — единый режим для всех посетителей, когда переключение выключено. Режим **«Системная»** следует светлой или тёмной теме устройства. Должен оставаться хотя бы один доступный режим. Кнопка **«Выбрать все»** включает все режимы, **«Только этот»** оставляет один выбранный. После изменения этих настроек нажмите **«Сохранить»** в разделе оформления. Для выбора посетителем должно быть доступно больше одного режима. Объединение палитр в конструкторе меняет цвета двух тем. Показ переключателя и допустимые режимы регулируются настройками оформления. Дополнительные правила `.dark` в пользовательском CSS могут создавать различия между темами даже при одинаковых палитрах конструктора. ## Настройка цветов ### Как задавать цвет Раскройте нужную группу на вкладке **«Цвета»**. Для каждого параметра доступны выбор цвета и поле **CSS** с исходным значением. Выбор через палитру устанавливает конкретный HEX-цвет. В поле **CSS** можно оставить цвет, ссылку на другую переменную или формулу. Поддерживаются HEX-значения из 3, 4, 6 или 8 знаков, `transparent` и функции `rgb()`, `rgba()`, `hsl()`, `hsla()`, `oklch()`, `color-mix()`, `var()`. Максимальная длина значения — 180 символов. Вводите только значение, без имени свойства, точки с запятой и фигурных скобок. Пустое или неподдерживаемое значение при сборке заменяется стандартным цветом либо стандартной связью этого параметра с палитрой. #### Наследование цвета Значение `var(--primary)` означает, что элемент использует **«Главный брендовый цвет»**. При изменении брендового цвета связанный элемент тоже меняется. Если заменить ссылку конкретным HEX-цветом, этот элемент станет независимым от исходной переменной. Для восстановления связи верните нужное выражение `var(...)` или стандартное значение параметра. Значения `color-mix(...)` формируют оттенок из других цветов. Они позволяют сохранить связь с основой палитры для подсветок и второстепенных поверхностей. В таблицах ниже приведены точные названия полей и соответствующие CSS-переменные. Переменные пригодятся при работе с вкладкой **«CSS-файл»**. ### Каркас сайта | Поле | Что меняет | CSS-переменная | | ------------------------- | --------------------------------------------------------------- | ---------------------- | | **«Фон приложения»** | Общий фон вокруг основного содержимого. | `--app-background` | | **«Текст приложения»** | Текст и иконки на общем фоне. | `--app-foreground` | | **«Фон секций»** | Фон крупных блоков и внутренних секций. | `--section-background` | | **«Базовая поверхность»** | Базовый фон поверхностей, на которые ссылаются другие элементы. | `--background` | | **«Основной текст»** | Основной цвет текста, заголовков и иконок. | `--foreground` | ### Бренд и действия | Поле | Что меняет | CSS-переменная | | ----------------------------- | --------------------------------------------- | ----------------------------- | | **«Главный брендовый цвет»** | Основные действия и брендовые акценты. | `--primary` | | **«Текст на главной кнопке»** | Текст и иконки на основном брендовом фоне. | `--primary-foreground` | | **«Фон основной кнопки»** | Независимый фон основной кнопки. | `--primary-button-bg-color` | | **«Текст основной кнопки»** | Независимый цвет содержимого основной кнопки. | `--primary-button-text-color` | | **«Вторичный фон»** | Вторичные кнопки и мягкие выделения. | `--secondary` | | **«Текст на вторичном фоне»** | Содержимое вторичных элементов. | `--secondary-foreground` | | **«Акцентный фон»** | Выделение при выборе и наведении. | `--accent` | | **«Текст на акценте»** | Содержимое элементов на акцентном фоне. | `--accent-foreground` | | **«Ошибки и удаление»** | Ошибки и опасные действия. | `--destructive` | | **«Текст на ошибке»** | Текст на фоне ошибки или опасного действия. | `--destructive-foreground` | По умолчанию независимые цвета основной кнопки ссылаются на `--primary` и `--primary-foreground`. Их можно менять отдельно, сохраняя общий брендовый цвет для остальных элементов. ### Компоненты и поля | Поле | Что меняет | CSS-переменная | | ----------------------------- | ----------------------------------------------- | --------------------------- | | **«Карточка»** | Фон карточек и панелей. | `--card` | | **«Текст карточки»** | Содержимое карточек. | `--card-foreground` | | **«Всплывающая поверхность»** | Фон выпадающих списков и всплывающих окон. | `--popover` | | **«Текст всплывающего окна»** | Содержимое всплывающих поверхностей. | `--popover-foreground` | | **«Приглушённый фон»** | Спокойные информационные и служебные блоки. | `--muted` | | **«Второстепенный текст»** | Подписи, подсказки и дополнительный текст. | `--muted-foreground` | | **«Основная граница»** | Разделители и границы основных блоков. | `--border` | | **«Граница поля»** | Обводка полей ввода и элементов выбора. | `--input` | | **«Фон поля»** | Фон полей ввода и выбора. | `--input-background` | | **«Фокус»** | Подсветка активного поля. | `--ring` | | **«Фон блока отзывов»** | Фон блока отзывов, использующего этот параметр. | `--order-review-background` | | **«Текст блока отзывов»** | Текст внутри блока отзывов. | `--order-review-color` | | **«Фон загрузочных блоков»** | Основа заглушек во время загрузки содержимого. | `--ui-skeleton-base` | ### Шапка сайта | Поле | Что меняет | CSS-переменная | | --------------------------------- | ------------------------------------------ | ------------------------------ | | **«Фон шапки»** | Фон верхней панели сайта. | `--toolbar` | | **«Текст шапки»** | Основной текст и иконки верхней панели. | `--toolbar-foreground` | | **«Основная кнопка шапки»** | Фон основного действия в шапке. | `--toolbar-primary` | | **«Текст основной кнопки»** | Содержимое основной кнопки именно в шапке. | `--toolbar-primary-foreground` | | **«Нейтральный фон шапки»** | Фон нейтральных элементов верхней панели. | `--toolbar-muted` | | **«Приглушённый текст шапки»** | Второстепенные подписи и иконки. | `--toolbar-muted-foreground` | | **«Акцент шапки»** | Фон выделенных элементов шапки. | `--toolbar-accent` | | **«Текст акцента шапки»** | Содержимое на акцентном фоне шапки. | `--toolbar-accent-foreground` | | **«Граница шапки»** | Разделительная линия верхней панели. | `--toolbar-border` | | **«Фокус в шапке»** | Обводка элементов шапки при фокусе. | `--toolbar-ring` | | **«Цвет текстового логотипа»** | Цвет логотипа, отображаемого текстом. | `--header-logotype-color` | | **«Фон активного пункта меню»** | Фон текущего пункта навигации. | `--menu-active-bg-color` | | **«Текст активного пункта меню»** | Содержимое текущего пункта навигации. | `--menu-active-text-color` | **«Текст основной кнопки»** есть в двух группах. В **«Бренд и действия»** поле относится к основной кнопке сайта, в **«Шапка сайта»** — к основному действию верхней панели. Цвет текстового логотипа не перекрашивает загруженное изображение логотипа. Изображения настраиваются в **«Настройки» — «Интерфейс» — «Изображения»**. ### Подвал сайта | Поле | Что меняет | CSS-переменная | | ---------------------------------- | ----------------------------------------- | --------------------------- | | **«Фон подвала»** | Фон нижней части сайта. | `--footer-background` | | **«Текст подвала»** | Основной текст нижнего блока. | `--footer-foreground` | | **«Второстепенный текст подвала»** | Подписи и служебный текст. | `--footer-muted-foreground` | | **«Граница подвала»** | Разделители нижнего блока. | `--footer-border` | | **«Ссылка подвала»** | Цвет ссылок в обычном состоянии. | `--footer-link` | | **«Ссылка при наведении»** | Цвет ссылки подвала при наведении. | `--footer-link-hover` | | **«Акцент подвала»** | Мягкое выделение элементов нижнего блока. | `--footer-accent` | Показ нижней части сайта регулируется переключателем **«Показывать нижнюю часть сайта»** в **«Настройки» — «Интерфейс» — «Оформление»**. Изменение цветов подвала не включает выключенный блок. ### Форма обмена | Поле | Что меняет | CSS-переменная | | ------------------------------ | ---------------------------------------------- | ------------------------------------- | | **«Фон подсказки обмена»** | Фон информационных блоков формы. | `--exchange-text-background` | | **«Текст подсказки обмена»** | Содержимое информационных блоков. | `--exchange-text-foreground` | | **«Граница подсказки обмена»** | Обводка информационных блоков. | `--exchange-text-border` | | **«Фон суммы обмена»** | Фон блока суммы результата обмена. | `--exchange-amount-background` | | **«Текст суммы обмена»** | Числа и обозначение валюты в блоке результата. | `--exchange-amount-foreground` | | **«Фон выбранной валюты»** | Выделение выбранного элемента списка валют. | `--exchange-selected-child-bg` | | **«Текст выбранной валюты»** | Текст выбранного элемента списка. | `--exchange-selected-child-color` | | **«Фон поиска валют»** | Фон строки поиска в списке валют. | `--ex-search-input-bg` | | **«Граница поиска валют»** | Обводка строки поиска. | `--ex-search-input-border` | | **«Текст поиска валют»** | Введённый поисковый запрос. | `--ex-search-input-text-color` | | **«Подсказка поиска валют»** | Текст подсказки внутри пустого поиска. | `--ex-search-input-placeholder-color` | Расположение формы и способ отображения списков валют задаются в **«Настройки» — «Интерфейс» — «Оформление»**. Конструктор управляет их цветами и общими размерами. ### Возврат отдельных цветов к стандарту Для одного параметра используйте кнопку возврата к стандартному значению рядом с этим полем. Для всей раскрытой группы нажмите **«Сбросить группу»**. Сброс возвращает значения из стандартного набора конструктора для редактируемой палитры. Это не возврат к ранее выбранному готовому стилю или последней публикации. В режиме **«Раздельно»** меняется только выбранная палитра. При общей палитре результат переносится в обе темы. Чтобы изменения появились на сайте, нажмите **«Опубликовать»**. *** ## Пользовательский CSS
### Создание и хранение CSS-файла Вкладка **«CSS-файл»** предназначена для дополнительных правил: селекторов существующих элементов, CSS-переменных и медиазапросов. Редактор работает с файлом `custom.css`. Исходный текст хранится отдельно от параметров конструктора и сохраняется при выборе готового стиля, публикации палитры и пересборке оформления. Чтобы создать файл: 1. Откройте вкладку **«CSS-файл»** и дождитесь загрузки редактора. 2. Введите CSS в блоке **«Редактор custom.css»**. 3. Дождитесь завершения проверки и исправьте ошибки, если они появились. 4. Нажмите **«Создать CSS-файл»**. Для уже созданного файла кнопка называется **«Сохранить и опубликовать»**. Сохранение пользовательского CSS сразу пересобирает опубликованное оформление с ранее сохранёнными параметрами конструктора. Максимальный размер исходного файла — **131 072 байта**, то есть **128 КиБ**. Счётчик рядом с редактором показывает текущий размер и предел. Файл должен содержать текст в UTF-8 без нулевых байтов. При превышении размера публикация недоступна. Собственный CSS применяется на сайте вместе с включённым оформлением конструктора. Если оформление опубликовано в состоянии **«Выключен»**, CSS сохраняется, но начнёт использоваться после включения и публикации конструктора. ### Работа в редакторе Редактор поддерживает подсветку CSS, номера строк, сворачивание блоков, автодополнение свойств и переменных, поиск, замену, отмену и повтор изменений. Основные действия с клавиатуры: * `Tab` — добавить отступ. * `Shift+Tab` — убрать отступ. * `Ctrl+F` или `Cmd+F` — открыть поиск. * `Esc`, затем `Tab` — выйти из редактора и продолжить переход по элементам страницы. Введите `--`, чтобы получить подсказки по переменным темы. В подсказках также учитываются переменные, объявленные в текущем CSS. Черновик, положение курсора и история отмены сохраняются при переключении вкладок внутри открытого конструктора. Для сохранения на сервере используйте кнопку публикации CSS. ### Шаблоны светлой и тёмной темы В группе **«Вставить шаблон:»** доступны три кнопки: * **«Оба блока»** — добавляет `:root` и `.dark`. * **`:root`** — добавляет блок общих значений. * **`.dark`** — добавляет блок переопределений для тёмной темы. Шаблон добавляется в конец файла. Существующий текст сохраняется. Блоки `:root` и `.dark` должны располагаться отдельно; `.dark` не нужно вкладывать в `:root`. Значения из `:root` действуют для всего сайта. В тёмной теме значения, объявленные в `.dark`, заменяют соответствующие общие значения; остальные продолжают наследоваться. #### Пример: отдельные цвета основной кнопки Следующий код задаёт синий фон основной кнопки в светлой теме и более светлый фон в тёмной. Цвета в примере можно заменить на свои. {% code title="custom.css" overflow="wrap" %} ```css :root { --primary-button-bg-color: #2563eb; --primary-button-text-color: #ffffff; } .dark { --primary-button-bg-color: #60a5fa; --primary-button-text-color: #0f172a; } ``` {% endcode %} Чтобы кнопка снова следовала основной палитре, удалите эти переопределения и опубликуйте CSS либо замените значения на `var(--primary)` и `var(--primary-foreground)` в обоих блоках. #### Пример: высота кнопок на небольшом экране Этот медиазапрос увеличивает базовую высоту кнопок до `2.5rem` на экранах шириной до `640px`. Он действует на компоненты, использующие `--control-height`. {% code title="custom.css" overflow="wrap" %} ```css @media (max-width: 640px) { :root { --control-height: 2.5rem; } } ``` {% endcode %} Для собственных классов правило применяется только к элементам, которые имеют указанный класс в разметке сайта. Добавление имени класса в CSS-файл само по себе не создаёт новый блок страницы. ### Проверка CSS перед публикацией Проверка охватывает весь файл. Пока она не завершилась, отображается **«Проверяем CSS…»**, а публикация недоступна. При корректном тексте появляется **«Ошибок CSS не найдено.»**. Ошибки блокируют сохранение; предупреждения позволяют опубликовать файл, но требуют проверки совместимости на сайте. Среди проверяемых проблем — пропущенные двоеточия и разделители объявлений, незакрытые скобки, строки и комментарии, неверная запись `url()`, неизвестные свойства и недопустимые значения известных свойств. Нажмите сообщение о проблеме, чтобы перейти к указанной строке и столбцу. Список показывает первые 100 замечаний; остальные становятся видны по мере исправления. Если используете `@import`, разместите его в начале файла, до обычных CSS-правил и вне вложенных блоков. Объявления `@charset` и порядка слоёв `@layer` могут предшествовать импорту. Корректные импорты при сборке сохраняются перед правилами оформления. ### Как CSS влияет на настройки конструктора Пользовательские правила добавляются после сгенерированных правил темы. На итог влияют обычные правила CSS: порядок объявлений, точность селекторов, наследование и `!important`. Если в `custom.css` повторно задана переменная палитры, её значение может перекрыть изменение из вкладки **«Цвета»**. При неожиданном результате проверьте обе настройки. Предпросмотр конструктора показывает параметры и палитры формы. Пользовательский CSS нужно проверять на публичном сайте после его публикации. {% hint style="info" %} Параметры конструктора и CSS имеют отдельные действия сохранения. Верхняя кнопка «Опубликовать» не сохраняет черновик CSS. Кнопка «Сохранить и опубликовать» в CSS-редакторе не сохраняет неопубликованные изменения палитр и размеров. {% endhint %} Если изменены обе части, сначала опубликуйте параметры конструктора, затем сохраните и опубликуйте CSS. После второго действия сайт получит оба набора изменений. ### Загрузка сохранённой версии Кнопка **«Загрузить заново»** повторно читает CSS-файл с сервера. Если в редакторе есть изменения, появится подтверждение их отмены. Перед подтверждением скопируйте нужный черновик в отдельное место. После загрузки текст редактора заменяется сохранённой версией. #### Если файл изменён в другой вкладке Сообщение **«Файл изменён в другой вкладке. Скопируйте свой черновик и загрузите текущую версию.»** означает, что сохранённый CSS изменился после загрузки в этот редактор. 1. Скопируйте текущий черновик. 2. Нажмите **«Загрузить заново»** и подтвердите замену текста. 3. Перенесите нужные изменения в загруженную версию, учитывая правки другого администратора или вкладки. 4. Дождитесь проверки CSS. 5. Нажмите **«Сохранить и опубликовать»**. #### Как убрать дополнительные правила Чтобы убрать влияние пользовательского CSS, очистите содержимое редактора и нажмите **«Сохранить и опубликовать»**. Пустой файл допустим. Палитры и параметры конструктора сохранятся. ## Публикация и восстановление оформления ### Публикация параметров и цветов Перед публикацией проверьте обе палитры, шрифт, размеры и переключатель **«Показывать выбранный дизайн на сайте»**. Нажмите **«Опубликовать»** в верхней части конструктора. Во время сохранения кнопка показывает **«Сохраняем»**. После успешного действия появляется сообщение **«Оформление опубликовано.»**, и текущая форма становится сохранённой. Опубликованный файл содержит общие параметры, обе палитры и сохранённый пользовательский CSS. Сайт подключает его автоматически. ### Отличия действий сохранения | Действие | Результат | | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | **«Сохранить в библиотеку»** | Создаёт повторно используемый стиль из текущих параметров; сайт не меняется. | | **«Опубликовать»** | Сохраняет параметры и палитры формы, затем собирает их с ранее сохранённым CSS. | | **«Создать CSS-файл»** / **«Сохранить и опубликовать»** | Сохраняет CSS и собирает его с ранее сохранёнными параметрами конструктора. | | **«Обновить файл»** | Пересобирает оформление из уже сохранённых параметров и CSS. | | **«Вернуть стандарт»** | Сохраняет и публикует стандартные параметры конструктора, сохраняя пользовательский CSS и библиотеку. | ### Адрес и версия файла В блоке **«Подключение на сайте»** отображаются адрес опубликованного CSS и текущая версия. Кнопка **«Скопировать адрес»** копирует показанный путь. Версия определяется содержимым собранного файла. Повторная публикация без изменения итогового CSS может оставить ту же версию. Исходный пользовательский CSS и собранный файл оформления — разные файлы. Для правок используйте конструктор и вкладку **«CSS-файл»**: ручные изменения собранного файла будут заменены при следующей пересборке. ### Пересборка сохранённого оформления Кнопка **«Обновить файл»** нужна для повторной сборки уже сохранённого оформления. Она не сохраняет текущий черновик. Если в параметрах или палитрах есть изменения, сначала опубликуйте их либо вернитесь к сохранённой форме. При изменённой форме кнопка пересборки недоступна. Неопубликованный CSS сохраняется отдельно через его редактор. После успешной пересборки появляется сообщение **«Файл оформления обновлён.»**. ### Возврат к стандартному оформлению 1. При необходимости сохраните текущий набор параметров в библиотеку. 2. Отдельно сохраните копию пользовательского CSS, если он понадобится позже. 3. Нажмите **«Вернуть стандарт»**. 4. В окне **«Вернуть стандартное оформление?»** подтвердите действие кнопкой **«Вернуть стандарт»**. Конструктор заменит обе палитры, шрифт и размеры стандартными значениями, включит показ оформления на сайте и сразу опубликует результат. Дополнительно нажимать **«Опубликовать»** не требуется. {% hint style="warning" %} «Вернуть стандарт» сохраняет содержимое custom.css. Его правила продолжают влиять на оформление. Для стандартного вида без дополнительных правил сначала очистите и опубликуйте CSS, затем выполните возврат к стандарту. {% endhint %} Сохранённые стили остаются в библиотеке и могут быть применены повторно. ### Временное отключение оформления Чтобы перейти на базовый вид с возможностью позднее включить свои настройки: 1. Откройте вкладку **«Параметры»**. 2. Выключите **«Показывать выбранный дизайн на сайте»**. 3. Нажмите **«Опубликовать»**. Для возврата своего оформления включите этот переключатель и снова опубликуйте параметры. *** ## Проверка результата на сайте ### Проверка до публикации Блок **«Предпросмотр»** показывает пример шапки, формы обмена, полей, списка выбора и кнопки. Изменения параметров и цветов отображаются сразу. Это демонстрационный блок. Показанные валюты и суммы служат примером, а кнопка **«Создать заявку»** в нём не оформляет обмен. Проверьте светлую и тёмную палитры: текст должен читаться на своём фоне, поля и границы должны быть различимы, кнопка — заметна, а фокус поля — виден. ### Проверка после публикации Откройте публичный сайт по адресу `https://ваш_домен` и проверьте результат: * Общий фон, секции, карточки и основной текст соответствуют выбранной палитре. * Шапка, её кнопки, активный пункт меню и текстовый логотип выглядят ожидаемо. * В форме обмена читаются суммы, подсказки, поиск и выбранные валюты. * Высота и скругление полей, списков и кнопок удобны на компьютере и телефоне. * Подвал и ссылки хорошо читаются, если нижняя часть сайта включена. * При доступном переключении тем обе палитры отображаются корректно. * При режиме **«Системная»** оформление соответствует теме устройства. * Пользовательский CSS даёт ожидаемый результат и не скрывает нужные элементы управления. Открытая вкладка сайта может получить новую версию автоматически через подключение обновлений. Для окончательной проверки обновите страницу. При проблеме загрузки нового CSS ранее подключённое оформление может сохраняться до успешного обновления. ### Если оформление отличается от ожидаемого Проверьте, опубликованы ли изменения и включён ли показ дизайна на сайте. Убедитесь, что редактировали палитру, которую использует посетитель. Если отдельный цвет не следует общей палитре, проверьте его значение: конкретный HEX-цвет делает элемент независимым от `var(...)`. Затем проверьте переопределения этой переменной в `custom.css`. Если после **«Вернуть стандарт»** сохраняются прежние цвета или размеры, проверьте пользовательский CSS. Для устранения его влияния очистите файл и опубликуйте изменения. Если нужного элемента нет на странице, проверьте его включение и расположение в **«Настройки» — «Общие настройки» — «Оформление»** и **«Секции главной»**. Настройка цвета действует на отображаемый элемент. {% content-ref url="/pages/AegdrfPA1491G4PpmkFQ" %} [Секции главной страницы](/guide/sait/vneshnii-vid/sekcii-glavnoi-stranicy.md) {% endcontent-ref %} Если кнопка сохранения CSS недоступна, дождитесь окончания загрузки и проверки, устраните ошибки и проверьте размер файла. Для существующего файла без новых изменений кнопка **«Сохранить и опубликовать»** также недоступна. При сообщении об ошибке публикации сначала сохраните копию черновика. После устранения причины повторите действие и проверьте сообщение об успехе и внешний вид публичного сайта.