Основы CSS для GetCourse: стилизация страниц и уроков

Когда стандартных возможностей для стилизации контента оказывается недостаточно, на помощь приходит CSS. Его можно размещать как на страницах, созданных вами, так и на системные.

На страницах, которые вы создаете самостоятельно, для изменения стиля блока нажмите кнопку «Стиль» — «Подробные настройки».

Введите код, изменяющий класс (вид) нужного элемента.

Как же узнать class элемента?

Кликаем правой кнопкой мыши по странице и в появившемся меню выбираем пункт «Посмотреть код» (в зависимости от версии браузера этот пункт может называться немного по-другому).

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

Разберем пару примеров?

Скругляем поля формы:

.f-input {
border-radius: 15px;
}

Меняем цвет кнопок и округляем углы:

.btn {
background-color: #483fec !important;
border-radius: 10px;
}

Изменяем цвет границы и её толщину:

.lt-tsr-block {
border: 5px solid darkgreen !important;
}

В уроки также можно внести стилевые изменения. Они выполняются по аналогии со страницами и действуют только для уроков с типом Визуальный конструктор.

В уроках, созданных на старом конструкторе (аудио, вебинар, текстовый урок), изменение CSS непосредственно не допускается.

С помощью CSS можно изменять внешний вид элементов на. Для этого достаточно перейти в режим «Настроить вид».

Если вы работаете с кастомной версткой и применяете свой код, обратите внимание: перед сохранением изменений на системной странице рекомендуется скопировать и сохранить ваш код отдельно.