Зміна зовнішнього вигляду системи (CSS стилі) #261

Часто виникає ситуація, коли Ви хотіли б змінити колір, вид, розмір та інші елементи у Вашій системі або ж просто кастомізувати її під кольори Вашої компанії.

У цій статті пропонуємо описання того, як змінити найпопулярніші елементи в системі.

Нагадаємо, що вносити правки можна в розділі "Глобальні налаштування", вкладка "Зовнішній вигляд" в полі 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 - шлях до зображення.

 

Детальніше про те, як визначити код необхідного елемента можна дізнатися в цьому відео:

 

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

2763