Yayınlara Çerçeve Eklemek

1. Klasik ve basit bir çerçeve ile başlayalım

İlk örnek en basit çerçeve örneği olsun.Resimde gördüğünüz gibi yazılarınızı 1 pixel kalınlığında siyah bir çerçeve içine almak için ]]></b:skin> kodundan önce şu kodu ekleyin:

.post { border:1px solid #000; padding:8px }

2. Çerçevenin kalınlığını ve rengini değiştirelim

İkinci örnekte çerçevinin kalınlığını 3 pixele çıkaralım ve rengini kırmızı yapalım.Bunun için kodları şu şekilde değiştiriyoruz:

.post { border:3px solid #ef1010; padding:8px }

3. Çerçeve şeklini noktalı yapalım

Üçüncü ve dördüncü örnekte çerçevenin şeklinde yapabileceğiniz değişiklikleri göstermek istiyorum.Öncelikle noktalı çerçeve yapalım.Örneğin çerçevemiz 2 pixel kalınlığında, siyah renkte ve noktalı olsun.Bunun için eklememiz gereken kod şu:

.post { border:2px dotted #000; padding:8px }

4. Çerçeve şeklini çizgili yapalım

Çerçevemizin şeklini noktalı yapmanın dışında bir başka sık kullanılan yöntem de çizgili yapmaktır.Bunun için de kırmızı renkli, 1 pixel kalınlığında ve çizgili bir çerçreve örneği verelim.Eklememiz gereken kod şu:

.post { border:1px dashed #ef1010; padding:8px }

5. Oval köşeli çerçeve yapalım

Bu ve bundan sonra göstereceğim örnekte kullanacağımız yöntem CSS3 olduğu için Internet Explorer gibi çağ dışı tarayıcılarda çalışmaz.Bu örnekte yazımızı 1 pixel kalınlığında, siyah renkli ve 10 pixel yarıçapında oval köşeli bir çerçeve içine alacağız.Eklememiz gereken kod şu:

.post { border:1px solid #000; padding:8px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 

6. Oval köşeli noktalı çerçeve yapalım

Son olarak oval köşeli çerçevinin şeklini noktalı , kalınlığını 2 pixel ve yarıçapını 20 pixel yapıp bir çerçeve oluşturarak yazıyı bitirelim.Ekleyeceğimiz kod şu:

.post { border:2px dotted #000; padding:8px;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px; }

7.Widgetler  için kenarlık yapalım


Sayfanızda bulunan widgetler için de çerçeve yapmanız mümkün. Bunun için Şablonunuzda ]]> kodunun üstüne şu kodu ekleyin:

.sidebar .widget { border:1px solid #000; padding:5px }

#000 yerine sayfanız için uygun olan renk kodunu yapıştırabilirsiniz.

Devamını Oku..