Baykam CSS Ranks - Özel , Sade , Şık CSS Ranklar

[Muratbaykam]

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

http://codepen.io/muratbaykam/pen/JEewwo

Kodlama süresi : 7 Dakika 20 Saniye 
Kendimce kodladım , sonra alıntı kodlarla yaptın demeyin emek var ve gayet güzel oldu , box-shadow biraz abarttım fakat güzel görünüyor :) , background-color yerinden rengini değiştiriniz .

Temalar & Şablonlar > Tema İsmi > CSS Oluştur ;
Stil Adı : BaykamRank.css
Kendi İçeriğimi Yazmak istiyorum ve bu kodları yapıştırın :

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

.baykamranks{
 padding:6px 50px;
 float:left;
 border-radius:5px;
 transition-property: box-shadow;
 transition-duration:0.5s;
 border-bottom: 5px solid #ccc;
 font-family: "Roboto";
 color:#fff;
 font-size.15px;
 text-align:center;
}
.baykamranks:hover{
 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

Admin KP - Temalar & Şablonlar - Şablonlar - Kullandığınız Tema - Postbit Şablonlar - Postbit_groupimage şablonuna giriyoruz, aşağıdaki kodu buluyoruz.
Kod:

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

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

Bu kodu aşağıdaki verdiğim kod ile değiştirin.
Kod:

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

{$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: Tümünü Seç Tümünü Kopyala

<div class="baykamranks" style="background-color:#c0392b">Admin</div>

Aşağıda kırmızı ile işaretlediğim yeri düzenleyin ; renk kodu veya renk adı yazınız diğer ranklarıda kodu kopyala yapıştır yaparak düzenleyebilirsiniz . Admin yazan yere grubun adını yazınız ÖRNEK : Bölüm şefi
<div class="baykamranks" style="background-color:#c0392b">Admin</div>

SS (Hoverli): http://i.hizliresim.com/PnyO0O.png

[Subjeq]

Güzel sade ve şık durmuş.

[#Captain]

Hover'i çok saçma olmuş, ellerine sağlık.

[Muratbaykam]

Hover hava katsın diye ekledim normalde boş duruyor :)

[Besico]

Elinize sağlık.

[#Power]

Hoverdaki shadow çok fazla olmuş. Margin ile içindeki yazıyı konumlandırmışsın. Çok saçma olmuş bu yaptığın. Yazı diye css açmana gerek yoktu hatta. Padding koyardın direk kutuya.

[sari bebek]

elinize sağlık hoş duruyor.

[Muratbaykam]

Yazıyı konumlandıramadım diye ayrı bir div açmaya gerek duydum aklıma gelmemiş padding kullanmak :8

[#Power]

Yazıyı konumlandıramadım diye ayrı bir div açmaya gerek duydum aklıma gelmemiş padding kullanmak :8

Kutuya yükseklik verirsen konumlandıramazsın tabi. 2 dakikalık düzenlemeyle daha stabil hale getirebilirsin. Ben yaptım da kaydetmeyi beceremedim.

[Dream41]

Kutuya yükseklik verirsen konumlandıramazsın tabi. 2 dakikalık düzenlemeyle daha stabil hale getirebilirsin. Ben yaptım da kaydetmeyi beceremedim.

Ben yaptım ve kaydettim buyurun.

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

http://codepen.io/dream41/pen/JEexWR

[La Fontaine]

Güzel olmuş,ellerinize sağlık.

[Muratbaykam]

Konuyu güncelledim teşekkürler @karazehir41