Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Baykam CSS Ranks - Özel , Sade , Şık CSS Ranklar
#1
Kod:
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:
.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:
<img src="{$usergroup['image']}" alt="{$usergroup['title']}" title="{$usergroup['title']}" />

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

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="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
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:
#2
Güzel sade ve şık durmuş.
Ara
Cevapla PGM
Teşekkür verenler:
#3
Hover'i çok saçma olmuş, ellerine sağlık.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#4
Hover hava katsın diye ekledim normalde boş duruyor :)
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:
#5
Elinize sağlık.
Ara
Cevapla PGM
Teşekkür verenler:
#6
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.
Ara
Cevapla PGM
Teşekkür verenler:
#7
elinize sağlık hoş duruyor.
Ara
Cevapla PGM
Teşekkür verenler:
#8
Yazıyı konumlandıramadım diye ayrı bir div açmaya gerek duydum aklıma gelmemiş padding kullanmak :8
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:
#9
(11-02-2017 Saat: 15:14)Murat#Baykam Nickli Kullanıcıdan Alıntı: 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.
Ara
Cevapla PGM
Teşekkür verenler:
#10
(11-02-2017 Saat: 15:21)#Power Nickli Kullanıcıdan Alıntı: 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:
http://codepen.io/dream41/pen/JEexWR
Ü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:
#11
Güzel olmuş,ellerinize sağlık.
Ara
Cevapla PGM
Teşekkür verenler:
#12
Konuyu güncelledim teşekkürler @karazehir41
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:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 5 Ziyaretçi



500000 -

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