Темы: как изменить оформление тренингов или страниц аккаунта

Темы — это инструмент, который позволяет в одном месте задать настройки для кастомного оформления страниц. Темы позволяют:

• стилизовать элементы страниц с помощью CSS;
• применить JavaScript код;
• использовать шрифты из коллекции Google Fonts.

Данный инструмент будет полезен прежде всего тем, кто имеет опыт работы с CSS и JavaScript, а также активно использует их при оформлении большого числа страниц. Все необходимые настройки и применение кода можно выполнить в одном месте — в теме.

Используйте созданную тему, чтобы оформить:

• страницы CMS, размещенные в папке;
• отдельные тренинги и подтренинги;
• внутренние страницы аккаунта.

Создать тему могут:

• владелец аккаунта,
• администратор,
• сотрудник с выданным правом «Может управлять CMS».

Для этого:

1. Перейдите в раздел «Сайт» — «Страницы».
2. Выберите «Темы» в выпадающем меню «Дерево сайта».

3. Нажмите «Добавить тему».

4. Укажите название темы и нажмите «Добавить».

3. Задать родительскую тему, настройки которой будут применены в данной (дочерней) теме. Это позволит, например, избежать переноса кода из одной темы в другую вручную.
4. Перейти к Bundle файлам, в которых можно посмотреть весь применяемый в теме CSS/JS-код, не заходя в дополнительные файлы и вкладки темы. Здесь же можно перейти к валидатору CSS-кода (сервису проверки CSS от W3C).
5. Добавить дополнительные CSS/JS-файлы. В настройках файлов можно указать CSS/JS-код, который будет применяться совместно с кодом, добавленным на вкладках CSS и JS.

   
   

   Это может быть полезно в случае, если необходимо структурировать код для удобной работы с ним. Например, в одном CSS-файле можно добавить код для изменения стиля шрифта страницы, а в другом — стиля блоков.

На вкладках «CSS» и «JS» вы можете добавить собственный код. Он будет распространяться на все страницы с данной темой.

На вкладке «Шрифты» вы можете добавить шрифты из коллекции Google Fonts. Они применятся только к страницам сайта, для которых указана тема.

Как изменить шрифт с помощью темы, рассмотрим в разделе ниже [перейти ↓].

Рассмотрим, как применить созданную тему:

• ко всему аккаунту,
• к страницам сайта,
• к тренингу.

Применить тему оформления ко всему аккаунту может:

• владелец аккаунта,
• ответственный администратор.

Для этого:

1. Перейдите в раздел «Профиль» — «Настройки аккаунта» — «Настройки».

2. Выберите созданную тему в настройках параметра «Тема оформления аккаунта».

3. Сохраните изменения в конце страницы.

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

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

Применить тему к папке страниц могут:

• владелец аккаунта,
• администратор,
• сотрудник с выданным правом «Может управлять CMS».

Для этого:

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

3. Укажите созданную тему и сохраните изменения.

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

Применить тему к тренингу могут:

• владелец аккаунта;
• администратор;
• сотрудник, который назначен основным или дополнительным преподавателем в тренинге.

Для этого:

1. Откройте тренинг и перейдите на вкладку «Настройки».

2. Выберите тему в настройках параметра «Тема оформления тренинга».
3. Сохраните изменения.

После сохранения изменений тема применится к следующим страницам:

• вкладка «Содержание» тренинга и подтренингов;
• страницы уроков в режиме просмотра и редактирования.

Для примера создадим 2 темы и применим их для разных объектов:

1. Тема для изменения шрифтов в настройках аккаунта.
2. Тема для изменения цвета фона в настройках тренинга.

В результате на странице тренинга изменятся шрифты и фон страницы станет зеленым.

Если вы не хотите, чтобы тема оформления аккаунта применялась к тренингу, включите опцию «Не наследовать тему оформления аккаунта» в настройках тренинга.

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

С помощью темы вы можете использовать шрифты из коллекции Google Fonts. Настройка будет зависеть от того, к каким страницам вы хотите применить выбранный шрифт:

• ко всем страницам аккаунта/к тренингу;
• к страницам сайта.

1. Перейдите в Google Fonts и выберите подходящий шрифт.
2. Нажмите «Get font».

3. Нажмите «Get embed code».

4. Переключитесь на вариант @import.
5. Скопируйте код.

6. Откройте тему на GetCourse и перейдите на вкладку «CSS».
7. Вставьте скопированный код без тегов <style>...</style>.

8. Добавьте элементы, к которым нужно применить шрифт. Если его нужно применить к любым элементам, используйте код ниже:

body, h1, h2, h3, h4, .logo-text, .filter-block h4, html body, .form-control {
    font-family: 'Bitter', sans-serif;
}

9. Напротив font-family укажите название своего шрифта из кода, скопированного в Google fonts.
10. Сохраните настройки.

Примените тему в настройках аккаунта или в настройках тренинга. Об этом рассказывали в разделе выше [перейти ↑].

Готово! Теперь страницы аккаунта/тренинга будут отображаться с новым шрифтом.

1. Перейдите в Google Fonts и выберите подходящий шрифт.
2. Нажмите «Get font».

   
   

   Если вы хотите использовать разные шрифты для заголовков и основного текста, то найдите второй шрифт и также добавьте его в корзину, нажав на «Get font».

3. Нажмите «Get embed code».

4. Скопируйте код на вкладке <link>.

5. Откройте тему на GetCourse и перейдите на вкладку «Шрифты».
6. Вставьте скопированный код.

7. В поле «Основной шрифт» укажите название шрифта из Google fonts, который нужно применить к основному тексту.
8. В поле «Второй шрифт» укажите название шрифта из Google fonts, который нужно применить к заголовкам.

   
   

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

10. Примените тему к папке с вашими страницами. Об этом рассказывали в разделе выше [перейти ↑].

Готово! Теперь на страницах из папки будут использоваться шрифты, выбранные в Google fonts.

О других способах изменения шрифтов читайте в статьях:

• Как применить собственный шрифт в аккаунте GetCourse — в ней описан процесс подключения собственных произвольных шрифтов, которые вы, например, нашли и скачали в интернете.
• Как использовать системные шрифты на сайте и в блоге — в статье вы узнаете, как системные шрифты можно применять к страницам, записям блога или к отдельным блокам.