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

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

По мере выхода релизов, данный конструктор добавлен совсем недавно и работает в 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; // Цвет текста

Last updated