Настройка тренинга геткурс: Разделение уроков по разделам

Переходим в тренинг .
Нажимаем кнопку "Действие" - "Настроить вид"
В поле выбора элемента выбираем блок Javascript, кликнув 2 раза

Кликаем на Javascript блок два раза и помещаем внутрь данный код:

$("<p class='lesson-theme'>Раздел 2. Капитальный

пуск</p>").insertBefore($(".lesson-id-218803225"))

где:

1. Раздел 2. Капитальный пуск – это название раздела
2. lesson-id-218803225 – ID урока "НАД" которым необходимо поместить название раздела (см. рис.)

После добавления кода, кликаем на кнопку сохранить.

После добавления кода при просмотре тренинга с уроками у вас уже появится название раздела, но для того чтобы все корректно отображалось необходимо добавить стили CSS.

Снова нажимаем кнопку "Действие" - "Настроить вид"

В поле выбора элемента выбираем блок HTML блок, кликнув по нему 2 раза

Помещаем код CSS в добавленный блок

Код CSS для блока HTML:

<style>

.lesson-theme {

    font-size: 160%;

    font-weight: bold;

    text-align: left;

    border-left: 5px solid #4d4d4d!important;

    padding-left: 20px;

    padding-right: 20px;

    margin-left: 20px;

}

</style>

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

1. Кликаем на блок два раза, чтобы открыть редактор
2. В редакторе нажимаем кнопку кода "< >" (см рис.)
3. В редактор кода помещаем скопированный код CSS, который представлен выше
4. После "не выходя" из редактора кода "< >", нажимаем на кнопку сохранить.

Если все сделали правильно, блок HTML схлопнется

и внутри не будет ни какого текста

Для того, чтобы разделить остальные уроки по разделам, просто дублируйте код JavaScript с заменой  названием раздела и ID урока, над которым вы хотите разместить надпись.

Стили CSS повторно прописывать не нужно, они автоматом подключатся ко всем последующим названиям раздела. 

Вот такой результат можно получить, следуя данной инструкции