Установка набора стилей
1. Установка переменных
Откройте файл variables.css в папке набора. Файл открывается любым текстовым редактором. В Windows это «Блокнот», в Mac OS — TextEdit.
Выделите и скопируйте всё содержимое файла.
На странице настроек вашей темы перейдите во вкладку CSS, вставьте скопированный код и сохраните изменения.
2. Подключение шрифта
В базовой теме используется шрифт Inter Tight из библиотеки Google Fonts. В переменной --base-font как раз указан он.
Откройте файл font.txt, скопируйте его содержимое. Переключитесь на вкладку «Шрифты» в настройках темы и вставьте скопированный код в поле «Включенные шрифты». Должно получиться как на скриншоте:
В поля «Основной шрифт» и «Второй шрифт» впишите Inter Tight, и сохраните изменения.
Если вы хотите использовать другой шрифт, выберите нужный в сервисе Google Fonts. Нажмите кнопку «Get font», затем «Get embed code». Скопируйте код из вкладки «Web» (она откроется по умолчанию):
Вставьте этот код на вкладке «Шрифт» в настройках темы. Не забудьте заменить названия шрифта в полях «Основной шрифт» и «Второй шрифт», а также замените название шрифта в переменной --base-font во вкладке CSS. Вам нужно поменять название первого шрифта, указанное в кавычках:
Правильное название шрифта возьмите с той же страницы сервиса Google Fonts, откуда вы копировали код для вкладки «Шрифты»:
3. Добавление стилей набора в тему
На странице настройки темы в правой колонке будет список всех файлов темы. Нажмите «Добавить файл»:
Вы можете добавлять их в любом порядке. Главное — верно указывайте тип файла: для стилей — CSS, для скриптов — Javascript. Смотрите на файл в папке набора, чтобы не ошибиться. Стили в файлах с разрешением .css, скрипты — .js
Добавьте файлы:
elements.css
footer.css
forms.css
lesson.css
main-menu.css
training.css
typography.css
scripts.js
footer.js
Должно получиться так (порядок файлов в таблице не имеет значения):
Затем открывайте на компьютере соответствующие файлы, копируйте из них код и вставляйте в соответствующие файлы темы.
Не добавляйте в тему файлы:
checkout-page.css и checkout-page--getcourse-pay.css
login-page.css
thank-you-page.css
thank-you-page.html
Это файлы стилей и разметки страниц входа, обратной связи, оплаты заказа и страницы «спасибо». О них мы поговорим далее.
Другие файлы стилей
Набор дополняется новыми стилями и файлами. В инструкции выше о них может не упоминаться, но в наборе они уже есть.
Например, файл стилей для вебинарной комнаты webinars.css. Установите его в вашу тему точно по такому же принципу, как описано выше.
Last updated
