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