EddyDesk allows you to completely customize the appearance. To do so, please follow to "Management" -> "Global Settings" section and open the "Appearance" tab.
The following settings are available in this section:
- Internal system logo. Requirements:
- Format: PNG;
- Height: 64px;
- Width: 64px.
The logo for the start page can be set in the Stylesheet (CSS).
- Favicon - icon that is displayed at the top of the system. Requirements:
- Format: ICO;
- Height no more than: 64px;
- Width max: 64px.
If the changes you made are not displayed in the system, please clear the cache and reload the page. For most browsers this is done by doing a force refresh by pressing both control + F5 buttons (for Windows) and Cmd + R (for Mac OS)
- Footer text - the text that appears at the bottom of the page;
You can not only enter the text, but make a link to which the user can go when he clicks on the text.
To do this you must enter into the block:
where https://www.yourlink.com- address of the page you would like the user to link to;
- Stylesheet (CSS) - all changes are made using CSS. Below in the instruction are different examples of how to use the language to change the appearance of the system.
If you need help with the changing of appearance or need any other advice, feel free to contact our support team!
- Stylesheet (CSS) API - a style that affects the appearance of the portal to integrate into another service.
How to change the most popular elements in the system.
- Main panel of the system (on the left side);
- Management module;
- Requests panel with views and the panel with online agents;
- Pop-up window of the "Reports" section;
- "Create request" button;
- Setting the background color of the active tab of the request;
- Background color of the internal notes and replies in the request;
- Start page:
- External logo for the home page;
- Clicking the link after the feedback.
The most popular parameters
- background: background or background-color: #F0F0F0 !important;
- text and icons color - color: #F0F0F0 !important;
- element border color - border-color: red !important;
- bold typeface - font-weight: bold;
where:
#F0F0F0 is a code of the necessary color, simple colors can also be specified as red, yellow, black, etc.
bold - bold font.
Change the colors of the main menu (on the left side):
/* styles for the whole menu */
.menu .el-aside {
background: yellow !
}
/* styles separately for the menu item */
.menu .item {
color: black !important;
}
/* active menu item */
.menu .is-active {
background-color: green !important;
color: white !important;
}
/* menu item on hover */
.menu .item:hover {
background-color: green !important;
color: white !important;
}
Change the colors for the "Management" module menu:
/* management menu*/
.metro .sidebar,
.metro .sidebar .sidebar-heading + ul li a,
.metro .sidebar .sidebar-heading + ol li a {
background: yellow !important;
color: black !important;
}
/* menu item on hovering */
.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;
}
/* active management menu item */
.metro nav.sidebar li.active a {
background: blue !important;
color: white !important;
}
Changing colors for the request panel and views :
/* section with request views, background */
.ticket-sidebar .ticket-sidebar__filter-list {
background: yellow !
}
/* text color in the views section*/
.ticket-sidebar .ticket-sidebar__filter-text-overflow {
color: red !important;
}
/* color of the numbers in the views section*/
.ticket-sidebar .ticket-sidebar__filter-count {
color: green !important;
}
/* tag styles */
.ticket-sidebar .ticket-sidebar-tags__container .el-tag--plain {
background-color: orange !important;
border-color: red !important;
color: black !important;
}
/* hover tag styles */.
.ticket-sidebar .ticket-sidebar-tags__container .el-tag--plain:hover {
background-color: blue !important;
color: white !important;
}
/* online users section, background */
.ticket-sidebar .ticket-sidebar__user-block{
background: olive !
}
/* color of the text in the section of online users and the view settings button */
.ticket-sidebar .ticket-sidebar-users-online,
.ticket-sidebar .ticket-sidebar__user-block .el-button--text {
color: white !
}
/* "Views settings" button on hovering */
.ticket-sidebar .ticket-sidebar__user-block .el-button--text:hover {
font-weight: bold;
}
Changing the colors for the popup of the "Reporting" section:
/* background of the Reporting submenu */
.el-popover{
background-color: yellow !
}
/* text color of the Reporting submenu items */
.el-popover .el-col a{
color: red !important;
}
/* background color of the Reporting submenu items on hover */
.el-popover .el-col:hover{
background-color: orange !important;
}
/* color of the Reporting submenu items text on hover. */
.el-popover .el-col a:hover{
color: green !important;
}
Change the colors of "Create request" button:
/* Styles for "Create requests" button */
.ticket-tobpar-actions__common-actions .el-button--primary{
background: red !important;
border-color: green !important;
color: yellow !important;
}
/* Styles for hovering over the "Create request" button */
.ticket-tobpar-actions__common-actions .el-button--primary:hover{
background: yellow !important;
border-color: orange !important;
color: red !important;
}
Setting the background color of the active tab:
/*the background color of the active tab*/
.ticket-container .ticket-tabs__tab_active {
background-color: #f5fc25!important;
}
#f5fc25 - color code;
Changing the background color of internal notes and replies in the request
Parameters used:
background: blue !important;
color: white !important;
/* own internal note background */
#ticket-app .ticket .ticket-conversation__message-text_comment-own{
background: yellow !important;
color: orange !important;
}
/*the background color of other agents' internal notes*
#ticket-app .ticket .ticket-conversation__message-text_comment{
background: pink !important;
color: red !important;
}
/*background of own replies*/
#ticket-app .ticket .ticket-conversation__message-text_post-own{
background: orange !important;
}
/*background of end user replies*/
#ticket-app .ticket .ticket-conversation__message-text_user{
background: black !important;
color: white !important;
}
/*background of agent replies*
#ticket-app .ticket .ticket-conversation__message-text_staff{
background: blue !important;
color: white !important;
}
Changing colors for the start page
/*the logo for the start page*/.
.navigation-bar .navigation-bar-content .element.brand { content: url('https://support.abom.ru/ru/file/kb_inline_image/440a6a3631f7ec808c9c8ca179beac41d7254072')
}
Requirements:
Format: PNG;
Height no more than: 70px;
Width no more than: 230px.
The logo picture can be saved in the System Knowledge Base article, then use the link.