Дополнительные классы
Last updated
Last updated
В наборе есть несколько дополнительных классов, добавив которые к блокам визуального конструктора уроков, можно изменить их внешний вид.
В текущей версии набора таких классов пять:
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-vk
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.
Для использования стилей нужно только добавить соответствующий класс к текстовому блоку на странице урока. Принцип такой же, как описано выше для списков и изображений. После добавления класса стиль применится к блоку, дополнительно ничего настраивать не нужно.
Стили также работают на страницах тренингов.
