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

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__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;
}

 

 

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

 

 

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

 

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

 

 


.navigation-bar .navigation-bar-content .element.brand { content: url('')

}

 


Требования:
  • Формат: PNG;
  • Высота не более: 70px;
  • Ширина не более: 230px.
     

Картинку логотипа можно сохранить в статье Базы знаний системы, после чего использовать ссылку.


 

/*горизонтальный блок для страницы авторизации*/
.navbar .navbar-content, .navbar .navigation-bar-content, .navigation-bar .navbar-content, .navigation-bar .navigation-bar-content {
   background-color: #79b3e1;
   color: inherit;
   display: block;
}

 

/*фоновое изображение*/

.bg-sky {

background: url('https://eguzkia.helpdeskeddy.com/ru/file/kb_inline_image/d4d3c120ff6b8eee5a634990a63e44d1bc9ed5fa') no-repeat center center !important;

}  

 

или

 

/* фоновое изображение2 */
div.bg-sky {
background-image: url('https://eguzkia.helpdeskeddy.com/ru/file/kb_inline_image/d4d3c120ff6b8eee5a634990a63e44d1bc9ed5fa') !important;
}


 

По умолчанию размер фонового изображения составляет 1600x400px. Как и в примере изменения внешнего логотипа, изображение можно сохранить в Вашей статье Базы знаний и далее использовать ссылку на него.

 


 

/*Цвет формы авторизации*/

 

.login-form {
color: yellow;
background: black;
}

 

/* Цвет кнопки регистрации */
.login-buttons .registration-button{
   background: red;
   color: black!important;
}

 


/*Цвет кнопки войти*/
.login-form .login-button{
   background: yellow;
   color: black!important;
}

 

/*Цвет формы обратной связи*/
.login-ticket .papers {
background: pink;
border: 1px solid #ffffff;
box-shadow: inset 0 0 30px rgba(0,0,0,.1), 1px 1px 3px rgba(0,0,0,.2);
}
.login-ticket .papers:before {
background: pink;
border: 1px solid #ffffff;
box-shadow: inset 0 0 30px rgba(0,0,0,.1), 1px 1px 3px rgba(0,0,0,.2);
}

 

/*Цвет надпись мы всегда на связи*/
.login-ticket h1 {
    color: red;
}

 

/*Цвет кнопки Отправить*/
.login-ticket .papers button {
   background: grey;
   color: white !important;
}

 

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