Темы оформления в GetCourse: создание, настройка, применение

Как создать тему

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

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

Для этого:

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

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

4. Введите название темы, затем нажмите «Добавить».

Как настроить тему

На вкладке «Настройки» вы можете:

1. Изменить название темы.
2. Включить/отключить дополнительные опции:
   
   • «Для шаблонов» — включите эту опцию для корректного функционирования темы, если в настройках страниц вашей темы активирована опция «Является шаблоном».
   • Отключить стандартные шрифты Позволяет не подключать стандартные шрифты к странице. Применяется при кастомной верстке для оптимизации страниц.
   • Выключить стандартные стили для просмотра — позволяет не подключать к странице стандартный файл стилей superlite-block.css. Применяется при кастомной верстке для оптимизации страниц.
   • «Использовать Bootstrap4» — для случаев, когда на страницах применяется уникальная вёрстка, требующая Bootstrap4 вместо Bootstrap3, который используется по умолчанию. Это обеспечивает дополнительную гибкость в управлении адаптивностью. Если используются стандартные блоки или обычные коды CSS и HTML, не требующие подключения плагинов и фреймворков, включать эту опцию не нужно.
   • Файлы можно объединить в один Техническая опция, при включении которой осуществляется «склеивание» JS- и CSS-кода, добавленного на соответствующих вкладках и во дополнительных файлах темы. Опцию можно активировать, если в теме используется много кода, распределённого по множеству файлов. Это повышает производительность браузера, позволяя страницам темы или их частям загружаться быстрее.
   
   

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

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

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

Обратите внимание

• CSS-код следует вставлять без тегов <style>...</style>
• JS-код следует добавлять без тегов
• Лимит HTML-символов для каждой вкладки составляет 65535. Если ваш код превышает этот лимит, вынесите часть кода в отдельный файл и загрузите его через опцию. [Добавить файл].

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

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

Как применить тему

Покажем, как использовать созданную тему:

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

Как применить тему ко всему аккаунту

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

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

Для этого:

1. Откройте раздел «Профиль», затем выберите «Настройки аккаунта» и перейдите в «Настройки».

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

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

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

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

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

Как применить тему к страницам сайта

Чтобы применить тему к страницам сайта, их нужно добавить в папку.

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

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

Для этого:

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

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

Как применить тему к тренингу

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

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

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

Для этого:

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

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

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

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

Наследование параметров темы

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

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

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

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

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

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

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

Как изменить шрифт с помощью темы

С помощью темы можно применять шрифты из коллекции 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. Скопируйте код, расположенный на вкладке .

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

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

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

9. Сохраните настройки.

10. Примените тему к папке с вашими страницами. [перейти ↑].

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