Keşfet

MyBB Css İle Rank Yapımı

BeStami

BeStami

Yeni Üye
Katılım
14 Mar 2021
Mesajlar
3,958
Tepkime puanı
0
Puanları
0
Yaş
29
Merhaba Herkese Css ile rank nasıl yapılır onu göstereceğim

Admin kp > Temalar şablonlar > kullandığınız tema > Yeni Css Oluştur Diyip

ForumTeams-Rank.css ismini verip içerisine aşağıdaki verdiğim kodları ekleyin.

Kod:
Kod: 
body{
    background: #1b1f27;
    font-family: 'Open Sans', sans-serif;
}

h1{
  color:#fff;
  text-align: center;
  padding: 20px;
}

.admin {
    background: linear-gradient(to right, rgba(176,53,56,1) 0%,rgba(220,89,89,1) 50%,rgba(176,53,56,1) 100%);
    margin-top: 10px !important;
      width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #b03839;
      opacity: 0.5;
      transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.admin:hover {
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #b03839;
      opacity: 1;
      transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}


.vip {
    background: linear-gradient(to right, rgba(211,183,31,1) 0%,rgba(217,196,85,1) 50%,rgba(211,183,31,1) 100%);
    margin-top: 10px !important;
      width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #aa9317;
      opacity: 0.5;
      transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.vip:hover {
      background: linear-gradient(to right, rgba(211,183,31,1) 0%,rgba(217,196,85,1) 50%,rgba(211,183,31,1) 100%);
    margin-top: 10px !important;
      width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #aa9317;
      opacity: 1;
      transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.smod {
    background: linear-gradient(to right, rgba(129,0,203,1) 0%,rgba(159,58,216,1) 50%,rgba(129,0,203,1) 100%);
    margin-top: 10px !important;
      width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #7005ad;
      opacity: 0.5;
      transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.smod:hover {
       background: linear-gradient(to right, rgba(129,0,203,1) 0%,rgba(159,58,216,1) 50%,rgba(129,0,203,1) 100%);
    margin-top: 10px !important;
      width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #7005ad;
      opacity: 1;
      transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.uye {
    background: linear-gradient(to right, rgba(114,121,138,1) 0%,rgba(144,154,177,1) 50%,rgba(114,121,138,1) 100%);
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #646d83;
    opacity: 0.5;
    transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.uye:hover {
    background: linear-gradient(to right, rgba(114,121,138,1) 0%,rgba(144,154,177,1) 50%,rgba(114,121,138,1) 100%);
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #646d83;
    opacity: 1;
    transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.mod {
    background: linear-gradient(to right, rgba(0,131,222,1) 0%,rgba(69,162,227,1) 50%,rgba(0,131,222,1) 100%);
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #0d74bb;
    opacity: 0.5;
    transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.mod:hover {
    background: linear-gradient(to right, rgba(0,131,222,1) 0%,rgba(69,162,227,1) 50%,rgba(0,131,222,1) 100%);
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #0d74bb;
    opacity: 1;
    transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.grafiker {
    background: linear-gradient(to right, rgba(225,72,141,1) 0%,rgba(243,115,173,1) 50%,rgba(225,72,141,1) 100%);
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #cb407f;
    opacity: 0.5;
    transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.grafiker:hover {
    background: linear-gradient(to right, rgba(225,72,141,1) 0%,rgba(243,115,173,1) 50%,rgba(225,72,141,1) 100%);
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #cb407f;
    opacity: 1;
    transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.dmod {
    background: linear-gradient(to right, rgba(53,98,58,1) 0%,rgba(72,130,79,1) 50%,rgba(53,98,58,1) 100%);
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #35623a;
    opacity: 0.5;
    transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.dmod:hover {
    background: linear-gradient(to right, rgba(53,98,58,1) 0%,rgba(72,130,79,1) 50%,rgba(53,98,58,1) 100%);
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #35623a;
    opacity: 1;
    transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.yonetici {
    background: linear-gradient(to right, rgba(242,95,56,1) 0%,rgba(249,126,93,1) 50%,rgba(242,95,56,1) 100%);
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #c64d33;
    opacity: 0.5;
    transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.yonetici:hover {
    background: linear-gradient(to right, rgba(242,95,56,1) 0%,rgba(249,126,93,1) 50%,rgba(242,95,56,1) 100%);
    margin-top: 10px !important;
    width: 189px;
    padding: 6px 0px;
    margin: auto;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Trebuchet MS';
    text-shadow: 1px 1px 1px #333;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2.5px solid #c64d33;
    opacity: 1;
    transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

Ekledikten Sonra kaydedip kapatın sonraki Aşamaya geçiyoruz.

Tema & şablonlar > Yine kullandığınız tema > şablonlar > Post Bit - [postbit] Şablonlar > Postbit_Groupİmage'yi açın ve içerisindeki kodları verdiğim kodlarlar değiştirin.

Kod:
{$usergroup['image']}

Ardından kaydedip kapatıp çıkın buradaki işlemde bitti son aşama kaldı

Üyeler & Gruplara gelin , gruplar diyin , Hangi gruba ekliyeme yapmak istiyorsanız ona girin ve Kullanıcı grup resmine bu kodları ekleyin;


Kod:
<div class="admin" title="Kurucu">Administrator</div>

kaydedip kapatın işlemler tamamdır.


Son olarak ilk başta eklemiş olduğumuz ForumTeams-Rank.css dosyasındaki renkleri kendinize göre düzenleyebiir ve çoğaltabilirsiniz.
 
Cevap yazmak için giriş yap yada kayıt ol.

Konu görüntüleyen kullanıcılar

Toplam: 2 (Kullanıcı: 0, ziyaretçi: 2)
Benzer konular Forum Tarih
BeStami MyBB Için Yeni Konu Açılırken Uyulması Gereken Kurallar Mybb Forumları 1 451
BeStami MyBB Tablo Ön Eki Değiştirme (MyBB Güvenlik) Mybb Forumları 1 434
BeStami MyBB Türkçe Dil Paketi İndir Mybb Forumları 1 419
BeStami MyBB' De Profile Kapak Fotoğrafı Ekleme Mybb Forumları 1 369
BeStami MyBB REP Puan Ayarlarını Yükseltme Mybb Forumları 1 387
BeStami MyBB Eklenti Boyutu Sınırını Ayarlama Mybb Forumları 1 389
BeStami MyBB Admin Panel İki Faktörlü Giriş Nasıl Yapılır? Mybb Forumları 1 424
BeStami MyBB Yeni Üye Olan Kişiye Özel Mesaj Eklentisi Mybb Forumları 1 386

Benzer konular

Geri
Üst