Часто виникає ситуація, коли Ви хотіли б змінити колір, вид, розмір та інші елементи у Вашій системі або ж просто кастомізувати її під кольори Вашої компанії.
У цій статті пропонуємо описання того, як змінити найпопулярніші елементи в системі.
Нагадаємо, що вносити правки можна в розділі "Глобальні налаштування", вкладка "Зовнішній вигляд" в полі Stylesheet (CSS):
1) Зміна кольору футера і хедера (нижньої і верхньої смуги в системі):
.metro .navigation-bar {
background-color: # 9370DB! important;
}
.main-footer {
background-color: # 9370DB! important;
}де # 9370db - необхідний колір.
2) Бувають випадки, коли в заявці листування сильно затягнулося і величезні обсяги повідомлень не дають зручно переглядати повідомлення. В цьому випадку пропонуємо код, який обмежує розміри повідомлення в заявці по висоті - у такого повідомлення з'явиться смуга прокрутки. Виглядає це наступним чином:
.post .post-wrapper .post-content {
max-height: 400px! important;
}де 400 px - розмір блоку повідомлення.
3) Зміна кольору коментарів і відповідей в заявках.
Код, який змінює колір коментарів:
.post-comment.post-comment-from_partner .post-wrapper {
background-color: # FFCC33! important;
}
.post-comment.post-comment-from_partner .post-wrapper :: before {
border-color: # FFCC33! important;
}
.post-comment-staff .post-wrapper {
background-color: # FFCC33! important;
}
.post-comment-staff .post-wrapper :: before {
border-color: # FFCC33! important;
}
.post-comment.my-comment .post-wrapper {
background-color: # FFCC33! important;
}
.post-comment.my-comment .post-wrapper :: before {
border-color: # FFCC33! important;
}.post-comment .post-wrapper .post-content, .post-comment .post-wrapper .post-content b, .post-comment .post-wrapper .post-content div, .post-comment .post-wrapper. post-content i, .post-comment .post-wrapper .post-content li, .post-comment .post-wrapper .post-content ol, .post-comment .post-wrapper .post-content p, .post- comment .post-wrapper .post-content span, .post-comment .post-wrapper .post-content table, .post-comment .post-wrapper .post-content td, .post-comment .post-wrapper .post- content ul {
color: # 000000! important;
}
де # FFCC33 - колір коментаря. Виглядати ж коментарі будуть наступним чином:
Код, який змінює колір відповідей:
.post .post-wrapper .post-content div {
color: black! important;
}.post-staff .post-wrapper .post-content p {
color: black! important;
}
.post-staff .post-wrapper {
background-color: # 87CEEB! important;
}
.post-staff .post-wrapper :: before {
border-color: # 87CEEB! important;
}
.post-staff.my-post .post-wrapper {
background-color: # 87CEEB! important;
}
.post-staff .post-wrapper .post-content p {
color: black! important;
}
.posts .post-wrapper {
background-color: # 87CEEB! important;
}
.posts .post-wrapper :: before {
border-color: # 87CEEB! important;
}
.posts .post-wrapper {
background-color: # 87CEEB! important;
}
.posts .post-wrapper :: before {
border-color: # 87CEEB! important;
}
.post .post-wrapper .post-content div {
color: black! important;
}
.post .post-wrapper .post-content span {
color: black! important;
}.post .post-wrapper .post-content b {
color: black! important;
}
Відповіді разом з коментарями після додавання коду будуть мати такий вигляд:
4) Ситуація, коли розмір теми повідомлення занадто великий і не вміщується в Тему в колонці заявок:
Розширюємо розмір теми до 500 пікселів:
.metro table.ticket-list .ticket-list-title {
max-width: 500px! important;
}
Розмір теми після розширення:
Або ж можна розширити вміст тексту по даному полю:
.metro .ticket-list-title-href {
max-width: 100%
5) Збільшення розмірів шрифту в полях заявки.
Код, що змінює розмір назви полів:
.ticket-detail-info table tr td: nth-child (-n + 4) {
font-size: 20px;
font-weight: bold;
}
Код, що змінює розмір вмісту цих полів:
div.ticket-detail-info select {
font-size: 17px;
font: 400 17px;
}
6) Код, що прибирає лічильник кількості повідомлень в тікеті в списку заявок:
#tickets .ticket-list-title a.pull-right {
visibility: hidden;
}
7) Код, що приховує департаменти в списку заявок:
.metro nav.sidebar li.title {
visibility: hidden;
}
li.depart-filter-toggle {
visibility: hidden;
}
div.depart-filter-divir {
visibility: hidden;
}
Після:
8) Приховування інформації про співробітників в мережі:
.metro nav.sidebar.user-online {
visibility: hidden;
}
Після додавання коду даний блок перестане відображатися:
9) Зміна кольору форми реєстрації / входу:
fieldset.login-fields {
background-color: red;
}
.login-form legend {
background-color: red! important;
}де red - потрібний колір.
10) Зміна кольору форми зворотного зв'язку:
.login-ticket .papers {
background: # 9cf;
background: -moz-linear-gradient (top, # f1da360, # f1da36 100%);background: -webkit-gradient (linear, left top, left bottom, color-stop (0, # f1da36), color-stop (100%, # f1da36));
background: -webkit-linear-gradient (top, # 9cf 0, # f1da36 100%);
background: -o-linear-gradient (top, # f1da360, # f1da36 100%);
background: -ms-linear-gradient (top, # f1da360, # f1da36 100%);
background: linear-gradient (to bottom, # f1da360, # f1da36 100%);
border: 1px solid # f1da36;
box-shadow: inset 0 0 30px rgba (0,0,0, .1), 1px 1px 3px rgba (0,0,0, .2);
}.login-ticket .papers: before {
background: # 9cf;
background: -moz-linear-gradient (top, # f1da360, # f1da36 100%);background: -webkit-gradient (linear, left top, left bottom, color-stop (0, # f1da36), color-stop (100%, # f1da36));
background: -webkit-linear-gradient (top, # 9cf 0, # f1da36100%);
background: -o-linear-gradient (top, # f1da360, # f1da36 100%);
background: -ms-linear-gradient (top, # f1da360, # f1da36 100%);
background: linear-gradient (to bottom, # f1da360, # f1da36 100%);
border: 1px solid # f1da36;
box-shadow: inset 0 0 30px rgba (0,0,0, .1), 1px 1px 3px rgba (0,0,0, .2);
}
11) Зміна кольору активного елементу (і кольору під час наведення на елемент) в Головному Меню:
.navigation-bar .navigation-bar-content .element.active {
background-color: red! important;
}
.navigation-bar .navigation-bar-content .element: hover {
background-color: red! important;
де .element.active - колір активного (обраного) модуля,
.element: hover - колір модуля при наведенні курсору.
12) Зміна підпису в футері:
a.fg-color-white {
visibility: hidden;
}
span.element {
visibility: hidden;
}
a.fg-color-white :: after {
content: "My COMPANY";
visibility: visible;
}
де My COMPANY - потрібний текст.
13) Сховати кнопку "Створити заявку":
.metro nav.sidebar .ticket-create-button a {
display: none;
}
14) Збільшення кнопки "Створити заявку":
.metro nav.sidebar .ticket-create-button a {
width: 230px;
height: 50px;
margin-top: 5px;
margin-bottom: 5px;
padding: 14px 0;
font-size: 23px;
}
.metro nav.sidebar .ticket-sidebar-toggle {
height: 50px;}
15) Зміна Картинки (фону) при вході в систему:
div.bg-sky {
background-image: url (https://i.ytimg.com/vi/bEPAbS-SRlg/maxresdefault.jpg)! important;
}
де https://i.ytimg.com/vi/bEPAbS-SRlg/maxresdefault.jpg - шлях до зображення.
Детальніше про те, як визначити код необхідного елемента можна дізнатися в цьому відео:
В цілому, зміна більш складних елементів може спричинити за собою зміну інших елементів, які впливають на загальне відображення системи. Якщо Ви не впевнені в правильності коду зміни тих чи інших атрибутів, або у Вас виникли будь-які питання - наша команда підтримки з радістю надасть консультацію!