Как изменить цвет фона пункта бокового меню и меню раздела при наведении курсора?
Например, необходимо изменить цвет фона пункта бокового меню при наведении курсора:
А также, необходимо изменить цвет фона пункта меню раздела при наведении курсора:
Для этого нужно прописать соответствующие стили.
Шаг 1. Перейти в Администрирование > Контент > Структура сайта > Файлы и папки.
Шаг 2. Найти папку /bitrix/templates/simai.framework.
Для сайтов медицинского учреждения Республики Башкортостан (согласно приказу №1216-А от 28.06.2024) папка находится по пути /bitrix/templates/simai.sf4med.
Шаг 3. Открыть в режиме редактирования PHP-кода файл template_styles.css.
Шаг 4. Прописать в конце файла код.
Где #код_цвета_фона заменить на код необходимого цвета фона. И сохранить изменения. Если после сохранения изменений не видно в публичной части сайта, нужно сбросить кеш.
Перед внесением изменений, обратите внимание, какая на данный момент выбрана цветовая схема первого уровня бокового меню и цветовая схема остальных уровней бокового меню в настройках оформления параметров компонента simai:sf.menu на вашем сайте
Вариант 1. Цветовая схема первого уровня бокового меню - светлая, цветовая схема остальных уровней меню - светлая
Код для пункта бокового меню
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-light > ul.nav-items > li.nav-item a:hover {
background-color: #код_цвета_фона;
}
Код для пункта меню раздела
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-light > ul.nav-items > li.nav-item div.catalog-submenu.theme-light ul.submenu li.nav-item a:hover {
background-color: #код_цвета_фона;
}
Например:
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-light > ul.nav-items > li.nav-item a:hover {
background-color: #dd9f47;
}
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-light > ul.nav-items > li.nav-item div.catalog-submenu.theme-light ul.submenu li.nav-item a:hover {
background-color: #dd9f47;
}
Вариант 2. Цветовая схема первого уровня бокового меню - светлая, цветовая схема остальных уровней меню - темная
Код для пункта бокового меню
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-light > ul.nav-items > li.nav-item a:hover {
background-color: #код_цвета_фона;
}
Код для пункта меню раздела
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-light > ul.nav-items > li.nav-item div.catalog-submenu.theme-dark ul.submenu li.nav-item a:hover {
background-color: #код_цвета_фона;
}
Например:
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-light > ul.nav-items > li.nav-item a:hover {
background-color: #dd9f47;
}
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-light > ul.nav-items > li.nav-item div.catalog-submenu.theme-dark ul.submenu li.nav-item a:hover {
background-color: #dd9f47;
}
Вариант 3. Цветовая схема первого уровня бокового меню - темная, цветовая схема остальных уровней меню - светлая
Код для пункта бокового меню
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-dark > ul.nav-items > li.nav-item a:hover {
background-color: #код_цвета_фона;
}
Код для пункта меню раздела
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-dark > ul.nav-items > li.nav-item div.catalog-submenu.theme-light ul.submenu li.nav-item a:hover {
background-color: #код_цвета_фона;
}
Например:
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-dark > ul.nav-items > li.nav-item a:hover {
background-color: #dd9f47;
}
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-dark > ul.nav-items > li.nav-item div.catalog-submenu.theme-light ul.submenu li.nav-item a:hover {
background-color: #dd9f47;
}
Вариант 4. Цветовая схема первого уровня бокового меню - темная, цветовая схема остальных уровней меню - темная
Код для пункта бокового меню
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-dark > ul.nav-items > li.nav-item a:hover {
background-color: #код_цвета_фона;
}
Код для пункта меню раздела
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-dark > ul.nav-items > li.nav-item div.catalog-submenu.theme-dark ul.submenu li.nav-item a:hover {
background-color: #код_цвета_фона;
}
Например:
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-dark > ul.nav-items > li.nav-item a:hover {
background-color: #dd9f47;
}
.sf-left-catalog.sf-nav-left-catolog-page-doc.theme-dark > ul.nav-items > li.nav-item div.catalog-submenu.theme-dark ul.submenu li.nav-item a:hover {
background-color: #dd9f47;
}
Например, результат для варианта 1:
Добавленный код в файл template_styles.css.
Результат (измененный цвет фона пункта бокового меню):
Результат (измененный цвет фона пункта меню раздела):
