Örnekler: CSS

RR Tech Service Yönetimi sisteminin tasarımı, CSS kullanımıyla değiştirilebilir. Aşağıdaki örnekler, yöneticiler için birkaç örnektir.

Şablon genişliği

RR Tech Service Yönetimi sistemindeki, istemci için tasarlanmış sayfaların şablon genişliğini ayarlayın (örneğin, sistem giriş sayfası), burada metinler, alanlar, bağlantılar ve düğmeler görüntülenir.

#modal_container { width:700px; }

Arka plan

RR Tech Service Yönetimi sistemindeki, istemci için tasarlanmış sayfaların arka plan rengini ve/veya arka plan görüntüsünü ayarlayın. Arka plan, şablonun üzerinde görüntülenir.

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

Logo yerleşimi

Yorum için seçilen uzamın logosunu, RR Tech Service Yönetimi sistemindeki, istemci için tasarlanmış sayfaların başka bir yere yerleştirin.

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

Metin yazı tipi

RR Tech Service Yönetimi sistemindeki, istemci için tasarlanmış sayfalar üzerindeki metinlerin boyutunu ve yazı tipini belirtin.

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

Düğme görünümü

RR Tech Service Yönetimi sistemindeki, istemci için tasarlanmış sayfalar üzerindeki düğmelerin görünümünü değiştirin. Mevcut görünümü kaldırmak ve ardından kendi stilinizi uygulamak suretiyle.

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

Giriş sayfası üzerindeki görüntü

RR Tech Service Yönetimi sistemindeki, kullanıcı giriş yaptıktan sonra sağ tarafında görünen giriş sayfasının üzerindeki görüntüyü yerleştirin.

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

Otomatik hizmet portalı

RR Tech Service Yönetimi sistemindeki, otomatik hizmet portalının görünümünü ayarlayın.