MyBB Destek Forumu

Orjinalini görmek için tıklayınız: CSS ile Çok Güzel Uyarı Kutuları Oluşturalım
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
CSS ile Çok Güzel Uyarı Kutuları Oluşturmaya Ne Dersiniz ;

Öncelikle Aşağıdaki Dosyayı İndirelim.
[attachment=1188]
dosyalarımız.rar Adlı Dosyanın İçinden Çıkan resim Klasörünü Forumumuzun Ana Dizinine Atalım.

Daha Sonra CSS Kodlarımızı Verelim.
(MyBB İçin : Bu kodları global.css nin en altına eklemeleri yeterli)

Kod:
<style type="text/css">
#icerik{
margin:0px auto;
width:750px;
}

.kutu{
width:670px;
margin:20px 0;
/* border radius */
-webkit-border-radius: 3px;  
-moz-border-radius: 3px;  
border-radius: 3px;
-webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
}

.kutu span{
font: 13px microsoft yahei;
margin-left:10px;
}

.basarili{
padding:15px 40px;
background: #F0FCCF url(resim/basarili.png) no-repeat 10px center;
border:1px solid #BADC5D;
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
}

.hata{
padding:15px 40px;
background: #FCE3E3 url(resim/hata.png) no-repeat 10px center;
border:1px solid #BC8484;
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
}

.uyari{
padding:15px 40px;
background: #FFF0C6 url(resim/uyari.png) no-repeat 10px center;
border:1px solid #B59F5E;
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
}

.bilgi{
padding:15px 40px;
background: #F7F9FC url(resim/bilgi.png) no-repeat 10px center;
border:1px solid #B0B9C4;
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.9) inset;
}
</style>

Kod İçindeki .basarili , .bilgi , .uyari , .hata

Şimdi gelelim HTML Kodlarına.
(MyBB İçin : index Şablonu {$header} Kodunun Altına Eklemeleri Yeterli Olacaktır.

Kod:
<div id="icerik">
<div class="kutu basarili"><span>Başarılı Kutumuz</span></div>
<div class="kutu hata"><span>Hata Kutumuz</span></div>
<div class="kutu uyari"><span>Uyarı Kutumuz</span></div>
<div class="kutu bilgi"><span>Bilgi Kutumuz</span></div>
</div>

Gördüğünüz Gibi class = kutu ... Boşluguna üstteki css kodlarındaki basarili , bilgi , uyari , hata Gibi Kodları Ekledik

Örnek Verirsek, Aşağıdaki Kodu Alalım.

Kod:
<div id="icerik">
<div class="kutu basarili"><span>Başarılı Kutumuz</span></div>

Eğer Ayarları En Doğru Şekilde Yaptıysak Sonuç Aşağıdaki Gibi Olacaktır.
95862332229034628872.jpg
Gördüğünüz Gibi Çok Hoş Bir Tasarım Çıktı Ortaya.

Şimdi Hepsini Deneyelim Bakalım Nasıl Olacakmış.

94582357771057798562.jpg
İşte Bu Kadar Arkadaşlar.

Demo Adresimiz.
Kod:
webmasternoktasi.com/csskutu

İyi Çalışmalar

Hocam eline sağlıkta ben bunu MyKod olarak ekledim ve

07617631213834864124.png

Resimdeki gibi beyaz bir kutu içinde çıkıyor css ile aram iyi değildir size zahmet onu bi halletseniz Gülümseme Sizin konunun altından paylaşacaktım MyKod olarak eklemeyi o beyaz kutu işi bozdu Gülümseme Hayallerim suya düştü GülümsemeGülümseme

Edit: Bu kadar küçültebildim Gülümseme
82216323728530216324.png
Teşekkurler bilal Gülümseme
(27.11.2011, Saat: 21:56)NiGDeLi Adlı Kullanıcıdan Alıntı: [ -> ]Hocam eline sağlıkta ben bunu MyKod olarak ekledim ve

07617631213834864124.png

Resimdeki gibi beyaz bir kutu içinde çıkıyor css ile aram iyi değildir size zahmet onu bi halletseniz Gülümseme Sizin konunun altından paylaşacaktım MyKod olarak eklemeyi o beyaz kutu işi bozdu Gülümseme Hayallerim suya düştü GülümsemeGülümseme

Edit: Bu kadar küçültebildim Gülümseme
82216323728530216324.png


Hocam mycode olarak çalısmaz zaten. css kodlarını eklemelisiniz global.css ye. ardından ne yapılacağı konuda yazıyor zaten.
Teşekkür ederiz.
Global css ye gerekli eklemeyi yaptım zaten eklemeden imkansız zaten Gülümseme