Изменение внешнего вида системы (CSS стили) после обновления дизайна от 19.05.2020 #324

Быстрая навигация:

  1. Изменение стилей основного меню (сбоку слева)
  2. Изменение стилей меню Управление
  3. Изменение стилей для панели заявок с фильтрами и панели с пользователями онлайн
  4. Изменение стилей подменю раздела Отчеты
  5. Изменение стилей для кнопки "Создать заявку"

 

Внесение изменений CSS стилей для системы осуществляется в разделе Управление - Глобальные настройки - Внешний вид в поле Stylesheet (CSS):

 

Наиболее изменяемые параметры:

- фон: background или background-color: #F0F0F0 !important;

- цвет текста и иконок: - color: #F0F0F0 !important;

- цвет рамки элемента: - border-color: red !important;

- жирность шрифта: font-weight: bold;

где #F0F0F0 - код нужного цвета, простые цвета также можно указывать как red, yellow, black и т.д.

где bold - жирный шрифт

 

Как и для чего применить изменения данных параметров:

1) Изменение стилей основного меню (сбоку слева):

/* стили для всего меню */
.menu .el-aside {
background: yellow !important;
}

/* стили отдельно для пункта меню */
.menu .item {
color: black !important;
}

/* активный пункт меню */
.menu .is-active {
background-color: green !important;
color: white !important;
}

/* пункт меню при наведении */
.menu .item:hover {
background-color: green !important;
color: white !important;
}

 

2) Изменение стилей меню Управление:

/* меню управление */
.metro .sidebar,
.metro .sidebar .sidebar-heading + ul li a,
.metro .sidebar .sidebar-heading + ol li a {
background: yellow !important;
color: black !important;
}

/* пункт меню при наведении */
.metro .sidebar .sidebar-heading:hover,
.metro .sidebar .sidebar-heading + ul li a:hover,
.metro .sidebar .sidebar-heading + ol li a:hover {
background: blue !important;
color: white !important;
}

/* активный пункт меню управление */
.metro nav.sidebar li.active a {
background: blue !important;
color: white !important;
}

 

3) Изменение стилей для панели заявок с фильтрами и панели с пользователями онлайн:

/* блок с фильтрами заявок, фон */
.ticket-sidebar .ticket-sidebar__filter-list {
background: yellow !important;
}

/* цвет текста в блоке фильтров */
.ticket-sidebar .ticket-sidebar__filter-text-overflow {
color: red !important;
}

/* цвет цифр в блоке фильтров */
.ticket-sidebar .ticket-sidebar__filter-count {
color: green !important;
}

/* стили меток */
.ticket-sidebar .ticket-sidebar-tags__container .el-tag--plain {
background-color: orange !important;
border-color: red !important;
color: black !important;
}

/* стили меток при наведении */
.ticket-sidebar .ticket-sidebar-tags__container .el-tag--plain:hover {
background-color: blue !important;
color: white !important;
}

/* блок c пользователями онлайн, фон */
.ticket-sidebar .ticket-sidebar__user-block{
background: olive !important;
}

/* цвет текста в блоке пользователи онлайн и кнопки Настройка фильтров */
.ticket-sidebar .ticket-sidebar-users-online,
.ticket-sidebar .ticket-sidebar__user-block .el-button--text {
color: white !important;
}

/* кнопка Настройка фильтров при наведении */
.ticket-sidebar .ticket-sidebar__user-block .el-button--text:hover {
font-weight: bold;
}

 

4) Изменение стилей подменю раздела Отчеты:

/* фон подменю раздела Отчеты */
.el-popover{
background-color: yellow !important;
}

/* цвет текста пунктов подменю раздела Отчеты */
.el-popover .el-col a{
color: red !important;
}

/* цвет фона пунктов подменю раздела Отчеты при наведении*/
.el-popover .el-col:hover{
background-color: orange !important;
}

/* цвет текста пунктов подменю раздела Отчеты при наведении*/
.el-popover .el-col a:hover{
color: green !important;
}

 

5) Изменение стилей для кнопки "Создать заявку":

/* Стили для кнопки Создать заявку*/
.ticket-tobpar-actions__common-actions .el-button--primary{
background: red !important;
border-color: green !important;
color: yellow !important;
}

/* Стили при наведении на кнопку Создать заявку*/
.ticket-tobpar-actions__common-actions .el-button--primary:hover{
background: yellow !important;
border-color: orange !important;
color: red !important;
}

219