Как перекрасить главное меню?
В настройках модуля перекрашивание главного меню не предусмотрено.
Если у вас достаточно квалификации, вы можете переопределить стили по одной из следующих инструкций:
Инструкция для решений с классом главного меню navbar-wp
Инструкция для решений с классом главного меню sf-nav-fixed
Что делать, если изменений не видно?
Решения с классом главного меню navbar-wp
Данная инструкция предназначена для модулей готовых решений:
SIMAI: Сайт школы (simai.school)
SIMAI: Сайт художественной школы (simai.school4art)
SIMAI: Сайт РЖД-медицина (simai.med4rzd)
SIMAI: Сайт музыкальной школы (simai.school4music)
SIMAI: Сайт конференции (simai.conf)
SIMAI: Сайт компании (simai.studio)
SIMAI: Сайт кандидата в депутаты (simai.candidate)
SIMAI: Сайт детского сада (simai.detsad)
SIMAI: Сайт колледжа (simai.college)
SIMAI: Портал открытых данных (simai.opendata)
SIMAI: Сайт санатория (simai.sanatorium)
SIMAI: Сайт сельского поселения (simai.spgov)
SIMAI: Сайт совета муниципальных образований (simai.sovet)
SIMAI: Сайт управления делами (simai.udgov)
Шаг 1. Перейти в Администрирование > Контент > Структура сайта > Файлы и папки.
Шаг 2. В поле "Путь" указать /bitrix/templates/(название модуля, например simai.school)/framework/color, нажать ОК.
Шаг 3. Открыть файл color.css в режиме PHP-кода.
Шаг 4. Прокрутить в самый низ файла и добавить строки, где:
background-color - цвет фона меню
color - цвет текста меню
после # нужно указать цвет из html таблицы цветов.
Цвет основного меню
.navbar-wp {
background: #18cc2e !important;
color: #ffffff
}
Цвет выпадающего списка меню
.navbar-wp .dropdown-menu>li>a {
background-color: #18cc2e;
color: #ffffff
}
Шаг 5. Сохранить файл.
Шаг 6. Из той же папки скачать файл color.less себе на компьютер.
Шаг 7. Открыть его в текстовом редакторе, например, в блокноте.
Шаг 8. В конце файла добавить код, где:
background-color - цвет фона меню
color - цвет текста меню
после # нужно указать цвет из html таблицы цветов.
Цвет основного меню
.navbar-wp {
background: #18cc2e !important;
color: #ffffff
}
Цвет выпадающего списка меню
.navbar-wp .dropdown-menu>li>a {
background-color: #18cc2e;
color: #ffffff
}
Шаг 9. Сохранить файл.
Шаг 10. Загрузить его на сайт в ту же папку. Предыдущий файл можно предварительно переименовать, чтобы не было конфликта имен.
Решения с классом главного меню sf-nav-fixed
Данная инструкция предназначена для модулей готовых решений:
SIMAI: Сайт учебного центра (simai.educenter)
SIMAI: Сайт благотворительного фонда (simai.fund)
SIMAI: Сайт спортивной школы (simai.sportschool)
Шаг 1. Перейти в Администрирование > Контент > Структура сайта > Файлы и папки.
Шаг 2. В поле "Путь" указать /bitrix/templates/(название модуля, например simai.educenter)/framework/include/02_assets/navbar/, нажать ОК.
Шаг 3. Скачать файл sf-navbar.min.css.
Шаг 4. Открыть на компьютере скачанный файл sf-navbar.min.css в текстовом редакторе, например, в блокноте.
Шаг 5. Добавить в самом конце файла добавить код, после пробела, где #000 необходимо заменить на свой цвет согласно таблицы цветов CSS,
.sf-nav-fixed {background: #000 !important;},
Шаг 6. Скопировать весь код из текстового редактора через комбинацию Ctrl+A (для выделения всего содержимого в файле) и Ctrl+C (для копирования содержимого).
Шаг 7. В административной части сайта открыть файл sf-navbar.min.css в режиме редактирования PHP-кода.
Шаг 8. В открывшемся файле, используя комбинацию клавиш Ctrl+A (для выделения всего содержимого в файле) и Ctrl+V (для вставки содержимого), вставить измененный код из текстового редактора.
Шаг 9. Нажать кнопку "Применить" (кнопку "Сохранить" не используем, чтобы, при необходимости, осталась возможность откатить изменения).
Шаг 10. Открыть публичную часть сайта в новой вкладке и проверьте внесённые изменения
Что делать, если изменений не видно?
Если ранее внесенные изменения не отображаются, необходимо на панели администрирования сбросить кеш:
Если на сайте возникли ошибки:
Шаг 1. Вернуться в открытую вкладку с ранее редактируемым файлом sf-navbar.min.css.
Шаг 2. Используя комбинацию Ctrl+Z, откатить изменения назад.
Шаг 3. Нажать на кнопку "Применить".