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

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

 

 

 

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

  • Внутренний логотип системы;

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

 

Логотип для стартовой страницы можно установить в блоке Stylesheet (CSS) - подробнее.
 
  • Иконка избранного - иконка, которая отображается вверху системы;

 

 

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

 

 


 

Если внесенные изменения не отображаются в системе, очистите пожалуйста кэш и перезагрузите страницу. Для большинства браузеров подойдет комбинация клавиш Ctrl+F5. Также подробнее о том, как это сделать Вы можете ознакомиться в следующей статье - Очистка кэша браузера на компьютере.

 


 

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

Вы можете не только ввести текст, но сделать ссылку на которую пользователь сможет перейти при нажатии на надпись.

Для этого в блок необходимо ввести:

 

 

 

где https://www.google.com/ - адрес страницы на которую Вы хотели бы, чтобы пользователь осуществлял переход;

2020 © Company - текст;

 

 

  • Stylesheet (CSS) - все изменения вносятся используя CSS. Ниже в инструции представлены различные примеры использования языка для изменения оформления системы.

 


В случае если Вам требуется помощь в смене цветов или будет необходима какая-либо другая консультация - смело обращайтесь в нашу службу поддержки!


 

  • Stylesheet (CSS) API - стиль, который влияет на внешний вид портала для интеграции в другой сервис.

 

 

 


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

 

 

 

 

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

 

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

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

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

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

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

 bold - жирный шрифт

 

 

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

 

 

/* стили для всего меню */
 .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;  
}

 

Изменение цветов для меню модуля "Управление":

 

 

/* меню управление */
.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;
}

 

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

 

 

/* блок с фильтрами заявок, фон */
 .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;
}

 

Изменение цветов для всплывающего окна раздела "Отчеты":

 

 

/* фон подменю раздела Отчеты */
.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;
}

 

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

 

 

/* Стили для кнопки Создать заявку*/
.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('https://support.abom.ru/ru/file/inline_image/440a6a3631f7ec808c9c8ca179beac41d7254072')

}

 


 
Требования:
  • Формат: 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/inline_image/d4d3c120ff6b8eee5a634990a63e44d1bc9ed5fa') no-repeat center center !important;

}  

 

или

 

/* фоновое изображение2 */
div.bg-sky {
background-image: url('https://eguzkia.helpdeskeddy.com/ru/file/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;
}

 

Переход по ссылке после выставления оценки

 

После выставления оценки по умолчанию при выборе "Вернуться на главную" происходит переход на стартовую страницу Вашей системы. Для, того, чтобы переход происходил например на сайт компании или на какой-либо другой электронный адрес необходимо осуществить два шага:

 

1. Добавить в блок Stylesheet (CSS) правило:

 

/*редирект после голования*/

.satisfaction-form-success .satisfaction-msg a {

 display: inline-block;

}

 

2. В разделе "Язык" скачать языковой файл и заменить текст для строки global.button.back-to-main на следующий:

 

 

После чего импортировать файл обратно в систему.