Изменение внешнего вида системы (CSS стили) #261

Часто возникает ситуация, когда Вы хотели бы изменить цвет, вид, размер и прочие элементы в Вашей системе или же просто кастомизировать её под цвета Вашей компании.

В этой статье предлагаем описание того, как изменить самые часто спрашиваемые элементы в системе.

Напомним, что вносить правки можно в разделе "Глобальные настройки", вкладка " Внешний вид" в поле 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 - необходимый цвет.

 

Подробнее о том, как определить код необходимого элемента можно узнать в этом видео:

 

 

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

946