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…