# Дополнительные классы

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

В текущей версии набора таких классов пять:

* `ol-color` — красит номера пунктов списка в основной акцентный цвет (primary color).
* `ol-round` — добавляет фон пунктам списка в виде скруглённых прямоугольников (primary color).
* `ol-circle` — добавляет круглый фон пунктам списка (primary color).
* `fill-width` — растягивает изображение на всю ширину контейнера.
* `expand` — растягивает кнопку на всю ширину колонки.

### Добавление класса к нумерованному списку

Чтобы применить стили к нумерованному списку, необходимо добавить один из этих классов (`ol-color`, `ol-round` или `ol-circle`) к блоку текста в настройках стилей.

Наведите курсор на блок с текстом. Нажмите на стрелку вниз рядом с иконкой корзины и в выпадающем меню выберите пункт «Стиль».

В открывшемся окне впишите нужный класс в строку «CSS-класс блока». Нажмите «Сохранить и закрыть».

В результате ко всем нумерованным спискам, содержащимся в этом текстовом блоке применятся стили списков.

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

***

### Растягивание изображения

По умолчанию ширина изображения в уроке равна ширине колонки текста. Если вам нужно сделать изображение шире, используйте класс `full-width`. Он растянет изображение на всю ширину контейнера урока.

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

Добавляется класс точно так же, как для списков, только к блоку изображения.

***

### Растягивание кнопок на ширину колонки

По умолчанию кнопки занимают ширину ровно такую, сколько текста на кнопке, плюс, небольшие поля. Чтобы растянуть кнопку на всю ширину колонки, по аналогии с добавлением других классов, добавьте к ней класс `expand`.

<figure><img src="/files/77F1FTEyug115KFByhR1" alt=""><figcaption></figcaption></figure>

При добавлении класса `expand` учитывайте, что по умолчанию в GetCourse блок кнопок имеет ширину в 8 колонок. Растяните ширину на 12 колонок, чтобы кнопка заняла пространство от края до края (выделено на скриншоте верхним прямоугольником).

***

### Классы кнопок социальных сетей

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

В набор добавлены следующие классы для кнопок:

* Telegram: `btn-telegram`
* Youtube: `btn-youtube`
* Вконтакте: `btn-vkontakte`
* WhatsApp: `btn-whatsapp`
* Viber: `btn-viber`
* Instagram: `btn-instagram`
* Одноклассники: `btn-odniklassniki`
* Поддержка: `btn-support`
* Библиотека: `btn-library`
* Подарок: `btn-gift`

Если вы добавляете кнопку в конструкторе на странице тренинга, обязательно добавьте к ней дополнительный класс `btn`.

Если стилизуете кнопку в визуальном конструкторе урока, дополнительный класс `btn` добавлять не нужно, он есть у кнопки по умолчанию.

***

### Информационные блоки

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

В наборе есть четыре класса для блоков выделения информации: `block-info`, `block-warning`, `block-alert`, `block-success`.

{% hint style="warning" %}
Классы в настройках стиля блока добавляйте **без точки**
{% endhint %}

Для использования стилей нужно только добавить соответствующий класс к текстовому блоку на странице урока. Принцип такой же, как описано выше для списков и изображений. После добавления класса стиль применится к блоку, дополнительно ничего настраивать не нужно.

Стили также работают на страницах тренингов.

***

### Блок тайминга к видео

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

Добавьте простой текстовый блок и добавьте ему класс `timing-block`. Добавьте текстом временную метку и описание тайм-кода. Добавьте ссылку время, и магия произойдёт.

**Важно** каждый таймкод писать с новой строки, отбивая Enter'ом.

***

### Класс для оформления форм на страницах

{% hint style="warning" %}
Данные стили экспериментальные и при некоторых нестандартных настройках формы могут выглядеть некорректно. Например, когда вы выводите в форме информацию о содержимом покрывающего предложения.
{% endhint %}

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

Для применения стилей добавьте форме класс `t-form`:

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

А также в саму форму добавьте скрипт в HTML-блок для оформления чекбоксов и радиокнопок:

```
<script>
for (var ptag of document.getElementsByTagName('input')) {
    var newhr = document.createElement('span');
    ptag.insertAdjacentElement('afterend', newhr);
}
</script>
```

Скрипт создаст дополнительный элемент \<span>\</span> после тегов \<label>, чтобы стили могли примениться.

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


---

# 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/dopolnitelnye-klassy.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.