RankCSS v1

[mehmetext]

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.

Kod:

Kod: Tümünü Seç Tümünü Kopyala

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);

.rank {
  cursor:pointer;
  user-select:none;
  font-family: 'Roboto', sans-serif;
  background:#333 url(https://www.transparenttextures.com/patterns/asfalt-light.png);
  color:#fff;
  width:220px;
  border-radius:3px;
  height:40px;
  line-height:40px;
  border-right:4px solid rgba(0,0,0,.4);
  transition:.5s ease;
  box-shadow:0 2px 2px rgba(0,0,0,.3);
}

.kodlama {
  background-color:#7d34f3;
}

.rank i {
  float:left;
  height:40px;
  width:40px;
  text-align:center;
  line-height:40px;
  font-size:18px;
  background:rgba(0,0,0,.4);
  margin-right:10px;
}

.rank:hover {
  background-position:20px 0px;
  box-shadow:0 4px 2px rgba(0,0,0,.3);
}

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.

Kod:

Kod: Tümünü Seç Tümünü Kopyala

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

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

Kod:

Kod: Tümünü Seç Tümünü Kopyala

{$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 ekleyin.

Kod:

Kod: Tümünü Seç Tümünü Kopyala

<div class="rank kodlama">
  <i class="fa fa-code" aria-hidden="true"></i>
  Rank Denemesi
</div>

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

Rank-rütbe sistemini çoğaltmak için yukarıdaki css dosyasındaki kodları çoğaltıp background rengini değiştirmeniz yeterlidir. :D
----
Konuyu ben hazırlamadım, #Captain hocamın hazır konusundan aldım. Kodları ben hazırladım tabii ki ^^

[Muratbaykam]

Elinize sağlık

[#Baran]

Eline sağlık.

[bretwskin]

Şahane, eline sağlık Mehmet.

[mehmetext]

Teşekkürler arkadaşlar ^^

[abdullahozturk]

Hoş, ben beğendim :)

[mehmetext]

Teşekkürler hocam.

[B.Blues]

Hoş olmuş.

[Dream41]

Eline sağlık Mehmet güzel çalışma olmuş.

[mehmetext]

Teşekkürler.

[#Power]

Özendiğimiz sade tasarımı süslemeye başladık. Böyle kalması çok uzun sürmeyecek, daha da süslenecek...

[mehmetext]

Özendiğimiz sade tasarımı süslemeye başladık. Böyle kalması çok uzun sürmeyecek, daha da süslenecek...

Daha iyi değil mi?

[#Power]

Özendiğimiz sade tasarımı süslemeye başladık. Böyle kalması çok uzun sürmeyecek, daha da süslenecek...

Daha iyi değil mi?

Elbette. Bu sayede yeni bir şeyler üretmeye başlıyoruz. Daha öncenin aynısını yapmak yerine.