Стили главного меню GetCourse

В этой заметке я расскажу, как изменить стили главного меню GetCourse, чтобы вы могли оформить его в соответствии со своим фирменным стилем.

В предыдущем посте я писал, как заменить стандартные иконки. Рекомендую тоже прочитать.

Итак, переходите в настройки: «Профиль — Настройки аккаунта — вкладка Настройки», дальше листайте до поля «Счетчики и прочие скрипты».

В это поле вставляются глобальные стили. Они будут действовать на все страницы в вашем аккаунте, в том числе и на системные. За исключение страницы вашего личного профиля, т. к. он является глобальным уже для всего Геткурса, поэтому кастомные стили к нему не применяются.

Все кастомные стили должны быть вписаны между тегами <style> ... </style>, иначе работать не будет.

Начнём с перекрашивания.

Изменяем цвета главного меню

Между <style> ... </style> вставьте следующий код:

.gc-account-leftbar,
.gc-page-nav-items-menu a,
.gc-account-leftbar .gc-account-user-menu,
.gc-account-leftbar.expanded .toggle-link {
    background: #222; /*Цвет фона всей полосы меню*/
}
.gc-account-leftbar .gc-account-user-menu li a,
.gc-account-leftbar .toggle-link {
    background: #333; /*Цвет фона кнопок меню*/
}
.gc-account-leftbar .gc-account-user-menu li {
   border-bottom: 1px solid #222; /*Цвет границы между кнопками*/
}
.gc-account-leftbar .gc-account-user-menu li a:hover {
    background: #444; /*Цвет фона кнопок при наведении*/
}
.gc-account-leftbar .gc-account-user-menu li.active a, .gc-account-leftbar .gc-account-user-menu li.selected a,
.gc-account-leftbar .gc-account-user-menu li.selected a, .gc-account-leftbar .gc-account-user-menu li.selected a {
    background: #f0f0f0; /*Цвет фона кнопок при нажатии и активных разделов*/
}

Также вы можете вместо сплошной заливки задать градиенты. Настройте нужный с помощью сервиса cssgradient.io. Затем скопируйте код и вставьте его вместо background: #222; для цвета фона всей полосы.

У вас получится примерно так:

.gc-account-leftbar,
.gc-page-nav-items-menu a,
.gc-account-leftbar .gc-account-user-menu,
.gc-account-leftbar.expanded .toggle-link {
    background: rgb(68,68,68);
    background: -moz-linear-gradient(0deg, rgba(68,68,68,1) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(68,68,68,1) 0%, rgba(0,0,0,1) 100%);
    background: linear-gradient(0deg, rgba(68,68,68,1) 0%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#444444",endColorstr="#000000",GradientType=1);
}

Я включил опцию максимальной совместимости (Max Compatibility), поэтому строк кода получилось больше, чем необходимо для современных устройств.

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

Следующее, что я сделал — сделал все пункты выпадающего меню строчными. Субъективно я не люблю, когда текст пишется прописными буквами там, где это совершенно не нужно.

Код для этой модификации:

.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    text-transform: none
}

И отключаем подчёркивание пунктов меню при наведении:

.gc-account-user-submenu a:hover {
    text-decoration: none
}

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

Перекрашиваем фон виджета обратной связи (который справа внизу):

.talks-widget-button {
    background: #ee7c4e
}

Цвет, соответственно, вы задаёте тот, который вам нужен. В данном случае это оранжевый.

Идём дальше.

Подключаем свои шрифты

По умолчанию в GetCourse используется семейство шрифтов Proxima Nova. Если ваш бренд использует его же, то ничего менять не нужно.

Если вы подключаете шрифт от Google Fonts, то всё довольно просто. Перейдите на сайт fonts.google.com, в настройках выберите кириллицу, чтобы выбранный шрифт точно её поддерживал. Выберите нужный шрифт, включите стили шрифта, которые хотите использовать и скопируйте код для вставки на сайт. Выглядеть он должен примерно так:

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;500&display=swap" rel="stylesheet">

Вставьте этот код в поле «Счетчики и прочие скрипты», сохраните.

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

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

Возьмите файл / файлы шрифта и загрузите их в конвертер (я обычно пользуюсь этим). Вам нужны форматы: .eot, .woff, .ttf. Можно добавить .woff2 и .svg, чтобы уж наверняка работало у всех, даже у тех, кто пользуется экзотическими браузерами. Но это обычно излишне.

Сконвертируйте, скачайте, распакуйте и загрузите в файловое хранилище GetCourse ваши шрифты.

Подготовительные работы закончились. Можно подключать.

Поключаем загруженные шрифты. У меня в примере это шрифт Circe Light и Circe Bold. Соответственно, я вставляю два @font-face.

Ссылки на файлы шрифтов вставляем абсолютные. С относительными не работает — проверял. Чтобы взять ссылку на шрифт, в файловом хранилище щёлкаем правой кнопкой мыши на иконку «Скачать» рядом с именем файла шрифта и выбираем «Скопировать ссылку». Вставляем в код. И очень важный момент. Вставив сылку на файл шрифта, замените в неё домен с https://fs01.getcourse.ru/ на ваш, иначе FireFox (иногда и Chrome) не подгрузят шрифт.

Если вы подключили шрифты от Google, код ниже вам не нужен, переходите к следующему шагу.

@font-face {
    font-family: 'Circe Light';
    src: url('https://fs01.getcourse.ru/fileservice/file/download/a/308290/sc/133/h/1e44e453514d71a7a9501d9eea630f0a.eot');
    src: url('https://fs01.getcourse.ru/fileservice/file/download/a/308290/sc/133/h/1e44e453514d71a7a9501d9eea630f0a.eot?#iefix') format('embedded-opentype'),
        url('https://fs01.getcourse.ru/fileservice/file/download/a/308290/sc/251/h/786be8b1fc91fc416844d55241aeedd5.woff') format('woff'),
        url('https://fs01.getcourse.ru/fileservice/file/download/a/308290/sc/487/h/0dd0a11139e01f26148722c4a91f4520.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Circe Bold';
    src: url('https://fs01.getcourse.ru/fileservice/file/download/a/308290/sc/193/h/bd4d1621ab16f0af2ef28936909e72b7.eot');
    src: url('https://fs01.getcourse.ru/fileservice/file/download/a/308290/sc/193/h/bd4d1621ab16f0af2ef28936909e72b7.eot?#iefix') format('embedded-opentype'),
        url('https://fs01.getcourse.ru/fileservice/file/download/a/308290/sc/152/h/fa78613c0088f473d4d76e0e91bd921b.woff') format('woff'),
        url('https://fs01.getcourse.ru/fileservice/file/download/a/308290/sc/207/h/a441d2ad428c32c8cdf82d7e3686f975.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Важно для каждого шрифта подключить все файлы: .eot, .woff, .ttf и другие, если вы сконвертировали и .svg, и .woff2. Кстати, при конвертации в архиве должен быть файл с нужным кодом для подключения шрифтов. Вам только ссылки на файлы шрифтов нужно будет заменить.

Следующий шаг — назначить шрифты для текста и заголовков. У меня код получился таким:

html body {
    font-family: 'Circe Light', Roboto, Arial, sans-serif; /*Первым идёт название подключаемого шрифта, затем альтернативные, если ваш шрифт всё-таки не подгрузится*/
    font-size: 16px; /*Заодно сделал шрифт текста чуть крупнее*/
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4,
strong, .strong {
    font-family: 'Circe Bold', Roboto, Arial, sans-serif; /*То же самое для заголовков и текста, выделенного жирным*/
}

Соответственно, у вас название шрифта будет отличаться. Если вы подключаете шрифт Google, он пишет, как именно должно выглядеть название. Если подключаете свой шрифт, то название должно совпадать с тем, которое вы задали в @font-face, в свойстве font-family.

Вот, собственно, и всё. Теперь GetCourse выглядит куда презентабельнее. Но это ещё далеко не конец работы по его кастомизации. В планах облагородить и остальные элементы, так что заглядывайте в наш блог 🙂