Примеры использования CSS

Дизайн системы Р-Сервис можно менять посредством использования CSS. Ниже можно ознакомиться с несколькими примерами для администраторов пространств.

Ширина контейнера

Настройте ширину контейнера страниц системы Р-Сервис, предназначенных для клиента (например, страницы входа в систему), где отображаются текст, поля, ссылки и кнопки.

#modal_container { width:700px; }

Фон

Задайте цвет фона и/или добавьте фоновое изображение для страниц системы Р-Сервис, предназначенных для клиента. Фон будет отображаться за контейнером.

body { background:#5a71be url("https://www.r-service.tech//../images/gradient.png") repeat-x; }

Расположение логотипа

Переместите логотип организации, выбранный для пространства, в другое место на страницах системы Р-Сервис, предназначенных для клиента.

#account_logo { position:relative; top:200px; left:150px; }

Шрифт текста

Укажите размер и семейство шрифта для текста на страницах системы Р-Сервис, предназначенных для клиента.

body.modal { font-size:16px; font-family:"Helvetica Neue",Arial,Helvetica; }

Внешний вид кнопок

Кнопки на страницах системы Р-Сервис, предназначенных для клиента, уже имеют оформление. Но можно изменить внешний вид этих кнопок, сначала убрав их текущий вид, а затем применив свой собственный стиль.

/* reset */
.def_button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.def_button:hover {
    border-color: #999;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.def_button.def_save {
    color: #fff;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    background: #937db7;
    filter:progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#937db7',endColorstr='#856cae');
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#937db7),to(#856cae));
    background: -moz-linear-gradient(-90deg,#937db7,#856cae);
    border: 1px solid #72579d;
}
.def_button.def_save:hover {
    background: #856cae;
    filter:progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#856cae',endColorstr='#7d63a9');
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#856cae),to(#7d63a9));
    background: -moz-linear-gradient(-90deg,#856cae,#7d63a9);
    border: 1px solid #6a5294;
}

Изображение на странице приветствия

Разместите изображение на странице приветствия (страница отображается в правой части экрана после входа пользователя в систему Р-Сервис).

#welcome_logo {
  background: transparent url(https://r-service.tech/examples/full_logo_white_blue.png) 0 0 no-repeat;
  width: 200px;
  height: 37px;
}

Портал самообслуживания

Настройте внешний вид портала самообслуживания в системе Р-Сервис.

.topbar .topbar-inner {
  background: #00a0d1;
  height: 75px;
}
#itrp_page {
  margin-top: 75px;
}
body.ie7 #itrp_page {
  position: relative;
  top: 75px;
}
.topbar .brand {
  margin: 15px;
  padding: 0;
  background: transparent url(https://r-service.tech/examples/full_logo_white_blue.png) 0 0 no-repeat;
  width: 222px;
  height: 40px;
  text-indent: -9999px;
}
.nav a {
  color: #e8e8e8;
}
.nav .dropdown-menu {
  background: #00a0d1;
}
.nav .dropdown-menu li a {
  color: #e8e8e8;
}
.nav .dropdown-menu .divider {
  background-color: #00a0d1;
  border-color: #12b0e1;
}
#itrp_page .expandable .expandable_header {
  background-color: #fff;
}
#itrp_container .button.reopen {
  color: #900;
}