Кастомизация темы Moodle: дизайн под бренд

Как привести интерфейс Moodle к фирменному стилю компании: что можно настроить самому, что требует отдельной темы и как не потерять дизайн при обновлениях

Почему стандартный Moodle выглядит «чужим»

После установки Moodle выглядит одинаково у всех: стандартная тема Boost, нейтральные цвета, типовая главная страница. Для учебного центра или вуза это терпимо. В компании это обычно мешает: сотрудники привыкли к корпоративным сервисам в фирменном стиле, а учебный портал выглядит как сторонний сайт. Курсы проходят хуже, а у администраторов прибавляется вопросов «где найти курс» и «куда нажать».

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

Что можно изменить без разработки

В разделе «Администрирование → Внешний вид» администратор может:

• загрузить логотип и компактный логотип для шапки (подраздел «Логотипы»);
• в настройках темы Boost задать фирменный цвет, от которого меняются кнопки и ссылки;
• выбрать фоновое изображение для страницы входа;
• добавить собственный SCSS — небольшие правки стилей поверх темы.

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

Когда нужна своя тема

Своя тема нужна, если интерфейс должен работать иначе, а не только выглядеть иначе. Например:

• на главной странице каждая роль должна видеть своё: сотрудник — назначенные курсы и сроки, руководитель — прогресс команды;
• нужны карточки курсов с обложкой, прогрессом и дедлайном;
• меню нужно упростить под конкретные сценарии;
• в компании несколько подразделений или брендов, и у каждого должен быть свой вид портала;
• интерфейс должен соответствовать брендбуку полностью, а не только по цвету кнопок.

Технически это дочерняя тема на основе Boost: стили на SCSS, шаблоны Mustache и при необходимости JavaScript. Ядро Moodle при этом не меняется.

Два пути: быстрый и полный

Мы обычно предлагаем один из двух вариантов.

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

Полный. Новая тема с нуля: отрисовка ключевых страниц системы (обычно 13–15), проработка расположения каждого блока, кроссбраузерная вёрстка и дополнительные элементы — быстрые ссылки, рейтинг курсов, блоки для объявлений. Подходит для корпоративных университетов и порталов с большой аудиторией.

Подробнее о вариантах и примерах работ — на странице услуги «Шаблон Moodle».

Как проходит работа

1. Аудит. Смотрим, как выглядит и как используется портал сейчас, собираем брендбук и пожелания ключевых пользователей.
2. Макеты. Рисуем главную страницу и основные разделы, согласовываем их с вами до начала разработки.
3. Разработка. Делаем тему как отдельный плагин, чтобы её можно было обновлять независимо от ядра.
4. Проверка. Тестируем на разных устройствах, в разных браузерах и под разными ролями пользователей.
5. Запуск. Устанавливаем тему на рабочую систему. Если что-то пойдёт не так, можно переключиться на стандартную тему.

Сроки и стоимость зависят от объёма: быстрый вариант делается заметно быстрее полного. Точную оценку даём после аудита.

Не сломается ли дизайн при обновлении Moodle

Тема, сделанная как дочерняя тема Boost, переживает обычные обновления Moodle без проблем, потому что ядро системы не меняется. При переходе на новую основную версию (например, с 4.x на 5.x) тему нужно проверить и при необходимости адаптировать: разработчики Moodle периодически меняют шаблоны стандартных страниц. Мы закладываем такую проверку в план обновления.

А как же мобильное приложение?

Своя тема меняет внешний вид Moodle в браузере, в том числе на телефоне и планшете. Официальное мобильное приложение Moodle App тему сайта не использует. Его можно подстроить под фирменные цвета через отдельный CSS-файл (настройка CSS в разделе «Мобильное приложение → Внешний вид мобильного приложения»). Полностью брендированное приложение с собственной иконкой и названием в магазинах приложений — это отдельный проект; пример — наш кейс «Мобильное приложение Moodle под ключ».

Частые вопросы

Обсудить дизайн вашего Moodle

Мы более 15 лет внедряем и дорабатываем Moodle. Среди наших клиентов — ВТБ, Аэрофлот, АТОЛ, Teboil, «Азбука вкуса»; примеры проектов — в разделе кейсов. Если хотите привести портал к фирменному стилю, оставьте заявку: посмотрим вашу систему и предложим подходящий вариант.