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

Last updated 1 month ago

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 добавлять не нужно, он есть у кнопки по умолчанию.

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

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

Классы в настройках стиля блока добавляйте без точки

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

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

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

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

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

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

Данные стили экспериментальные и при некоторых нестандартных настройках формы могут выглядеть некорректно. Например, когда вы выводите в форме информацию о содержимом покрывающего предложения.

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

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

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

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

Last updated 1 month ago