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…
Kafamda Padding ve Margin ile ilgili soru işaretleri vardı. Sayende daha iyi anladım.
Emeğine sağlık.
Teşekkürler dostum.
Bilgiyi ziyaretçilerinle paylaşmak ne kadar güzel bir şey.. Bu siteden öğreneceğimiz daha çok şeyler var.. Bu güzel emeğin için teşekkür ederiz..
Hayırlı, sağlıklı ve ailenle güzel günler dilerim..
Batuhan
Bu yöntemi bende kullanmaya başlamıştım. (: Bazı alıntı yazılarda güzel oluyor.
Dostum blockquote divinin position değerini değiştir istersen. Google reklamları blockquote divinin üzerine çıkıyor.
@dontEnter
Birşey değil dostum yardımcı olabildiğime sevindim.
@Batuhan
Teşekkür ederim…
@Burak Özdemir
Okuyucular için aslında dikkat çekici oluyor. Zeten Blockquote yapmamızın sebebi bu değil mi ?
@hakan yamanoglu
Dostum sanırım Google’nin Javasından üstünde duruyor aşağı aldım ama fark etmedi.
abi birşey sormak isityorum, nereye yazsam bilemedim kusura bakmayasın…
benim sitenin hafiften üzerinde ince ayarlar yapmaya çalışıyordum, maksat egomu tatmin ediim :) istediim tarzda bişey olsun istedim…
mesela küçük bir div açtık ve arka planına da resim ekledik…ama biz bu div’in istediğimiz yerlerinde url eklemesi yapmak istiyoruz..hani facebook’da var ya fotolarda sadece yüze veya kişinin bedeni kısmına tuttuğunda bilgilendirme penceresi çıkıor ya bende bunu belirli yerlerde url eklemek istiyorum…eklemek istediğim yer burası ben burada “anasayfa” yazısına link vercem….cevaplayabilirsen sevinirm…iyi geceler-sabahlar !!
Merhaba;
Bende Worpdress kullanıyorum ve yazılarımın içerisinde bol miktarda tablo mevcut.
Bu tablolar için ben özel bir css yazdım. Bunu temanın style dosyasına koyuyorum ancak tablolarda herhangi bir değişiklik olmuyor. Yazıların içerisine tabloyu ayrı bir css olarak gösterirsem çalışıyor.. ( html içerisnden css çağırıyorum )
Mevcut tema dosyama nasıl entegre etmeliyim ki tablo gördüğünde otomatik olarak style.css dosyasından tablo özelliklerini görsün..