> 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="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FAqHx5bDk9wewTUL4LXAr%2Fimage.png?alt=media&amp;token=a8f30f90-f84f-4c2b-ab7f-f6e08e1e0c3c" alt=""><figcaption></figcaption></figure>

***

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FBcJMa1mjwQhLzkdMzCRV%2Fimage.png?alt=media&amp;token=44a35e7d-1e7d-4219-8c00-3b2f4e1b434e" alt=""><figcaption></figcaption></figure>

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

***

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2Fa9ARK1BmnIArntxhRBy3%2Fimage.png?alt=media&amp;token=a1ab9ed9-29bd-464a-8f56-976e26b7c673" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FyJpN74U37SeQmho7w6LM%2Ftelegram-cloud-photo-size-2-5467735058958901282-y.jpg?alt=media&amp;token=79109dd7-8f9b-483c-9728-2df37ac93c84" 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="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FaDXlidjhWCOHAiLa4jkB%2Ftelegram-cloud-photo-size-2-5415980763171643320-y.jpg?alt=media&amp;token=7151ad61-ffff-4130-b5a1-c8dab7db286b" alt=""><figcaption></figcaption></figure>

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

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

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

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

***

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2Ffmut3Alrr7Q4R1Cl1qPQ%2Fimage.png?alt=media&amp;token=854619ec-77fe-4947-9b55-0ff41ccef138" alt=""><figcaption></figcaption></figure>

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

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

***

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FaB8QBdGBQVmB5v3PBf1m%2Fimage.png?alt=media&amp;token=b75ab0ad-cfb0-4847-b907-ff7e2f5e953e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FfjJaHWP4YaPqAF2cOLyn%2Fimage.png?alt=media&amp;token=5a984b7b-631c-4c30-95e8-f6830270a17c" 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="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FyIt0abvTpZeDUGHXq2cr%2Fimage.png?alt=media&amp;token=734f71ab-a80a-42bf-a35a-5835ebd632b1" alt=""><figcaption></figcaption></figure>