Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Simgeli Css Rank Yapımı - MyBB
#1
Admin KP - Temalar & Şablonlar - Temalar - Kullandığınız Tema - Yeni bir css oluşturun. Kendi içeriğimi oluşturmak istiyoruma tik koyun. Aşağıdaki kodları içine yapıştırın.

Not: Ben sadece bir tane rank stilini verdim. Siz aşağıdaki kodları çoğaltıp member yazan yerlerini yapacağınız rütbe ismi olarak değiştirip çoğaltabilirsiniz.
Kod:
@import url(https://fonts.googleapis.com/css?family=Raleway:400);

.member {
  background: #7f8c8d;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  float: left;
  color: white;
  width: 190px;
  hright: 35px;
  line-height: 35px;
  border-radius: 2px;
  text-align: center;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  box-shadow: inset 0px 1px 0px rgba(0,0,0,0.2),inset 0px -1px 0px rgba(0,0,0,0.2),inset 1px 0px 0px rgba(0,0,0,0.2),inset -1px 0px 0px rgba(0,0,0,0.2),inset 0px 1px 0px rgba(255,255,255,0.1);
  text-shadow: 0 2px 1px rgba(0,0,0,0.2);
  -webkit-transition-duration: 0.4s;
}

.member i {
  -webkit-filter: #c0392b(100%);
  background-color: rgba(0, 0, 0, 0.2);
  text-shadow: 0 2px 1px rgba(0,0,0,0.2);
  display: block;
  float: right;
  height: 35px;
  line-height: 35px;
  width: 35px;
  overflow: hidden;
  font-size: 20px;
}

Admin KP - Temalar & Şablonlar - Şablonlar - Kullandığınız Tema - Gruplandırılmış Şablonlar - Headerinclude şablonuna giriyoruz, {$stylesheets} kodunun üzerine aşağıdaki kodları ekliyoruz.
Kod:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Admin KP - Temalar & Şablonlar - Şablonlar - Kullandığınız Tema - Postbit Şablonlar - Postbit_groupimage şablonuna giriyoruz, aşağıdaki kodu buluyoruz.
Kod:
<img src="{$usergroup['image']}" alt="{$usergroup['title']}" title="{$usergroup['title']}" />

Bu kodu aşağıdaki verdiğim kod ile değiştirin.
Kod:
{$usergroup['image']}

Admin KP - Üyeler & Gruplar - Gruplar - Hangi grup rankını değiştirmek istiyorsanız o gruba girin. Kullanıcı grup resmi yazan yere aşağıdaki kodu ekliyoruz.
Kod:
<div class="member"><i class="fa fa-rocket"></i>eXpertBoss Üye</div>
Şablonda yazan rocket simge kodudur. Eğer farklı simge eklemek istiyorsanız http://fontawesome.io/icons/ sitesinden bakabilirsiniz.

Not: Ben sadece üye rankını örnekledim. Siz css şablonunu çoğaltarak ranklarıda çoğaltabilirsiniz. MyBB bilen kişiler bunu kolaylıkla anlar. Eğer fazla bilginiz yok ise bilgili olan kişilerden yardım isteyebilirsiniz.

Sizin tek yapmanız gereken rankları çoğaltırken background-color yani arkaplan rengini değiştirmek, güle güle kullanın.

Rank görüntüsü aşağıda verilmiştir.
5LbGb5.png

Dip Not: Rank stillerine farklı kodlar ekleyerek değişik stiller çıkarabilirsiniz.

Made in eXpertBoss.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#2
mybbarsiv kullanıyor :) Teşekkürler.
eskilere hasret kaldık.
Cevapla PGM
Teşekkür verenler:
#3
Bilmeyenler için gayet yararlı.
Teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:
#4
Eline sağlık güzel olmuş.
Ücretli Grafik İşleri Yapılır.
İletişim: Discord 
Biz birbirimize dönmüş iki ayna gibiyiz. İçimizde binlerce olsa da görüntümüz bir biz sadece birbirimizi görürüz…
                                                             
Cevapla PGM
Teşekkür verenler:
#5
Rica ederim, geliştirerek daha güzel stiller çıkarabilirsiniz.
Örneğin i class'ını geliştirerek ikonu öne çıkarıp daha hoş gösterebilirsiniz.

Hafif kodlama bilgisi olanlar bu konuda çok rahat edecek gibime geliyor.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#6
Güzel olmuş teşekkürler
Bana ulaşmak için / http://english.10tl.net

MybbPHPVB.NETHTMLCSS MySQL                                    

Eğer eleştiriden korkuyorsanız, dünyadan hiçbir şey yapmadan geçip gideceksiniz demektir. 
Cevapla PGM
Teşekkür verenler:
#7
Rica ederim.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#8
Aradığım konulardan saol
Ara
Cevapla PGM
Teşekkür verenler:
#9
Rica ederim.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#10
İyi bir konu teşekkürler hocam.
Ara
Cevapla PGM
Teşekkür verenler:
#11
Rica ederim kardeşim.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi


Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping