Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Birazhırs Css Rank Yapımı - MyBB
#1
Admin KP - Temalar & Şablonlar - Temalar - Sitenizde kullandığınız temaya tıklayın ve ardından yeni bir css dosyası oluşturun. Css dosyasını oluşturduktan sonra kendi içeriğimi yazmak istiyoruma tıklayın ve aşağıdaki kodları yapıştırınız.

Kod:
.rank {
  border-left:3px solid rgba(0, 0, 0, 0.2);
  border-radius:3px;
  border-color:#464646;
  margin-top:3px;
  text-align:center;
  height:25px;
  line-height:25px;
  position:relative;
  max-width:170px;
  padding:2px 5px;
  user-select:none;
  color:#FFFFFF;
  font-size:13px;
  font-weight:normal;
}

.rank strong:before{
  content:"\f113";
  font-family:"FontAwesome";
  background:rgba(0,0,0,0.2) none repeat scroll 0 0;
  position:absolute;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
  border-right:1px solid #fff;
  top:0;
  bottom:0;
  left:0;
  padding:2px 4px 0px 3px;
  min-width:20px;
  font-size:100%;
  text-align:center;
}
.rank:before{
  content:" ";
  position:absolute;
  right:0;
  top:0;
  height:24px;
  width:38px;
  background:rgba(0,0,0,0.2);
  -webkit-clip-path:polygon(61% 0, 100% 0%, 100% 100%, 45% 100%);
  clip-path:polygon(61% 0, 100% 0%, 100% 100%, 45% 100%)
}
.rank{
  max-width:135px;
  padding:2px 20px;
  color:#fff;
  font-size:11px;
  font-weight:normal;
}
.rank:before{
  height:29px;
}}

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 -  Sitenizde kullandığınız temanın şablonlarına tıklayın ve ardından postbit şablonlarına girin. Postbit şablonlarına girdikten sonra postbit_groupimage şablonunda aşağıdaki kodu aratınız.

Kod:
<img src="{$usergroup['image']}" alt="{$usergroup['title']}" title="{$usergroup['title']}" />

Yukarıdaki kodu silip aşağıdaki kodu yerine ekleyiniz.

Kod:
{$usergroup['image']}

Admin KP - Üye & Gruplar - Hangi grubun rank-rütbe sistemini değiştirmek istiyorsanız o gruba girin ve grup resmi yerine aşağıdaki kodu ekleyiniz.

Kod:
<div class="rank" style="background:#2980b9;"><span class="before"></span><strong>Webmaster</strong></></div>

Önizlemek için aşağıdaki linke tıklayınız.
https://codepen.io/holigan/pen/WKJagB

Rank-rütbe sistemini çoğaltmak için kullanıcı grup resmindeki kodda bulunan background rengini değiştirmeniz yeterlidir. :D

lZQEpX.png
Coder By: #Captain.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#2
o yıldız kısmı kare olarak gözüküyor
Ara
Cevapla PGM
Teşekkür verenler:
#3
teşekkürler cem bey .D
Ara
Cevapla PGM
Teşekkür verenler:
#4
(03-08-2018 Saat: 12:39)pro35x Nickli Kullanıcıdan Alıntı: o yıldız kısmı kare olarak gözüküyor

Bu konu içeriğinde anlatılanları yaparsanız yıldızlar kare olarak gözükmeyecektir. Codepen sitesinde maalesef javascript çekimi yapmadım bu yüzden kare olarak gözüküyor.
Yorumlarınız için teşekkür ederim.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#5
Ooops.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#6
Eline sağlık.
Cevapla PGM
Teşekkür verenler:
#7
Teşekkür ederim.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#8
(03-08-2018 Saat: 18:16)#Captain Nickli Kullanıcıdan Alıntı:
(03-08-2018 Saat: 12:39)pro35x Nickli Kullanıcıdan Alıntı: o yıldız kısmı kare olarak gözüküyor

Bu konu içeriğinde anlatılanları yaparsanız yıldızlar kare olarak gözükmeyecektir. Codepen sitesinde maalesef javascript çekimi yapmadım bu yüzden kare olarak gözüküyor.
Yorumlarınız için teşekkür ederim.
Eywallah kardeşim :)
Ara
Cevapla PGM
Teşekkür verenler:
#9
Rica ederim.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#10
Güzelmiş, eline sağlık.
Cevapla PGM
Teşekkür verenler:
#11
Teşekkür ederim.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#12
Güncellendi.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



Forum Grand » Dev Paylaşım Platformu -

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