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

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

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

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

* `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>