Часто возникает ситуация, когда Вы хотели бы изменить цвет, вид, размер и прочие элементы в Вашей системе или же просто кастомизировать её под цвета Вашей компании.
В этой статье предлагаем описание того, как изменить самые часто спрашиваемые элементы в системе.
Напомним, что вносить правки можно в разделе "Глобальные настройки", вкладка "Внешний вид" в поле Stylesheet (CSS):
1) Изменение цвета футера и хедера (нижней и верхней полосы в системе):
.navigation-bar .navigation-bar-content {
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 - путь к изображению.
16) Изменение цвета футера в мобильном приложении:
div.login-form-wrapper {
background: #6B6666;
}
где #6B6666 - необходимый цвет.
Подробнее о том, как определить код необходимого элемента можно узнать в этом видео:
В целом, изменение более сложных элементов может повлечь за собой изменение других элементов, которые влияют на общее отображение системы. Если Вы не уверены в правильности кода изменения тех или иных атрибутов, или у Вас возникли какие-либо вопросы - наша команда поддержки с радостью окажет консультацию!