Burada tema yapımız klavuzunda belirttiğimiz üzere dosyaların ne işe yaradığını görmüştük.Sıra geldi Dosyların içini kodlarla doldurmaya.

İlk olarak temamızın kıyafeti saydığımız style.css dosyasından başlıyoruz.Bu dosyada yazı fontunu,büyüklüğünü,sayfa genişliğini,arkaplan rengini veya resmini,en ve boy oranlarını ayarlayabiliriz.

Style.css dosyamızın başında bulunması gereken kodlar aşağıdadır.

[html]
/*
Theme Name: Tozbulutu
Theme URI: http://www.tozbulutu.org
Description: Minimal bir wordpress teması
Author: Mehmet Gümüş
Author URI: http://tozbulutu.org
Version: 1.0
*/
[/html]

Buradaki kodlar temanın ismini,versiyonunu ve kimin yaptığını belirtmek amacıyla kullanılır.Temayı seçerken admin panelinde görülen bilgiler buradan verilmektedir.

Şimdi de temamızın arkaplan rengini ve link renklerini belirleyelim.

[html]

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}

body{
background: #FFF;
color: #000000;
font-family: Tahoma, Sans-serif;
font-size: 11px;
}

a:link, a:visited {
text-decoration: none;
color: #000000;
}

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

[/html]

Şimdi ise temamızın sidebar,header,footer ve kapsayıcısı olan container kısmına şekil verelim.

[html]

#container {
margin: 20px auto;
width: 780px;
padding: 0px;
}

#header{
width: 780px;
height: 100px;
}

#content{
width: 500px;
padding: 0px;
margin-left: 280px;
}

.sidebar{
float: left;
width: 220px;
margin: 10px 0px;
border-right: 1px solid #ededed;
list-style-type: none;
}

#footer{
clear: both;
border-top: 3px solid #ededed;
margin: 20px 0px;
line-height: 2.0;
padding: 10px 0px 0px 0px;
width: 780px;
}

[/html]

Basit bir şekilde style.css dosyamızı hazırladık.Temamız bunun üzerinde şekillenecek ve düzenlenecek.Şu an öğretme amacıyla oluşturduğumuz için ortaya basit bir tema çıkacaktır.Css kodları çoğaltılıp farklı şekillere sokulabilir.Ayrıca anlamanız açısından diğer dosyalarla birlikte style dosyasına eklemelerimiz de devam edecektir.

Bir önceki yazımız olan Blog Tasarımı - Görsel Toplama başlıklı makalemizde görsel toplama, tema yapımı ve wordpress tema yapımı hakkında bilgiler verilmektedir.



Etiketler:,