> For the complete documentation index, see [llms.txt](https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/ustanovka-nabora-stilei.md).

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

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

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

<figure><img src="/files/pZg36Ud0JD6kVnzbYXpj" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/DWlCghTTPPaSn3sm9nVy" 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="/files/WFerjPALSeZQ1yqnZgkD" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/gvpfJOktyvsZp49zJYq4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/lzDTWMzxkEfnyp5HZtgU" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/Zkgtg9XoEvmB3N4pfJE6" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/cesItCbaBYMkeqEClXlf" 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="/files/KiRnciwRa3xLeWtD1LyL" 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`. Установите его в вашу тему точно по такому же принципу, как описано выше.