Merhabalar...
Birçok arkadaşımızın yapmak isteyipte yapamadığı Css mesaj panolarının detaylı anlatımını yapacağım.
CSS Mesaj Panoları Nedir ?
Yukarıda da görüldüğü üzere makale sonralarına yerleştirebileceğiniz renkli mesaj kutularıdır.
Öncelikle buradan paketi indiriyoruz.
İndirmiş olduğumuz paket içindeki " css.css " adlı dosyamızı kendi web sitemize tanıtmamız gerekmektedir.
Bunun için; Admin paneli / görünüm / editör / header.php' yi açıyoruz ve <head> tagları arasına ;
yukarıdaki kodları yerleştiriyoruz.
Daha sonra, indirdiğimiz paketteki css.css dosyasını açıyoruz.
http://siteadresi yazan yere adresinizi yazıyorsunuz.
Daha sonra css.css dosyasındaki tüm yazıları kopyalayıp temanızdaki style.css dosyasının en alt satırına yapıştırıyorsunuz.
Arkasından indirmiş olduğunuz paketi ftpden ana dizine gönderiyorsunuz.
Artık kullanıma hazır hale geldi.
Peki Nasıl Kullanacam ?
Makale içerisinde kutunun gözükmesini istediğiniz yerde HTML sekmesine tıklayın.
Örnekler:
CSS mBox Eburhan'a aittir. Güle Güle Kullanın.
DEMO
Birçok arkadaşımızın yapmak isteyipte yapamadığı Css mesaj panolarının detaylı anlatımını yapacağım.
CSS Mesaj Panoları Nedir ?
Yukarıda da görüldüğü üzere makale sonralarına yerleştirebileceğiniz renkli mesaj kutularıdır.
Öncelikle buradan paketi indiriyoruz.
İndirmiş olduğumuz paket içindeki " css.css " adlı dosyamızı kendi web sitemize tanıtmamız gerekmektedir.
Bunun için; Admin paneli / görünüm / editör / header.php' yi açıyoruz ve <head> tagları arasına ;
PHP:
<style type="text/css" media="screen, projection">
@import "mBox/css.css";
</style>yukarıdaki kodları yerleştiriyoruz.
Daha sonra, indirdiğimiz paketteki css.css dosyasını açıyoruz.
PHP:
.hata, .ikaz, .tamam, .bilgi {
margin-bottom: 1.5em;
padding: 1em 1.5em 1em 5.5em;
border-bottom: 2px solid #fff;
border-top: 2px solid #fff;
color: #444
}
.hata {background: #fbe3e4 url(http://siteadresi/mBox/hata.png) 2.2em center no-repeat; border-color: #e0011b}
.hata a {color: #d12f19}
.ikaz {background: #fff6bf url(http://siteadresi/mBox/ikaz.png) 2.2em center no-repeat; border-color: #ffd324}
.ikaz a {color: #817134}
.tamam {background: #e9ffdd url(http://siteadresi/mBox/tamam.png) 2.2em center no-repeat; border-color: #72c868}
.tamam a {color: #529214}
.bilgi {background: #e2ecee url(http://siteadresi/mBox/bilgi.png) 2.2em center no-repeat; border-color: #9ddae6}
.bilgi a {color: #2d7ba2}
/* listeler */
.hata ul, .ikaz ul, .tamam ul, .bilgi ul {
list-style: none;
margin: 1.3em 1.5em
}
.hata ul li, .ikaz ul li, .tamam ul li, .bilgi ul li {
padding-left: 1.3em
}
.hata ul li { background: url(http://siteadresi/mBox/hata-bullet.png) 0 0.55em no-repeat }
.ikaz ul li { background: url(http://siteadresi/mBox/ikaz-bullet.png) 0 0.55em no-repeat }
.tamam ul li { background: url(http://siteadresi/mBox/tamam-bullet.png) 0 0.55em no-repeat }
.bilgi ul li { background: url(http://siteadresi/mBox/bilgi-bullet.png) 0 0.55em no-repeat }http://siteadresi yazan yere adresinizi yazıyorsunuz.
Daha sonra css.css dosyasındaki tüm yazıları kopyalayıp temanızdaki style.css dosyasının en alt satırına yapıştırıyorsunuz.
Arkasından indirmiş olduğunuz paketi ftpden ana dizine gönderiyorsunuz.
Artık kullanıma hazır hale geldi.
Peki Nasıl Kullanacam ?
Makale içerisinde kutunun gözükmesini istediğiniz yerde HTML sekmesine tıklayın.
Örnekler:
PHP:
<div class="bilgi">
Bu şekilde bilgi mesajı gösterebilirsiniz.
</div>
PHP:
<div class="tamam">
Bu şekilde onay mesajı gösterebilirsiniz.
</div>
PHP:
<div class="hata">
Bu şekilde hata mesajı gösterebilirsiniz.
</div>
PHP:
<div class="ikaz">
Bu şekilde uyarı mesajı gösterebilirsiniz.
</div>CSS mBox Eburhan'a aittir. Güle Güle Kullanın.
DEMO