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

### 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`. Установите его в вашу тему точно по такому же принципу, как описано выше.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/ustanovka-nabora-stilei.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.