Examples of CSS Usage

The design of the RR Tech Service Management system can be changed through the use of CSS. Below you can find several examples for administrators.

Container Width

Configure the width of the pages in the RR Tech Service Management system, intended for clients (e.g., login pages), where text, fields, links and buttons are displayed.

#modal_container { width:700px; }

Background

Set the background color and/or add a background image for pages in the RR Tech Service Management system intended for clients. The background will be displayed behind the container.

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

Logo Position

Move the organization logo, selected for a space, to another location on pages in the RR Tech Service Management system intended for clients.

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

Text Font

Specify the font size and family for text on pages in the RR Tech Service Management system intended for clients.

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

Button Appearance

Buttons on pages in the RR Tech Service Management system intended for clients already have a defined appearance. However, it’s possible to change the look of these buttons by first removing their current style and then applying your own.

/* 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;
}

Logo on Welcome Page

Place an image on the welcome page (the page appears in the right part of the screen after a user logs into the RR Tech Service Management system).

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

Self-Service Portal

Configure the appearance of the self-service portal in the RR Tech Service Management system.

.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_container .button.reopen {
  color: #900;
}