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

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

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

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

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

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

Для этого:

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

Созданная тема отобразится в общем списке.

Настройка темы выполняется на одноименной вкладке — «Настройки», где имеется возможность:

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

«Для шаблонов» — используйте эту опцию, если в настройках страниц с темой включено «Является шаблоном».

«Отключить шрифты по умолчанию» — позволяет не подключать стандартные шрифты к странице. Используется при кастомной верстке для оптимизации страниц.

«Отключить стили по умолчанию для просмотра» — позволяет не подключать к странице стандартный файл стилей superlite-block.css. Используется при кастомной верстке для оптимизации страниц.

«Использовать Bootstrap4» — для случаев, если на страницах есть специфичная верстка, требующая Bootstrap4, а не Bootstrap3, который используется по умолчанию.

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

«Можно группировать файлы в один» — техническая опция, при включении которой будет выполняться «склеивание» JS и CSS кода, добавленного в соответствующих вкладках и в дополнительных файлах темы.

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

При необходимости в тему можно добавить дополнительные файлы. В настройках файлов можно указать CSS/JS код, который будет применяться совместно с кодом, добавленным на вкладках CSS и JS.

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

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

Применить собственные CSS стили с помощью темы можно на вкладке «CSS». Код будет распространяться на страницы с данной темой.

Добавление кода необходимо производить без использования тегов — <style>...</style>.

Добавить Javascript код, который будет применяться на страницах с темой, можно на вкладке «JS». Добавлять код следует без использования тегов — <script>...</script>

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

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

• Выбрать и подключить подходящий шрифт к теме
• Установить шрифт на страницах с темой

Для выбора подходящих для подключения шрифтов перейдите на страницу Google Fonts.

На странице Google Fonts:

1. Выберите необходимый шрифт.
2. Нажмите «+ Select this style» возле подходящего стиля.
3. Скопируйте данные из поля «link».
4. Вставьте скопированные данные в поле «Включенные шрифты» в настройках темы.

Для подключения к теме нескольких шрифтов или стилей можно:

1. Сразу выбрать необходимые шрифты на странице Google Fonts, после чего они будут отображены в списке «Review».
2. Добавить новые данные для подключения к уже существующим в поле «Включенные шрифты» в настройках темы.

Установить подключенные шрифты можно:

• Для всех блоков страницы
• Для отдельных блоков с помощью CSS

Установка шрифтов для всех блоков страницы

Для установки подключенных шрифтов для заголовков и основного текста всех блоков страницы, необходимо перейти на вкладку «Шрифты», после чего указать их названия в полях:

1. Основной шрифт (основной текст);
2. Второй шрифт (заголовки).

Установка шрифтов для отдельных блоков с помощью CSS

Выбрать шрифт можно в каждом из блоков. Для этого поля основного и второстепенного шрифта можно оставить незаполненными.

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

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

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

Для применения темы создайте отдельную папку и в ее настройках укажите созданную тему. Тема будет применена только к тем страницам, которые присутствуют в данной папке.

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

• через дерево сайта;
• при помощи указания папки в настройках страницы.

Выбрать тему оформления аккаунта может:

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

Чтобы применить тему к внутренним страницам аккаунта:

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

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

3. Сохраните изменения при помощи кнопки в нижней части страницы.

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

Обратите внимание: в целях безопасности сторонний код не применяется к некоторым системным страницам. Со списком страниц можно ознакомиться в статье ➡ «Общие настройки аккаунта».

Также темы из настроек аккаунта не применяются к:

• страницам сайта (тему можно применить отдельно для папки страниц);
• страницам блога;
• виджетам.

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

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

• владелец аккаунта;
• администратор;
• сотрудник, который назначен основным преподавателем в тренинге;
• сотрудник, который назначен дополнительным преподавателем в тренинге при отключенной опции «Запретить дополнительным учителям изменять Тренинг и Уроки».

Для этого:

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

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

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

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

Для одного тренинга могут применяться две темы:

• общая тема аккаунта;
• собственная тема или тема ближайшего родительского тренинга.

Важно! Если в темах прописаны разные параметры, они будут применяться одновременно.

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

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

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

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

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

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