CSS ile blogunuzu şenlendirin -4
Merhaba arkadaşlar CSS ‘de gaza geldim diyeblirim. :) Önceki yazımda arkaplan remimizi sabir bir hale getimiştik. Küçük ipuçlarıyla blogumuzu şenlendirmeye devam ediyoruz. Bugün sizlere blockquote ile alıntı yaptığımız yazıları birazdaha belirgin bir şekilde okuyucunun hoşuna gideceğini düşündüğüm bir biçime sokacağız.
Blogumdaki blockquote efektini görmüşsünüzdür. Öncelikle blockquote efektimizin WordPress temamızda Style.CSS dosyamızı açıyoruz.
Eğer ki blockquote efektimiz yoksa yani Stil dosyamızda bu tanımlanmamışsa… Style.css dosyamıza şu kodları ekleyerek güzel bir efekt oluşturabiliriz.
blockquote, pre {
background:#F1F5F6;
border:1px dashed #B0BEC7;
padding:8px 10px;
margin:5px 0;
}
Bu kodlar içerisindeki background:#F1F5F6; satırı alıntı yaptığımız yazıların arka plan renk kodudur. Bu kodu istediğimiz gibi değiştirebiliriz. Farklı bir renk koyup standartların dışına çıkıp kendi temanızı özelleştirebilirsiniz.
Ayrıca hemen alt satırdaki border:1px kısmı alıntı yaptığımız yazının etrafındaki çizgi kalınlığı. Eğer bu değeri artırırsanız sizde göreceksiniz çizgi kalınlığıda artacaktır. Yine aynı satırda dashed değeri çizginin rengini belirtiyor.
Gelelim 4. satırımıza padding değeri burada 2 tane değer tanımlı. 8px alıntı yaptığımız yazının çizgi ile mesafesi sol taraftan. 10px değeri ise alıntı yazımızın çizgi ile arasındaki üst boşluk yine kendimize göre bu değerleri değiştirebiliriz. Margin değerimiz yani son satırımızdaki değerlerde ise tam tersi alıntı yazımızın çizgisi ile normal yazılarımız arasındaki sol, sağ ve üst, alt çizgilerin mesafeleridir. Dilediğiniz gibi değiştirip özelleştirebilirsiniz.
Bu kadar basit. Kodları CSS dosyanızın içerisine eklediğinizde yada mevcut CSS dosyamızdaki blockquote değerimizi üstteki kodlarla değiştirdiğimizde Artık alıntı yaptığımız yazılarımız çok daha güzel ve dikkat çekici bir hal alacaktır.
Hadi kolay gelsin…
BU YAZIYA YAPILAN YORUMLAR