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

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FTMkvSqOGAy1GvvigW5PW%2Fimage.png?alt=media&#x26;token=5b116c79-c9b7-4cde-8ce8-dd5307f5fcb8" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FZrgKNo7gfeyQNwWurA8X%2Fimage.png?alt=media&#x26;token=cf43668d-4990-42e8-8f95-fb7cc5a2f2f6" alt=""><figcaption></figcaption></figure>

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

В базовой теме используется шрифт [Inter Tight](https://fonts.google.com/specimen/Inter+Tight?query=inter) из библиотеки Google Fonts. В переменной `--base-font` как раз указан он.

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FuAYuWv3eTxQShyo8Aux0%2Fimage.png?alt=media&#x26;token=dbce7976-8ca0-4900-b3a6-33431e534d1c" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2Fh9CvW3HTKgL9ioVj14NR%2Fimage.png?alt=media&#x26;token=646838f8-6f05-40d9-9099-fdc51f85ef6f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FuUIiCuIrv9dpbnLwv7aT%2Fimage.png?alt=media&#x26;token=78f30c74-8e19-4279-a06e-0ed4b173e6dc" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FPiN9FJcAMpcLSaveCF1J%2Fimage.png?alt=media&#x26;token=3d6b9d36-d6dc-44e2-9c47-d20c47b1a98f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Начиная с версии набора `1.1` в настройках появилась отдельная переменная для шрифта заголовков. Если вы не планируете использовать для заголовков отдельный шрифт, вставьте то же значение, что и для базового шрифта.
{% endhint %}

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FYu9PavFGyECo376nGKde%2Fimage.png?alt=media&#x26;token=d3c4b45f-8a8e-4d0b-aa6a-a1b70d76e750" alt=""><figcaption></figcaption></figure>

Вы можете добавлять их в любом порядке. Главное — верно указывайте тип файла: для стилей — 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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FunBDx9LEof3v7MSYbeiF%2Fimage.png?alt=media&#x26;token=e2f9b737-e24b-4c30-bce3-3028f8ddb23d" alt=""><figcaption><p>При создании файла не указывайте разрешение в названии (.css или .js). Выбирайте только тип файла</p></figcaption></figure>

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

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

* checkout-page.css и checkout-page--getcourse-pay.css
* login-page.css
* thank-you-page.css
* thank-you-page.html

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

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

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

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