Идет набор на XX поток Базового курса по GetCourse. Старт 26 июня. Подробности по ссылке.
Статья была полезной?
Темы. Как применить собственный CSS и JS код, а также подключить другой шрифт на страницах сайта
Темы — это инструмент, который позволяет в одном месте задать настройки для кастомного оформления страниц размещенных в папке. C помощью тем можно:
- стилизовать элементы страниц с помощью CSS;
- применить JavaScript код;
- подключить на страницах собственный шрифт.
Данный инструмент будет полезен прежде всего тем, кто имеет опыт работы с CSS и JavaScript, а также активно используют их при оформлении большого числа страниц. Все необходимые настройки и применение кода можно выполнить в одном месте — в теме.
В статье рассмотрим, как:
1) Создать тему
3) Применить собственные CSS стили с помощью темы
4) Применить JS-код через тему
Как создать тему
- Перейдите в раздел «Сайт» — «Страницы».
- В выпадающем меню «Дерево сайта» выберите «Темы».
- Нажмите на кнопку «Добавить тему» и задайте ее название.
Созданная тема отобразится в общем списке.
Как настроить тему
Настройка темы выполняется на одноименной вкладке — «Настройки», где имеется возможность:
1) Изменить название темы.
2) Включить/отключить дополнительные опции.
3) Задать родительскую тему, настройки которой будут применены в данной (дочерней) теме. Это позволит, например, избежать переноса кода из одной темы в другую вручную.
4) Перейти к Bundle файлам, в которых можно посмотреть весь применяемый в теме CSS/JS код, не заходя в дополнительные файлы и вкладки темы. Здесь же можно перейти к валидатору CSS кода (сервису проверки CSS от W3C).
5) Добавить дополнительные CSS/JS файлы.

Дополнительные опции на вкладке «Настройки»
1) «Для шаблонов» — используйте эту опцию, если в настройках страниц с темой включено «Является шаблоном».
2) «Использовать Bootstrap4» — для случаев, если на страницах есть специфичная верстка, требующая Bootstrap4, а не Bootstrap3, который используется по умолчанию.
Это позволяет, например, добавить больше гибкости для управления адаптивностью. Если вы используете стандартные блоки или стандартные коды CSS и HTML, которые не требуют подключения каких-либо плагинов и фреймворков, то включение данной опции не требуется.
3) «Можно группировать файлы в один» — техническая опция, при включении которой будет выполняться «склеивание» JS и CSS кода, добавленного в соответствующих вкладках и в дополнительных файлах темы.
Можно включить данную опцию, если в теме применяется много кода, разделенного на множество дополнительных файлов. Это позволит улучшить производительность в браузере,
чтобы страницы с темой или отдельные их элементы загружались быстрее.
Добавление дополнительных файлов
При необходимости в тему можно добавить дополнительные файлы. В настройках файлов можно указать CSS/JS код, который будет применяться совместно с кодом, добавленным на вкладках CSS и JS.
Это может быть полезно в случае, если необходимо структурировать код для удобной работы с ним.
Например, в одном CSS-файле можно добавить код для изменения стиля шрифта страницы, а в другом — стиля блоков.

Как применить собственные CSS стили
Применить собственные CSS стили с помощью темы можно на вкладке «CSS». На этой вкладке можно добавить СSS-код, который будет применяться на страницах с данной темой.
Добавление кода необходимо производить без использования тегов — <style>...</style>.

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

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

На странице Google Fonts:
1) выберите необходимый шрифт;
2) нажмите «+ Select this style» возле подходящего стиля;
3) скопируйте данные из поля «link»;
4) вставьте скопированные данные в поле «Включенные шрифты» в настройках темы.
Для подключения к теме нескольких шрифтов или стилей можно:
1) Сразу выбрать необходимые шрифты на странице Google Fonts, после чего они будут отображены в списке «Review».
2) Добавить новые данные для подключения к уже существующим в поле «Включенные шрифты» в настройках темы.
Как установить шрифты на страницах с темой
Установить подключенные шрифты можно:
Установка шрифтов для всех блоков страницы
Для установки подключенных шрифтов для заголовков и основного текста всех блоков страницы, необходимо перейти на вкладку «Шрифты», после чего указать их названия в полях:
1) Основной шрифт (основной текст);
2) Второй шрифт (заголовки).
Установка шрифтов для отдельных блоков с помощью CSS
Выбрать шрифт можно непосредственно в каждом из блоков. Для этого поля основного и второстепенного шрифта можно оставить незаполненными.

Добавленные в тему шрифты можно применить к блоку через его подробные настройки стиля, указав соответствующий CSS-код для селектора.
Изменение шрифтов на страницах сайта возможно и другими способами, которые описаны в инструкциях:
- «Как установить собственный шрифт на странице» — в ней описан процесс подключения собственных произвольных шрифтов, которые вы, например, нашли и скачали в интернете.
- «Как настроить шрифты на сайте и в блоге?» — в статье описаны возможности задания шрифтов из предоставленного списка как для всех страниц и записей блога сразу, так и для отдельных страниц, записей или блоков.
Как применить тему к папке
Для применения темы создайте отдельную папку и в ее настройках укажите созданную тему. Тема будет применена только к тем страницам, которые присутствуют в данной папке.
Обратите внимание: применить тему к системным страницам аккаунта возможности нет.
Переместить страницу в папку можно:
1) через дерево сайта;
2) при помощи указания папки в настройках страницы.
авторизуйтесь
Напишите, пожалуйста, в техподдержку https://getcourse.ru/contacts со ссылкой тренинг.
Если мой ответ вам не подходит, опишите, пожалуйста, вашу задачу более подробно нам в техническую поддержку https://getcourse.ru/contacts
Показать еще комментарии (3)
А ещё круче - в настройках тренинга указывать, какая тема должна применяться для оформления всех уроков этого тренинга. Сейчас, насколько я вижу, такой возможности нет? Только с папками страниц?
И возможность использовать CSS на страницах "Профиль" и "Сменить пароль" ещё не сделали?😊
Верно, тему можно применить к папке страниц сайта, созданного в аккаунте GetCourse.
В целях безопасности аккаунта и личных кабинетов пользователей на странице "Профиль" нет возможности добавить какой-либо код или применить тему, то есть изменить оформление этой страницы не получится.
Учитывая, что чисто технически ничто не мешает мне создать на любой странице любого раздела форму с запросом у пользователя любой информации.😊
На данный момент не предусмотрено использование какого-либо дополнительного кода на странице личного профиля. При этом, не учитывается какого вида будет этот код, например CSS или JS.
Тем более что CSS на безопасность никак не повлиял бы.😊