Prosilver tema geliştirme ile ilgili bildiklerimi elimden geldiğince ve de fırsat buldukça anlatmaya karar verdim.
Genel olarak css ile ilgili anlatımlar yapacağım. Bu konuda bilgisi olan diğer arkadaşlarda katkıda bulunabilirler.

Öncelikle headerin ne olduğunu bilmeyen arkadaşlar olacağından hareketle headerin sitenin en üst kısmı, logonun vs.’nin bulunduğu kısım olduğunu belirtelim.

Peki bunu nasıl şekillendiririz?

Headeri css dosyalarından istediğimiz gibi şekillendirebiliriz. Headeri istediğimiz gibi şekillendirmek için common.css ve colours.css dosyalarında değişiklik yapmamız yeterlidir. Tabi işin HTML kısmı da var.

Header arkaplan resmi ve rengi colours.css dosyasında şu satırlarda tanımlanmıştır:

Kod:

.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
color: #FFFFFF;
}


Background-color her zaman değişiklik yapılan alanın arkaplan rengini ifade eder. Eğer bir alan için bir arkaplan ve bir arkaplan rengi tanımlanmışsa önce resim görünecektir. Arkaplan rengi resmin olmadığı yerde veya resim transparan ise görülür.

Arkaplan renk kodunu istediğimiz renk koduyla değiştirip arkaplan rengini istediğimiz gibi ayarlayabiliriz.
Renk kodları ile ilgili bilgiye buradan ulaşılabilir.
Seçtiğiniz rengin kodunu alabileceğiniz renk seçiciye buradan ulaşabilirsiniz.

Arkaplan resmi ise alanın arkaplanında duran resimdir ki adı üzerinde. Bu resim için common.css ve colours.css de tanımlamalar yapılmıştır. Colours.css de header arkaplan resmi ile ilgili kısım şu:

Kod:

background-image: url("{T_THEME_PATH}/images/bg_header.gif");


Yani resmimiz bg_header.gif ve images klasöründe yer alıyor.
Common.css de ise şu:

Kod:

background: #ebebeb none repeat-x 0 0;


Burada arkaplan için ebebeb renk koduna sahip renk tanımlanmış, none repeat-x 0 0 ise arkaplan resmi ile ilgili tanımlamalardır. repeat-x resmin x ekseninde yani yatay olarak sıralanacağını belirtir.

Colurs.css de header için tanımlanan diğer komut ise color:#ffffff; komutu. Bu komut header üzerindeki yazıların rengini belirler. Site açıklaması vs gibi.

Header için common.css de tanımlanan diğer komutlar margin-bottom ve padding komutları. Margin komutu header ile kendisine en yakın öğenin mesafesini belirtir. margin-bottom olunca header ile alttaki öğe arasındaki mesafe oluyor. Padding komutu ise header içindeki öğelerin header kenarına olan mesafeyi belirtir.