Пресеты тем партнерской панели помогут вам быстро адаптировать партнерскую панель Affise к стилю вашего бренда. Никаких технических навыков не требуется: просто выберите готовый пресет и отправьте файл JSON своему менеджеру по работе с клиентами Affise, и он применит её за вас.
💰 Применение кастомных тем к партнерской панели доступно только для определенных тарифных планов. Свяжитесь с вашим менеджером по работе с клиентами Affise, чтобы включить эту функцию и уточнить условия.
🔎 Обзор самого редактора дизайна и принципов работы светлого и темного режимов см. в гайде Настройка дизайна.
Готовые темы
Вы можете выбрать одну из четырех готовых тем, чтобы адаптировать партнерскую панель к фирменному стилю вашего бренда:
Marine: современный шрифт без засечек, темно-синяя боковая панель, небесно-голубые акценты, пользовательские иконки меню и океанический градиент на экране входа.
Aurora: жирные современные шрифты, боковая панель с градиентом от фиолетового к пурпурному, пункты меню, написанные заглавными буквами, и яркий градиент на экране входа в систему.
Forest: классический шрифт с засечками, темно-зеленая боковая панель с мятными акцентами на активном элементе, настраиваемые значки меню и мягко освещенная основная область. Спокойный, устоявшийся вид.
Velvet: полностью темная тема с янтарными акцентами и диагональным градиентом в боковой панели. Насыщенный и премиальный вид.
Как применить тему
Вы можете самостоятельно поэкспериментировать с темой, но окончательную настройку применяет ваш менеджер по работе с клиентами Affise.
1. Необязательно. Предварительный просмотр в редакторе тем
🔎 В партнерской панели Affise есть встроенный редактор тем, где вы можете интерактивно настраивать цвета, шрифты, иконки и цвета графиков и сразу видеть результат. Подробнее об этом читайте здесь.
Чтобы посмотреть, как готовая тема выглядит в вашей партнерской панели, сделайте следующее:
Перейдите в Панель партнера > Дашборд.
Добавьте параметр theme_editor=1 в конец URL-адреса страницы, чтобы включить редактор тем.
В правом нижнем углу нажмите на иконку Редактор.
Нажмите Получить конфигурацию.
Во всплывающем окне нажмите Редактировать и вставьте JSON нужной предустановки. Нажмите Ввод.
Предустановки тем
Вы можете использовать следующие пресеты:
Marine
{
"fontFamily": "'Space Grotesk', 'EuclidCircularA', 'Open Sans', -apple-system, sans-serif",
"$fontFamilyTitles": "'Space Grotesk', 'EuclidCircularA', 'Open Sans', -apple-system, sans-serif",
"$fonts": [
{ "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap", "family": "Space Grotesk" }
],
"colorPrimary": "#0369a1",
"colorInfo": "#0369a1",
"colorLink": "#0369a1",
"colorLinkHover": "#0284c7",
"colorLinkActive": "#075985",
"borderRadius": 6,
"borderRadiusLG": 12,
"$colorBgLayout": "#f8fafc",
"$colorBgSidebar": "#0c1e35",
"$colorBgSidebarGradient": "linear-gradient(180deg, #0c1e35 0%, #0a1628 100%)",
"$colorSidebarSplitHorizontal": "rgba(56,189,248,0.18)",
"$colorSidebarFooterLink": "#7dd3fc",
"$colorBgAuthLayout": "linear-gradient(140deg, #0c1e35 0%, #0369a1 60%, #0ea5e9 100%)",
"$colorBgAuthHeader": "transparent",
"$showAuthFormLogo": true,
"$icons": {
"main": "https://affise-news.s3.eu-central-1.amazonaws.com/dashboard_light.svg",
"offers": "https://affise-news.s3.eu-central-1.amazonaws.com/offers_light.svg",
"smartlinks": "https://affise-news.s3.eu-central-1.amazonaws.com/smarlinks_light.svg",
"statistics": "https://affise-news.s3.eu-central-1.amazonaws.com/statistics_light.svg",
"payments": "https://affise-news.s3.eu-central-1.amazonaws.com/payments_light.svg",
"news": "https://affise-news.s3.eu-central-1.amazonaws.com/news_light.svg",
"referrals": "https://affise-news.s3.eu-central-1.amazonaws.com/refferals_light.svg",
"externalLink": "https://affise-news.s3.eu-central-1.amazonaws.com/link_light.svg",
"api": "https://affise-news.s3.eu-central-1.amazonaws.com/api_light.svg",
"support": "https://affise-news.s3.eu-central-1.amazonaws.com/support_light.svg"
},
"$charts": {
"conversions": "#0369a1",
"clicks": "#0ea5e9",
"revenue-usd": "#0c1e35",
"revenue-eur": "#06b6d4",
"revenue-byn": "#67e8f9"
},
"$component": {
"Button": {
"colorPrimary": "#0369a1",
"primaryColor": "#ffffff",
"fontWeight": 600,
"defaultBg": "transparent",
"defaultColor": "#0369a1",
"defaultBorderColor": "#0369a1",
"defaultHoverBg": "#0369a1",
"defaultHoverColor": "#ffffff",
"defaultHoverBorderColor": "#0369a1"
},
"Menu": {
"itemColor": "rgba(255,255,255,0.75)",
"itemSelectedBg": "rgba(56,189,248,0.16)",
"itemSelectedColor": "#7dd3fc",
"itemHoverBg": "rgba(255,255,255,0.06)"
},
"Card": {
"headerBg": "#f0f9ff",
"colorBorderSecondary": "#bae6fd",
"colorBgContainer": "#ffffff"
},
"Tabs": {
"itemSelectedColor": "#0369a1",
"itemActiveColor": "#0369a1",
"inkBarColor": "#0369a1"
}
}
}Aurora
{
"fontFamily": "'Sora', 'EuclidCircularA', 'Open Sans', -apple-system, sans-serif",
"$fontFamilyTitles": "'Bricolage Grotesque', 'Sora', 'EuclidCircularA', 'Open Sans', sans-serif",
"$fonts": [
{ "source": "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap", "family": "Sora" },
{ "source": "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],500;12..96,600;12..96,700;12..96,800&display=swap", "family": "Bricolage Grotesque" }
],
"colorPrimary": "#d946ef",
"colorInfo": "#d946ef",
"colorLink": "#a21caf",
"colorLinkHover": "#c026d3",
"colorLinkActive": "#86198f",
"borderRadius": 6,
"borderRadiusLG": 14,
"$colorBgLayout": "#fafafa",
"$colorBgSidebar": "#1e1b3a",
"$colorBgSidebarGradient": "linear-gradient(165deg, #2a1f4d 0%, #0f0a1f 100%)",
"$colorSidebarSplitHorizontal": "rgba(217,70,239,0.20)",
"$colorSidebarFooterLink": "#f0abfc",
"$colorBgAuthLayout": "linear-gradient(135deg, #1e1b3a 0%, #4a1d6e 50%, #d946ef 100%)",
"$colorBgAuthHeader": "transparent",
"$showAuthFormLogo": true,
"$sidebarTextTransform": "uppercase",
"$buttonTextTransform": "uppercase",
"$charts": {
"conversions": "#d946ef",
"clicks": "#8b5cf6",
"revenue-usd": "#ec4899",
"revenue-eur": "#a855f7",
"revenue-byn": "#6366f1"
},
"$component": {
"Button": {
"colorPrimary": "#d946ef",
"primaryColor": "#ffffff",
"fontWeight": 600,
"defaultBg": "transparent",
"defaultColor": "#d946ef",
"defaultBorderColor": "#d946ef",
"defaultHoverBg": "#d946ef",
"defaultHoverColor": "#ffffff",
"defaultHoverBorderColor": "#d946ef"
},
"Menu": {
"itemColor": "rgba(255,255,255,0.78)",
"itemSelectedBg": "rgba(217,70,239,0.22)",
"itemSelectedColor": "#f0abfc",
"itemHoverBg": "rgba(255,255,255,0.06)",
"fontWeight": 500
},
"Card": {
"headerBg": "#fdf4ff",
"colorBorderSecondary": "#f5d0fe",
"colorBgContainer": "#ffffff"
},
"Tabs": {
"itemSelectedColor": "#d946ef",
"itemActiveColor": "#d946ef",
"inkBarColor": "#d946ef"
}
}
}Forest
{
"fontFamily": "'Lora', 'Open Sans', Georgia, serif",
"$fontFamilyTitles": "'Lora', 'Open Sans', Georgia, serif",
"$fonts": [
{ "source": "https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap", "family": "Lora" }
],
"colorPrimary": "#15803d",
"colorInfo": "#15803d",
"colorLink": "#15803d",
"colorLinkHover": "#16a34a",
"colorLinkActive": "#166534",
"borderRadius": 8,
"borderRadiusLG": 14,
"$colorBgSidebar": "#0f3a23",
"$colorSidebarSplitHorizontal": "rgba(134,239,172,0.18)",
"$colorSidebarFooterLink": "#86efac",
"$colorBgAuthLayout": "linear-gradient(180deg, #d1fae5 0%, #ecfccb 100%)",
"$colorBgAuthHeader": "transparent",
"$showAuthFormLogo": true,
"$icons": {
"main": "https://affise-news.s3.eu-central-1.amazonaws.com/dashboard_light.svg",
"offers": "https://affise-news.s3.eu-central-1.amazonaws.com/offers_light.svg",
"smartlinks": "https://affise-news.s3.eu-central-1.amazonaws.com/smarlinks_light.svg",
"statistics": "https://affise-news.s3.eu-central-1.amazonaws.com/statistics_light.svg",
"payments": "https://affise-news.s3.eu-central-1.amazonaws.com/payments_light.svg",
"news": "https://affise-news.s3.eu-central-1.amazonaws.com/news_light.svg",
"referrals": "https://affise-news.s3.eu-central-1.amazonaws.com/refferals_light.svg",
"externalLink": "https://affise-news.s3.eu-central-1.amazonaws.com/link_light.svg",
"api": "https://affise-news.s3.eu-central-1.amazonaws.com/api_light.svg",
"support": "https://affise-news.s3.eu-central-1.amazonaws.com/support_light.svg"
},
"$charts": {
"conversions": "#15803d",
"clicks": "#0891b2",
"revenue-usd": "#7c2d12",
"revenue-eur": "#65a30d",
"revenue-byn": "#0e7490"
},
"$component": {
"Button": {
"colorPrimary": "#15803d",
"primaryColor": "#ffffff",
"fontWeight": 600,
"defaultBg": "transparent",
"defaultColor": "#15803d",
"defaultBorderColor": "#15803d",
"defaultHoverBg": "#15803d",
"defaultHoverColor": "#ffffff"
},
"Menu": {
"itemColor": "rgba(255,255,255,0.92)",
"itemSelectedBg": "rgba(134,239,172,0.16)",
"itemSelectedColor": "#86efac",
"itemHoverBg": "rgba(255,255,255,0.08)"
},
"Card": {
"headerBg": "#f0fdf4",
"colorBorderSecondary": "#bbf7d0",
"colorBgContainer": "#ffffff"
},
"Tabs": {
"itemSelectedColor": "#15803d",
"itemActiveColor": "#15803d",
"inkBarColor": "#15803d"
}
}
}Velvet
{
"fontFamily": "'Plus Jakarta Sans', 'Open Sans', -apple-system, sans-serif",
"$fonts": [
{ "source": "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap", "family": "Plus Jakarta Sans" }
],
"colorPrimary": "#f59e0b",
"colorInfo": "#f59e0b",
"colorLink": "#fbbf24",
"colorLinkHover": "#fcd34d",
"colorLinkActive": "#f59e0b",
"colorText": "rgba(255,255,255,0.92)",
"colorTextSecondary": "#a8a29e",
"colorTextDescription": "#a8a29e",
"colorBgContainer": "#1c1917",
"colorBgElevated": "#292524",
"colorBorder": "rgba(255,255,255,0.08)",
"colorSplit": "rgba(255,255,255,0.06)",
"$colorBgLayout": "#0c0a09",
"$colorBgSidebar": "#7c2d12",
"$colorBgSidebarGradient": "linear-gradient(165deg, #7c2d12 0%, #1c1917 100%)",
"$colorSidebarSplitHorizontal": "rgba(255,255,255,0.12)",
"$colorSidebarFooterLink": "#fbbf24",
"$colorBgAuthLayout": "#0c0a09",
"$colorBgAuthHeader": "transparent",
"$cartesianGridOpacity": 0.3,
"$charts": {
"conversions": "#f59e0b",
"clicks": "#3b82f6",
"revenue-usd": "#ef4444",
"revenue-eur": "#10b981",
"revenue-byn": "#ec4899",
"revenue-rub": "#a855f7"
},
"$component": {
"Button": {
"colorPrimary": "#f59e0b",
"primaryColor": "#1c1917",
"fontWeight": 600,
"defaultBg": "transparent",
"defaultColor": "#f59e0b",
"defaultBorderColor": "#f59e0b",
"defaultHoverBg": "#f59e0b",
"defaultHoverColor": "#1c1917",
"defaultHoverBorderColor": "#f59e0b"
},
"Menu": {
"itemSelectedBg": "rgba(245,158,11,0.18)",
"itemSelectedColor": "#fbbf24"
},
"Card": {
"colorBorderSecondary": "rgba(255,255,255,0.08)",
"headerBg": "#292524",
"colorBgContainer": "#1c1917"
}
}
}2. Отправьте файл JSON своему менеджеру по работе с клиентами Affise
Как только вы выберете конфигурацию, будь то один из четырех пресетов или экспорт из редактора тем, просто поделитесь файлом JSON со своим менеджером в Affise. Он применит его к вашей партнерской панели через Админская панель > Настройки > Партнеры > Внешний вид в разделе Кастомизация параметров вашей партнерской панели.
⚠️ Светлая тема и Темная тема — это две независимые конфигурации JSON, хранящиеся отдельно. Чтобы поддерживать оба режима, отправьте файл JSON для каждого из них.
Возможности настройки
Вы также можете настроить панель с нуля, регулируя каждую ее часть. В таблице ниже каждая часть панели сопоставлена с ключами конфигурации, которые ее управляют.
Область панели | Ключи JSON |
Основной цвет бренда |
|
Цвета ссылок |
|
Фон боковой панели |
|
Активный пункт меню |
|
Фон экрана входа |
|
Логотип на экране входа |
|
Основные кнопки |
|
Вторичные кнопки |
|
Шрифт |
|
Шрифт заголовка |
|
Пункты меню заглавными буквами |
|
Скругление углов |
|
Цвета линий на графике |
|
Пользовательские значки меню |
|
Целевые фрагменты для конкретных настроек
Каждый блок ниже представляет собой самостоятельный фрагмент JSON. Скопируйте нужный вам фрагмент и либо добавьте его в существующую конфигурацию, либо используйте отдельно, так как каждый фрагмент работает независимо.
Изменение только цвета бренда:
{
"colorPrimary": "#e16b5a",
"colorInfo": "#e16b5a",
"colorLink": "#e16b5a"
}Сделать боковую панель темной:
{
"$colorBgSidebar": "#1B222B"
}Боковая панель с диагональным градиентом:
{
"$colorBgSidebar": "#6A357B",
"$colorBgSidebarGradient": "linear-gradient(135deg, #6A357B 0%, #120A31 100%)"
}Активный пункт меню в цвете вашего бренда:
{
"$component": {
"Menu": {
"itemSelectedBg": "#774CDC",
"itemSelectedColor": "#FFFFFF"
}
}
}🔎 Если цвет вашего бренда темный, текст активного пункта обычно белый. Если цвет вашего бренда светлый (желтый, мятный, коралловый), используйте черный.
Кнопки, полностью закрашенные цветом бренда:
{
"$component": {
"Button": {
"colorPrimary": "#2D8546",
"primaryColor": "#ffffff",
"fontWeight": 600,
"defaultBg": "#2D8546",
"defaultColor": "#ffffff",
"defaultBorderColor": "#2D8546",
"defaultHoverBg": "#2D8546",
"defaultHoverColor": "#ffffff"
}
}
}Кнопки с контуром (вместо заливки):
{
"$component": {
"Button": {
"colorPrimary": "#774cdc",
"primaryColor": "#ffffff",
"fontWeight": 600,
"defaultBg": "transparent",
"defaultColor": "#774cdc",
"defaultBorderColor": "#774cdc",
"defaultHoverBg": "#774cdc",
"defaultHoverColor": "#ffffff"
}
}
}Брендируйте экран входа:
{
"$showAuthFormLogo": true,
"$colorBgAuthLayout": "linear-gradient(180deg, #BCFECE 0%, #D7FEC2 100%)",
"$colorBgAuthHeader": "transparent"
}Подключите шрифт Google Font:
{
"fontFamily": "'Inter', sans-serif",
"$fonts": [
{
"source": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
"family": "Inter"
}
]
}Используйте отдельный шрифт для заголовков:
{
"$fontFamilyTitles": "'Unbounded', sans-serif",
"$fonts": [
{
"source": "https://fonts.googleapis.com/css2?family=Unbounded:[email protected]&display=swap",
"family": "Unbounded"
}
]
}Пункты меню и кнопки заглавными буквами:
{
"$sidebarTextTransform": "uppercase",
"$buttonTextTransform": "uppercase"
}Более скругленные углы:
{
"borderRadius": 12,
"borderRadiusLG": 20
}Настройте цвета диаграмм:
{
"$charts": {
"conversions": "#f64A7E",
"clicks": "#4999F6",
"revenue-usd": "#000000",
"revenue-eur": "#F44747"
}
}Пользовательские значки меню:
{
"$icons": {
"main": "https://cdn.example.com/dashboard.svg",
"offers": "https://cdn.example.com/offers.svg",
"smartlinks": "https://cdn.example.com/smartlinks.svg",
"statistics": "https://cdn.example.com/statistics.svg",
"payments": "https://cdn.example.com/payments.svg",
"news": "https://cdn.example.com/news.svg",
"referrals": "https://cdn.example.com/referrals.svg",
"support": "https://cdn.example.com/support.svg",
"api": "https://cdn.example.com/api.svg"
}
}🔎 Каждая ссылка должна указывать на файл SVG. Замените cdn.example.com на свой собственный CDN или хостинг.
Цвет ссылок в нижней части боковой панели:
{
"$colorSidebarFooterLink": "#52A3FF"
}🔎 Это цвет ссылок на Политику конфиденциальности и Условия использования внизу боковой панели. Если фон боковой панели темный, установите светлый акцентный цвет, чтобы ссылки оставались читаемыми.
Скрыть Ref ID в отслеживающих ссылках:
{
"$offers": {
"hideRefId": true
}
}
Как объединить несколько фрагментов
Объект JSON — это список пар «ключ: значение» в фигурных скобках. Чтобы объединить два фрагмента, объедините их содержимое в один объект, разделяя записи запятыми. Если оба фрагмента содержат блок $component, объедините также содержимое этого блока.
{
"colorPrimary": "#774cdc",
"colorInfo": "#774cdc",
"colorLink": "#895bf5",
"$component": {
"Button": {
"colorPrimary": "#774cdc",
"primaryColor": "#ffffff",
"fontWeight": 600
}
}
}
Часто задаваемые вопросы
Я хочу, чтобы мои кнопки были другого цвета, отличного от основного цвета бренда. Это возможно?
Да. В блоке кнопок задайте свой цвет в Button.colorPrimary и Button.defaultBg / defaultColor — они переопределяют глобальный цвет бренда.
Какой цвет использовать для активного пункта меню: черный или белый?
Если фон активного пункта темный (синий, фиолетовый, темно-зеленый), используйте белый (#FFFFFF). Если он светлый (желтый, мятный, бежевый), используйте черный (#000).
Что произойдет, если я не укажу какую-то переменную?
Ничего страшного. Когда менеджер применит ваш JSON, любая переменная, которую вы не задали, будет брать значение из выбранной базовой темы или из значения по умолчанию Affise. Вы можете начать с одного или двух полей и добавлять другие по мере необходимости.
У меня есть как светлый, так и темный режимы. Мне нужны две конфигурации?
Да. Светлый и темный режимы — это две независимые конфигурации JSON, хранящиеся отдельно. Отправьте вашему менеджеру по одному JSON для каждого режима, который вы хотите поддерживать.
Я не разработчик. Где взять цвета моего бренда?
Откройте логотип вашей компании в любом графическом редакторе или воспользуйтесь онлайн-инструментом для выбора цвета (например, image-color-picker.com). Цвет — это шесть символов после знака #, например, #2D8546. Вставьте их в JSON.
Почему я не могу самостоятельно сохранить тему в панели администратора?
Сохранение пользовательских тем — это платная функция, которая обрабатывается на стороне Affise. Вы можете бесплатно создавать и просматривать темы в режиме предварительного просмотра с помощью тестовой среды (theme_editor=1), но для применения конфигурации к вашей действующей партнерской панели необходимо обратиться к вашему менеджеру по работе с клиентами.
По всем возникшим вопросам обращайтесь в службу поддержки Affise по электронной почте: [email protected].