Настройка стилей

Внимание

Служба поддержки не оказывает помощь по работе с данным разделом.

Эта документация еще не завершена, поэтому не рекомендуется спешить воспользоваться всеми параметрами. Используйте только то, что уже задокументировано.

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

Когда вы добавите возможность менять цвета всех блоков?

По мере выхода релизов, данный конструктор добавлен совсем недавно и работает в beta режиме и многих блоков нет в конструкторе.

Все что вам нужно, ожидать релиза

Вопросы и Ответы

Где взять цвета?

Стандартный цвет

https://colorscheme.ru/color-converter.html

Градиент

https://cssgradient.io/

Как получить все параметры стилей?

--iex-exchange-search-bg: #fff;
--iex-exchange-search-border-color: #f5f5f5;
--iex-exchange-search-text-color: rgba(103, 103, 103, 0.89);
--iex-exchange-search-pl-text-color: rgba(103, 103, 103, 0.89);
--iex-payment-info-color: #b5b0b0;
--iex-payment-value-color: rgb(34, 35, 50);
--iex-rules-color: #a7a7a7;
--iex-rules-link-color: #999;
--iex-drawer-color: rgba(0,0,0,.87);
--exchange-dop-comm-bg: #f7f7f7;
--exchange-dop-comm-color: #666;
--exchange-dop-comm-font-size: 13px;
--exchange-verification-color:#4c9100;
--exchange-verification-bg: #f7ffed;
--exchange-verification-font-size: 14px;
--exchange-verification-align:center;
--exchange-course-value-color: #878787;
--exchange-course-value-font-size: 1.2rem;
--exchange-rules-checkbox-color: #727272;
--exchange-rules-checkbox-mobile-font-size: 13px;
--exchange-rules-checkbox-font-size: 14px;
--iex-exchange-section-title-font-weight: 300;
--iex-exchange-section-title-align: center;
--home-description-text-color: #a9a6a6;
--banners-bg: #fff;
--banners-button-bg: #f9f9f9;
--banners-button-color: #000;
--banners-title-color: #29303e;
--banners-text-color: rgba(41, 48, 62, 0.5);
--service-break-title-color: #3e4756;
--service-break-title-font-weight: 400;
--service-break-text-color: #999999;
--iex-mobile-home-welcome-h1-size: 30px;
--iex-mobile-home-welcome-h1: #5568d4;
--iex-mobile-home-welcome-text-size: 15px;
--iex-mobile-home-welcome-text: #4a5861;
--iex-font-family: 'Roboto', sans-serif;
--iex-offline-bg: #bd0303;
--iex-offline-color: #fff;
--iex-exchange-description-bg: #fbfbfb;
--iex-exchange-description-color: #5f5f5f;
--iex-exchange-description-color-title: #212121;
--iex-base-width: 1200px;
--iex-main-home-welcome-h1: #5568d4;
--iex-main-home-welcome-h1-size: 52px;
--iex-main-home-welcome-text: #4a5861;
--iex-main-home-welcome-text-size: 19px;
--iex-faq-navigation-title: rgb(34, 35, 50);
--iex-faq-navigation-title-mobile: #4a4a4a;
--iex-faq-navigation-bg: #f7f8f9;
--iex-faq-expansion-bg: #f7f8f9;
--iex-faq-expansion-bg-hover: rgba(131, 134, 179, 0.18);
--iex-faq-text-color: #000;
--iex-faq-expansion-body-color: #000;
--iex-faq-expansion-header-title: rgb(34, 35, 50);
--iex-faq-desc: #878792;
--iex-faq-expansion-mobile-bg: #f7f8f9;
--iex-faq-expansion-mobile-hover-bg: #e6eaed;
--iex-contact-block-link-bg: #eceef2;
--iex-contact-block-link-color: #303a43;
--iex-contact-left-block-title: #303a43;
--iex-contact-title-bg: #2d2d2d;
--iex-contact-desc-color: #878792;
--iex-contact-left-block-bg: #f7f8f9;
--iex-contact-left-block-color: #787878;
--iex-contact-block-bg: #f7f8f9;
--iex-language-bg: #f7f7f7;
--iex-kyc-bg: #f3f4f8;
--iex-payment-input-hint: #fbfbfb;
--iex-footer-bg: #fff;
--iex-footer-desc-color: #a1aab1;
--iex-footer-header-color: #3c4859;
--iex-footer-a: #8b939b;
--iex-footer-a-hover: #0facf3;
--iex-footer-linear: #e5e5e5;
--iex-page-bg: #fff;
--iex-page-color: #1c1c1c;
--iex-exchange-block-in-bg: #fff;
--iex-exchange-block-out-bg: #fff;
--iex-exchange-block-data-bg: #fff;
--iex-exchange-list-height: 55px;
--iex-exchange-section-title: rgba(0, 0, 0, 0.87);
--iex-exchange-section-bg-title: rgba(0, 0, 0, 0.87);
--iex-exchange-section-bg: #fff;
--iex-exchange-section-color: #fff;
--iex-exchange-section-no-bg: '';
--iex-exchange-section-no-color: #fff;
--iex-main-bg: -webkit-linear-gradient(90deg, #ebf0f3, #f4f6f7) fixed;
--iex-mobile-sidenav-bg: #5568d4;
--iex-mobile-sidenav-color: #fff;
--iex-mobile-sidenav-active-color: #fff;
--iex-checkbox-checked-bg:#5568d4;
--iex-title-font-weight: 500;
--iex-mobile-form-style-bg: #f1f2f8;
--iex-form-price-color: #252a48;
--iex-form-price-font-size: 20px;
--iex-form-price-hint-color: #95abb7;
--iex-form-price-code-color: rgba(0, 0, 0, 0.87);
--iex-course-color: #111111;
--iex-course-border-color: #e9e9e9;
--iex-form-style-bg: #f3f4f8;
--iex-form-style-label: #818497;
--iex-progress-bg-order: #5568d4;
--iex-progress-spinner-bg: #5568d4;
--header-navigation-color: #787878;
--iex-partner-tab-bg: #eceef2;
--iex-partner-tab-color: #303a43;
--iex-partner-tab-active-bg: #5568d4;
--iex-partner-tab-active-color: #fff;
--iex-contests-bg: linear-gradient(18deg, rgba(85,104,212,1) 25%, rgba(158,119,237,1) 82%);
--iex-contests-button-bg: #fff;
--iex-contests-button-color: #000;
--iex-account-lottery-wrap-bg :  linear-gradient(18deg,#5568d4 25%,#9e77ed 82%);
 --iex-account-lottery-wrap-color :  #fff;
 --iex-order-link-color: #5568d4;
 --iex-order-item-bg: rgba(243, 244, 248, 0.6);
 --iex-toolbar-mobile-color: #5568d4;
 --iex-toolbar-mobile-text-color: #fff;
 --iex-order-pay-field-bg: #2a343c;
 --iex-order-pay-field-color: #fff;
 --iex-create-order-button-bg: #5568d4;
 --iex-create-order-button-color: #fff;
 --iex-create-order-button-bg-hover: #4f60cc;
 --iex-create-order-button-color-hover: #fff;
 --iex-referral-first-bg: #f3f4f8;
 --iex-referral-first-color: #1c1c1c;
 --iex-referral-bg: #f3f4f8;
 --iex-referral-color: rgba(0, 0, 0, 0.5);
 --iex-referral-percent-bg: #262626;
 --iex-referral-percent-color: #fff;
 --iex--toolbar-menu-bg: #5568d4;
 --iex--toolbar-menu-color: #fff;
 --iex--toolbar-menu-hover-bg: #e5e5e5;
 --iex-auth-login-color: #787878;
 --iex-auth-login-bg: 'transparent';
 --iex-auth-register-color: #fff;
 --iex-auth-register-bg: #5568d4;
 --iex-auth-font-weight: 500;
 --iex-login-bg-gradient: -webkit-linear-gradient( 90deg,rgba(85,104,212,1) 0, rgba(158,119,237,1) 100%);
 --iex-login-bg-gradient-color: rgba(255, 255, 255, 1);
 --iex-login-form-button-register: #5568d4;
 --iex-login-form-button-register-color: rgba(255, 255, 255, 0.85);
 --iex-login-form-button-disabled: #e3e3e3;
 --iex-toolbar-link-color: #5568d4;
 --iex-logotype-mobile-width: 150px;
 --iex-logotype-mobile-height: auto;
 --iex-logotype-width: 180px;
 --iex-logotype-height: auto;
 --iex-logotype-text: #5568d4;
 --iex-logotype-text-hover: #222332;
 --iex-bar-icon: #222332;
 --iex-a: #337ab7;
 --iex-a-hover: #23527c;
 --iex-base-bg-color: #5568d4;
 --iex-base-bg-text: #5568d4;
 --iex-bg-color-button: #222332;
 --iex-account-button-bg: #f5f3ff;
 --iex-exchange-title: #222332;
 --iex-exchange-mat-list-color: #222332;
 --iex-exchange-mat-list-active-color: #222332;
 --iex-footer-text: #222332;
 --iex-color-white: #fff;
 --iex-base-bg-color-white: #fff;
 --iex-base-bg-font-weight: 400;
 --iex-cashback-selected: #f5f3ff;
 --iex-button-group-bg: #222332;
 --iex-mat-button-toggle-color: #fff;
 --iex-mat-button-toggle-bg: rgba(18, 18, 29, 0.68);
 --iex-main-menu-popup-renderer: hsl(231, 34%, 95%);
 --iex-tooltip-arrow: #465368e6;
 --iex-statistic-bg: #5568d4;
 --iex-default-main-gradient: -webkit-linear-gradient(90deg,#151c2d,#242b3c);
 --iex-toggle-checked-bg: #465368e6;
 --iex-toggle-checked-color: #fff;
 --iex-toggle-search-icon: #b3b3b3;
 --iex-toggle-filter-icon: rgba(103, 103, 103, 0.89);
 --iex-exchange-reserve-color: #222332;
 --iex-exchange-reserve-code-color: #b6b6b6;
 --iex-dialog-color: #4d4d4d;
 --iex-dialog-bg: #fff;
 --course-reserve-button-active-bg: #f2f2f2;
 --course-reserve-button-active-color: #000;
 --course-reserve-group-button-color: #989898;
 --iex-exchange-block-radius: 8px;
 --iex-exchange-indent: 8px;
 --iex-exchange-common-bg: #fff;
 --iex-exchange-common-bg-radius:10px;
 --iex-exchange-common-border-color: #e9e9e9;
 --iex-exchange-scrollbar: #f3f4f8;
 --iex-exchange-scrollbar-thumb: #DFE1E5;
 --iex-exchange-scrollbar-track: #f3f4f8;
 --iex-exchange-scrollbar-radius: 10px;
 --iex-exchange-scrollbar-width: 3px;

Я изменил параметры цветов, как мне их загрузить на сайт?

Загрузить можно 2 способами.

1 Способ

В панели управления, зайдите "Настройки - Настройка системы", нажмите на заголовок "Настройки продукта" и выберите "Настройки интерфейса".

Во вкладке "Настройка стиля", найдите пункт "Загрузить свой стиль" и добавьте все новые изменения

2 Способ.

На сервере, в папке /public/css, создайте файл custom.css и загрузите все правки.

Как правильно прописать стили?

Стили можно прописать 2 способа, первая это использование нескольких цветов, второе это один цвет

Первый способ

--iex-main-bg: linear-gradient()

Второй способ

--iex-main-bg: (вставьте цвет к примеру #fff; или rgba(188, 180, 217, 0.3);)

Что делать, если новый цвет не применяется?

Если цвет не применяется до в конце установленного цвета добавьте !important

В каких ситуация использовать linear-gradient()?

Рекомендуем ее использовать только в тех стилях, где она предусмотрено по умолчанию, в остальных не рекомендуется.

Если вы хотите custom цвета, то заменяйте если в параметрах найдете

• -webkit-linear-gradient(90deg, #ebf0f3, #f4f6f7) fixed

• #5568d4

Замените на новые цвета

Основной цвет теста на сайте

--iex-page-color: #1c1c1c;

Шрифт сайта

--iex-font-family: 'Roboto', sans-serif;

Оформление поля "Суммы обмена"

--iex-form-price-font-size: 20px; // Размер текста
--iex-form-price-color: #252a48; // Цвет текста
--iex-form-price-code-color: rgba(0, 0, 0, 0.87); // Цвет текста кода валюты
--iex-form-price-hint-color: #95abb7; // Цвет текста внизу суммы обмена

Оформление поля "Поиск"

--iex-exchange-search-text-color: rgba(103, 103, 103, 0.89); // Цвет введенного текста
--iex-toggle-search-icon: #b3b3b3; // Цвет иконки поиска
--iex-exchange-search-pl-text-color: rgba(103, 103, 103, 0.89); // Цвет не введенного текста
--iex-toggle-filter-icon: rgba(103, 103, 103, 0.89); // Цвет иконки фильтров (справа)

Оформление выбранных валют в блоке "Ввод данных"

--iex-payment-info-color: #b5b0b0; // Цвет валюты
--iex-payment-value-color: rgb(34, 35, 50); // Цвет суммы обмена
--iex-course-color: #111111; // Цвет текста "Обмен по курсу"
--iex-course-border-color: // Цвет линии внизу текста "Обмен по курсу"

Цвет ссылок

--iex-a: #337ab7; // Стандартный
--iex-a-hover: #23527c; // При наведении

Цвет фона и текста страниц

--iex-page-bg: #fff; // Цвет фона
--iex-page-color: #1c1c1c; // Цвет текста

Цвет фона блоков

--iex-exchange-block-bg: #fff;

Цвет текста заголовков (на главной странице без фона)

--iex-exchange-section-title: #000;

Цвет текста заголовков (на главной странице с фоном)

--iex-exchange-section-bg-title: #000;

Высота названий валют

--iex-exchange-list-height: 55px;

Фон сайта

Здесь вы можете настроить фон сайта.

• Если хотите градиент то используйте: -webkit-linear-gradient(90deg, Цвет, Цвет) fixed

• Если хотите один цвет: Цвет

--iex-main-bg: -webkit-linear-gradient(90deg, #ebf0f3, #f4f6f7) fixed;

Цвет текстового логотипа

Стандартный

#5568d4, #222332 - замените на тот цвет, который вам нужен

--iex-logotype-text: #5568d4;

При наведении на логотип

--iex-logotype-text-hover: #222332;

Цвет фона полей

Для мобильной версии

--iex-mobile-form-style-bg: #f1f2f8;

Для web версии

--iex-form-style-bg: #f3f4f8;

Фон меню в мобильной версии

Меню

#5568d4 - замените на тот цвет фона, который вам нужен

--iex-mobile-sidenav-bg: #5568d4;

Цвет текста в меню мобильной версии

#fff - замените на тот цвет, который вам нужен

--iex-mobile-sidenav-color: #fff;

Цвет фона шапки в мобильной версии

#5568d4 - замените на тот цвет, который вам нужен

--iex-toolbar-mobile-color: #5568d4;

Цвет текста активного разделе в меню мобильной версии

#fff - замените на тот цвет, который вам нужен

--iex-mobile-sidenav-active-color: #fff;

Цвет фона Конкурсов

Для главной страницы

Раздел "Конкурсы"

• Если хотите градиент то используйте: linear-gradient(18deg, rgba(85,104,212,1) 25%, rgba(158,119,237,1) 82%)

• Если хотите один цвет: Цвет

--iex-contests-bg: linear-gradient(18deg, rgba(85,104,212,1) 25%, rgba(158,119,237,1) 82%);

Для личного кабинета

• Если хотите градиент то используйте: linear-gradient(18deg,#5568d4 25%,#9e77ed 82%);

• Если хотите один цвет: Цвет

--iex-account-lottery-wrap-bg: linear-gradient(18deg,#5568d4 25%,#9e77ed 82%);

Цвет выделения галочек

#5568d4 - замените на тот цвет, который вам нужен

--iex-checkbox-checked-bg:#5568d4;

Цвет текста меню в шапке сайта

#787878 - замените на тот цвет, который вам нужен

--header-navigation-color: #787878;

Цвет текста остальных элементов в шапке сайта

#222332 - замените на тот цвет, который вам нужен

--iex-bar-icon: #222332;

Раздел "Партнерам"

Цвет фона активной кнопки

#5568d4 - замените на тот цвет, который вам нужен

--iex-partner-tab-active-bg: #5568d4;

Цвет текста, активной кнопки

#fff - замените на тот цвет, который вам нужен

--iex-partner-tab-active-color: #fff;

Цвет фона (неактивной) кнопки

#eceef2 - замените на тот цвет, который вам нужен

--iex-partner-tab-bg: #eceef2;

Цвет текста (неактивной) кнопки

#303a43 - замените на тот цвет, который вам нужен

--iex-partner-tab-color: #303a43;

Цвет кнопки и текста "Перейдите к оплате"

#5568d4 и #fff - замените на тот цвет, который вам нужен

--iex-base-bg-color: #5568d4; // Цвет кнопки
--iex-base-bg-color-white: #fff; // Цвет текста