• Bahattin Arıcı
  • 0 views
  • 29 Ekim 2009
  • 0
  •  

WordPress Tema Yapısı 10: Hex Kodları ve Stiller

Önceki dersimize devam ediyoruz. Renklendirme ve hex kodlarıyla ilgili bu bölümde birkaç konuya değiniyoruz. Renk özellikleri için hexadecimal (onaltılık) kodlara bakıyoruz bu bölümde. Yazılarımızın renklerini ayarlıyoruz. Örneğin body { color: #000000;} ile tüm sayfamızdaki yazıların renklerini siyah yapabiliyoruz. İsterseniz bu hex kodları ile sadece yazı değil herşeyi renklendirebilirsiniz. Örneğin body{ background: #ffffff; } ile zemin rengini beyaz verebilirsiniz.

wordpress-tema-yapisi-10-01

Hexadecimal Kodlar

pound işaretinden (#) sonra gelen altı haneli kodlardır. #ffffff beyaz kodundan başlar #000000 siyah koduna kadar devam eder.

#ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333. #222222, #111111

İlk iki hane kırmızı, Üçüncü ve dördüncü hane yeşil, son iki hane mavidir. Örneğin #ff0000 kırmızıyı, #550000 koyu kırmızıyı, #00ff00 yeşili, #0000ff maviyi gösterir. Sarı nerde peki? #ffff00

1. Adım

body {} altına kodlarımızı yerleştirelim.

a:link, a:visited{
text-decoration: underline;
color: #336699;
}

wordpress-tema-yapisi-10-01

text-decoration: underline; ile tüm linklerin altı çizgili yapıyoruz. color: #336699; ile mavi rengi veriyoruz. Mavinin tonlarını kullanıyoruz. Mavi ağırlık olsun istediğimiz için son iki hane yüksek değerler seçiyoruz. Son iki hane maviyi temsil ediyor.

a:link bağlantılar için kullanacağımız stilleri belirtiyoruz. <a> ve </a> etiketleri arasında kullandığımız kelimelere link veriyoruz. Bu kelimeleri a:link ile stillerini ayarlıyoruz.

a: visited ziyaret ettiğimiz yada tıkladığımız sayfaları belirtir. Bu tıklanan yerleri farklı renkle de belirtebiliriz. Daha önce burayı ziyaret etmiştiniz gibi bir anlam çıkartılsın diye. Fakat biz bu örnekte ziyaret edilen ve edilmeyen bağlantıların aynı olmasını istedik.

İsterseniz yukarıdaki kodlama yerine

a:link{
text-decoration: underline;
color: #336699;
}

ve

a:visited{
text-decoration: underline;
color: #336699;
}

kodlarını da kullanabilirsiniz.

Biz virgül (,) işareti ile a: visited ve a:link stillerini ayırıyoruz. Her iki stil için de aynı stilleri kullandığımız için ikisini aynı kodla gösterebilirsiniz.

2.Adım

a:link, a:visited{} kodlarının altına yeni kodlar yerleştiriyoruz.

a:hover{
text-decoration: none;
}

Bu kod ile bağlantıların üzerine geldiğimiz zaman bağlantılar altı çizgili olmayacak.

Ayrıca isterseniz rengini de değiştirebilirsiniz.

a:hover{
text-decoration: none;
color: #ff0000;
}

Kaynak: http://www.wpdesigner.com/2007/03/10/wp-theme-lesson-10-hex-codes-and-styling-links/

Yazar: Bahattin Arıcı #administrator

1979 doğumluyum. Ortaokuldan beri bilgisayarla uğraşıyorum. Grafik, sunucu, donanım, overclock, pc modifikasyon, linux, network, web tasarım, programlama, bilgisayar formatlama :o) gibi işleri severek özenerek bezenerek yaparım. Potansiyel müşterilerimin dikkatine...
Tüm Yazılarına Git

YORUM YAP


BU YAZIYA 0 YORUM YAPILMIŞ