Настройка внешнего вида

HelpDeskEddy позволяет полностью кастомизировать внешний вид системы. Для персонализации портала перейдите из модуля "Управление" в раздел "Глобальные настройки" и далее откройте вкладку "Внешний вид".

 

В разделе доступны следующие настройки:

  • Внутренний логотип системы (требования: формат PNG, высота 64px, ширина 64px). Логотип для стартовой страницы можно установить в блоке Stylesheet (CSS) - подробнее.
  • Иконка избранного (fav icon) - иконка, которая отображается во вкладке браузера (требования: формат ICO, высота не более 64px, ширина не более 64px).
 

Если внесенные изменения не отображаются в системе, очистите кэш браузера и перезагрузите страницу (CTRL + F5 для Windows). Очистка кэша браузера на компьютере.

 

  • Текст нижнего колонтитула страницы - надпись, которая отображается внизу страницы;

Можно ввести не только текст, но и сделать ссылку. Для этого текст можно обернуть в html разметку, например:

 

где https://www.google.com/ - адрес страницы для перехода;

2023 © Company - текст;

 

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

 

Также внешний вид можно настраивать при помощи редактирования css-кода системы. Сделать это можно во вкладке "Расширенные настройки", а с наиболее интересными примерами можно ознакомиться чуть ниже. 

 

Как изменить наиболее востребованные элементы в системе.

 

 

Часто изменяемые параметры:

 

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

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

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

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

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

 

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

 

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

/* цвет текста в блоке фильтров */
.ticket-sidebar .ticket-sidebar__filter_child .ticket-sidebar__filter-name {
   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;
}

 

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

 

/* Стили для кнопки Создать заявку*/
.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;
}

 

Установка цвета фона активной вкладки заявки в системе:

 

/*фон цвета активной вкладки*/

.ticket-container .ticket-tabs__tab_active {
background-color: #f5fc25!important;
}

 #f5fc25 - код цвета;

 

Изменение цвета фона комментариев и ответов в заявке

 

Используемые параметры:

    background: blue !important; - фон;
    color: white !important; -  цвет текста.

 

/*фон собственного комментария*/
#ticket-app .ticket .ticket-conversation__message-text_comment-own{
    background: yellow !important;
     color: orange !important;
}


/*фон цвета комментариев других сотрудников*/
#ticket-app .ticket .ticket-conversation__message-text_comment{
    background: pink !important;
    color: red !important;
}


/*фон собственного ответа*/
#ticket-app .ticket .ticket-conversation__message-text_post-own{
    background: orange !important;
}
/*фон ответов клиентов*/
#ticket-app .ticket .ticket-conversation__message-text_user{
    background: black !important;
    color: white !important;
}
/*фон ответов сотрудников*/
#ticket-app .ticket .ticket-conversation__message-text_staff{
    background: blue !important;
    color: white !important;
}

 

Изменение цветов для Стартовой страницы системы

 

/*фон*/

#login-app .login {

background: linear-gradient(to right, #2c9b75 0%, #191b1b 100%);

}

/*логотип*/

#login-app .logo{ 

content: url('') 
}

/*Логин форма*/

#login-app .login-form{
   width: 650px;
   background: #000;
}

/*Кнопки*/
#login-app .login-form__button button {

background: red;border-color: #15f6f6;

} 
#login-app .login-form__button button:hover {

background: black;

} 
 

/*Кнопки SSO*/
#login-app .login-form__sso-button button{

background: red;

border-color: #15f6f6;

} 

/*Фон нижнего колонтитула системы*/
.footer {
background-color: green !important;
}

/*Цвет текста нижнего колонтитула системы*/
.footer__copyright {
color: #ffffff !important;
}

© 2024, HelpDeskEddy