MyBB Css İle Rank Yapımı

DramaCode

Harbi Üye
Forum Üyesi
Katılım
13 Nisan 2020
Mesajlar
1,786
Tepkime puanı
1
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

Siteadiniz-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 Siteadiniz-Rank.css dosyasındaki renkleri kendinize göre düzenleyebiir ve çoğaltabilirsiniz.
 
Moderatör tarafında düzenlendi:

Benzer konular

delipetek

Harbi Üye
Bayan Üye
Özel Üye
Katılım
17 Mart 2019
Mesajlar
3,449
Tepkime puanı
42
Cinsiyet
  1. Bayan
Takım
Galatasaray
İçerik sağlayıcı "paylaşım" sitelerinden biri olan Harbimekan.Com Forum, Eğlence ve Güncel Paylaşım Platformu Adresimizde 5651 Sayılı Kanun’un 8. Maddesine ve T.C.K’nın 125. Maddesine göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur. Harbimekan.Com sitesindeki konular yada mesajlar hakkında yapılacak tüm hukuksal Şikayetler için info@harbimekan.com yada iletişim sayfası üzerinden iletişime geçilmesi halinde ilgili kanunlar ve yönetmelikler çerçevesinde en geç 3 Gün (72 Saat) içerisinde Forum yönetimi olarak tarafımızdan gereken işlemler yapılacaktır.

Bu Site, Bilim ve Sağlık Haber Ajansı Üyesidir.

Yığıntı - 8kez - kaynak mağazam - Uğur Ağdaş - genel forum - webp converter