Установка набора стилей

1. Установка переменных

Откройте файл variables.css в папке набора. Файл открывается любым текстовым редактором. В Windows это «Блокнот», в Mac OS — TextEdit.

Выделите и скопируйте всё содержимое файла.

На странице настроек вашей темы перейдите во вкладку CSS, вставьте скопированный код и сохраните изменения.

2. Подключение шрифта

В базовой теме используется шрифт Inter Tight из библиотеки Google Fonts. В переменной --base-font как раз указан он.

Откройте файл font.txt, скопируйте его содержимое. Переключитесь на вкладку «Шрифты» в настройках темы и вставьте скопированный код в поле «Включенные шрифты». Должно получиться как на скриншоте:

В поля «Основной шрифт» и «Второй шрифт» впишите Inter Tight, и сохраните изменения.

Если вы хотите использовать другой шрифт, выберите нужный в сервисе Google Fonts. Нажмите кнопку «Get font», затем «Get embed code». Скопируйте код из вкладки «Web» (она откроется по умолчанию):

Вставьте этот код на вкладке «Шрифт» в настройках темы. Не забудьте заменить названия шрифта в полях «Основной шрифт» и «Второй шрифт», а также замените название шрифта в переменной --base-font во вкладке CSS. Вам нужно поменять название первого шрифта, указанное в кавычках:

Правильное название шрифта возьмите с той же страницы сервиса Google Fonts, откуда вы копировали код для вкладки «Шрифты»:

Начиная с версии набора 1.1 в настройках появилась отдельная переменная для шрифта заголовков. Если вы не планируете использовать для заголовков отдельный шрифт, вставьте то же значение, что и для базового шрифта.

3. Добавление стилей набора в тему

На странице настройки темы в правой колонке будет список всех файлов темы. Нажмите «Добавить файл»:

Вы можете добавлять их в любом порядке. Главное — верно указывайте тип файла: для стилей — CSS, для скриптов — Javascript. Смотрите на файл в папке набора, чтобы не ошибиться. Стили в файлах с разрешением .css, скрипты — .js

Добавьте файлы:

• elements.css

• footer.css

• forms.css

• lesson.css

• main-menu.css

• training.css

• typography.css

• scripts.js

• footer.js

• jp-player.css

• t-banners.css

Должно получиться так (порядок файлов в таблице не имеет значения):

При создании файла не указывайте разрешение в названии (.css или .js). Выбирайте только тип файла

Затем открывайте на компьютере соответствующие файлы, копируйте из них код и вставляйте в соответствующие файлы темы.

Не добавляйте в тему файлы:

• checkout-page.css и checkout-page--getcourse-pay.css

• login-page.css

• thank-you-page.css

• thank-you-page.html

Это файлы стилей и разметки страниц входа, обратной связи, оплаты заказа и страницы «спасибо». О них мы поговорим далее.

Другие файлы стилей

Набор дополняется новыми стилями и файлами. В инструкции выше о них может не упоминаться, но в наборе они уже есть.

Например, файл стилей для вебинарной комнаты webinars.css. Установите его в вашу тему точно по такому же принципу, как описано выше.