• Forum vBulletin altyapısından Xenforo altyapısına geçirildi, bu sebeple eski şifreleriniz ile foruma giriş yapamayacaksınız, parolamı unuttum adımından mailiniz ile şifre sıfırlayarak giriş yapabilirsiniz.

    Üyeliklerinde geçerli bir mail adresi olmadığı için sıfırlama yapamayacak kullanıcılar forum kullanıcı adlarını ve yeni şifrelerini yazarak info@maxigame.org adresine şifre sıfırlamak istediklerine dair bir mail göndersinler şifrelerini sıfırlayıp mail adreslerini güncelleyeceğiz. Şifreniz sıfırlandıktan sonra foruma giriş yapıp tekrar istediğiniz gibi değiştirebilirsiniz.

Online-Offline Durum Çubuğu

  • Konuyu başlatan Konuyu başlatan Screwy
  • Başlangıç tarihi Başlangıç tarihi

Screwy

Aileden
Screwy
Aktiflik
K.Tarihi
2 Eki 2011
Mesajlar
927
Puanı
175
Konum
(Samsun)
d08rl.gif


​
Merhaba arkadaşlar;

Bugün sizlere html/css olarak hazırladığım online-offline ve uzakta durum gösterimini paylaşacağım...

Bu ne işe yarar;Forumlarda veya postbit olarak adlandırdığımız alanlarda online,offline durumu gösteren ikon yerine kullanılır...

Yapımı Nasıldır? :

Öncelikle hangi sistemi kullanıyorsanız o sistemin temalarının css kodları nereye ekleniyor ise aşağıdaki kodları css bölümüne ekliyoruz...

Kod: 
[COLOR=#707070][FONT=Monaco].screwypostbitinsivible {[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]        background: url(images/Screwy/dppostbit/screwypostbitgizli.png) repeat scroll 0 0 #474747;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    margin-top: 2px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    text-align: left;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    margin-top: 2px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]        margin-bottom: -2px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    font-size: 13px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    padding: 0 4px 0;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    color: #FFF;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-top: 1px solid #DDDDDD;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-left: 1px solid #DDDDDD;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-right: 1px solid #DDDDDD;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -webkit-border-top-left-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -webkit-border-top-right-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -moz-border-radius-topleft: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -moz-border-radius-topright: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-top-left-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-top-right-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    width:155px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]}[/FONT][/COLOR]

[COLOR=#707070][FONT=Monaco]    .screwypostbitinsivible  dd { float: right; }[/FONT][/COLOR]

[COLOR=#707070][FONT=Monaco].screwypostbitoffline {[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]         background: url(images/Screwy/dppostbit/screwypostbitcevirimdisi.png) repeat scroll 0 0 #d20303;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    margin-top: 2px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    text-align: left;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    margin-top: 2px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]        margin-bottom: -2px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    font-size: 13px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    padding: 0 4px 0;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    color: #fff;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-top: 1px solid #DDDDDD;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-left: 1px solid #DDDDDD;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-right: 1px solid #DDDDDD;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -webkit-border-top-left-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -webkit-border-top-right-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -moz-border-radius-topleft: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -moz-border-radius-topright: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-top-left-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-top-right-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    width:155px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]} [/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    .screwypostbitoffline  dd { float: right; }[/FONT][/COLOR]

[COLOR=#707070][FONT=Monaco].screwypostbitonline {[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]        background: url(images/Screwy/dppostbit/screwypostbitcervimici.png) repeat scroll 0 0 #86c901;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    margin-top: 2px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    text-align: left;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    margin-top: 2px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]        margin-bottom: -2px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    font-size: 13px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    padding: 0 4px 0;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    color: #fff;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-top: 1px solid #DDDDDD;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-left: 1px solid #DDDDDD;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-right: 1px solid #DDDDDD;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -webkit-border-top-left-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -webkit-border-top-right-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -moz-border-radius-topleft: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    -moz-border-radius-topright: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-top-left-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    border-top-right-radius: 5px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]    width:155px;[/FONT][/COLOR]
[COLOR=#707070][FONT=Monaco]}[/FONT][/COLOR]

[COLOR=#707070][FONT=Monaco]    .screwypostbitonline  dd { float: right; }[/FONT][/COLOR]

Daha sonra Alanın Gözükmesini İstediğiniz Bölüm için Kodlarımızı Aşağıdaki Gibi Değiştiriyoruz...

Online Durumu Gösterimi İçin:
Kod: 
[COLOR=#707070][FONT=Monaco]<div class="screwypostbitonline">Durum<dd> Online </dd></div>[/FONT][/COLOR]


Offline Durumu Gösterimi İçin:
Kod: 
[COLOR=#707070][FONT=Monaco]<div class="screwypostbitonline">Durum<dd> Online </dd></div>[/FONT][/COLOR]


İzinli & Uzakta Durumu Gösterimi İçin:
Kod: 
[COLOR=#707070][FONT=Monaco]<div class="screwypostbitinsivible">Durum<dd> İzinli </dd></div>[/FONT][/COLOR]


Daha sonra aşağıdaki dosyayı indirin. İçerisindeki Screwy klasörünü images klasörünün içerisine atın.

[HIDE]
DOWNLOAD
[/HIDE]

Winrar Şifresi: maxigamerz.com

VirusTotal İçin Tıklayınız...

Sonuç Olarak Nasıl Bir Görünüm Elde Edeceğim ve Kullanacağım Alan Nasıl Olacak?: Bizzat kendi kullandığım sitelerden bir kaç resim.Resimlerde ki online offline kısımlarına bakarsanız anlayabilirsiniz. :)

Yatay Postbit Görünümü:
ki1b.png


6lba.png


rrdm.png

Dikey Postbit Görünümü:
dnnm.png


u93v.png





[BILGI]Herkese iyi forumlar dilerim. Emeğe saygı. Bir teşekkür'ü çok görmeyelim... :)[/BILGI]
​
 
Son düzenleme:
Konuya cevap yazabilmek için giriş yapmanız veya üye olmanız gerekmektedir.

Benzer Konular

Lates2 1-120 ORTA EMEK SERVER
Cevaplar
0
Görüntüleme
538
hayatiakman
CottonCandy
CSS'te Text Shadow ve Box Shadow
Cevaplar
0
Görüntüleme
1K
CottonCandy
CottonCandy
Deepblue
vBulletin 4x JS (JavaScript) Spoiler BBCode
Cevaplar
0
Görüntüleme
2K
Deepblue
Deepblue
Dulcie
HTML - CSS Menu.
Cevaplar
13
Görüntüleme
4K
Dentrax
Dentrax
Screwy
Screwy Basit ve Şık Menü Tasarımı
Cevaplar
5
Görüntüleme
2K
Screwy
Screwy
Geri
Üst