WordPress tema yapımı part 2

Merhaba arkadaşlar geçen dersimizde wordpress tema yapımı dersine giriş yapmıştık hatırlarsanız şuradaki yazıda bakabilirsiniz. Bu günki dersimizde ilk adım olan css dosyamızı düzenleyeceğiz. Css dosyamızda yapacağımız değişiklikler sayfa yapısını ayarlama link ve bağlantıların özelliklerini düzenleme menuleri düzenleme kısacası tasarım ve şablon ile ilgili tüm detayları düzenleme üzerinde kurulu olacaktır ilk önce bir css dosyası nasıl düzenlenir onu göreceğiz.Altta yazdığım kodlar css dosyamızın en başına ekliyoruz aslonda çok ta önemi olmayan bu kodlar sadece tanıtım amaçlıdı

/*

Theme Name: sorbize minimalist

Theme URI: http://www.sorbize.com/

Description: minimalist sorbize teması.

Author: said yavuz

Author URI: http://sorbize.com

Version: 1.0

*/

Şimdi de body kısmının düzenlenmesi yapacağım bilirsiniz ki içeriğimiz body kısmına gelir benim burada yapacağım işlemler yazı boyutu fontları ve saire gibi şeyleri düzenlemek olacak örneğin <h1> ile yazdığım yazıların boyutu rengi falan nasıl olmalı gibi şeyler.

body {

font: 62.5%/1.6em “Lucida Grande”, “Lucida Sans Unicode”, verdana, geneva, sans-serif;

color:#666;

margin:0;

border-top:2px solid #FF3366;

}

* {

margin:0;

padding:0;

}

h1 {

font-family:”Times New Roman”, Times, serif;

font-size:3.8em;

font-weight:normal;

color:#333;

letter-spacing:-1px;

margin:20px 0;

}

h1 a {

text-decoration:none;

color:#333;

}

Yukarıda da gördüğünüz gibi css kodlaması oldukça basit daha doğrusu nereye bakmasını bilenler için oldukça basit ve hemen devam ediyoruz şimdi ise footer header kısmını düzenleyeceğim arkaplan olarak resim kullanmayacağım renk paletlerini kullanacağım siz isterseniz background resmi kullanabilirsiniz hem header e hem de footer a şimdi ben burada footer için tek bir seçici oluşturacağım çok fazla kafa karıştırmaya gerek yok ama header için üç adet seçici kullanacağım biri sayfalama link ve arkaplan için diğeri üst kısmın boyutu ve dizaynı için diğeri ise de genel dizayn boyutu yeri gibi özellikler için. Aşağıdaki kodlarıda inceleyim kendimize göre düzenleyip yukarıdaki kodun devamı olarak ekliyoruz. Ama  şuradaki yazıyı okumanızı tavsiye ederim çünkü bundan sonraki işimizin büyük bir kısmı konumlandırma ile ilgili olacaktır.

#footer {

padding:20px;

text-align:right;

border-top:1px solid #eee;

margin:0;

color:#fff;

}

#header {

border-top:20px solid #FF3366;

}

#header .description {

float:right;

margin:45px 0 0 0;

color:#FF3366;

}

#header h1 {

margin:15px 0 0 0;

padding:25px 25px 40px 0;

border-bottom:20px solid #fff;

}

Arkadaşlar kusura bakmayın renklendirme yapamayacağım çünkü çok vakit alıyor yukarıdaki kodlarda da görüyorsunuz headerımızın sırası ile pozisyon arka plan rengini yazıların boyutunu fontunu ve rengini belirledik. Şimdi de navigasyon menulerimiz yani sidebar üzerindeki kategoriler menuler sayfalar bağlantılar gibi menu tarzı olan her  şeyin düzenleyecek css kodumuzu kullanacağız oldukça basit yukarıdaki kodlamalar tarzında yapacağız ve burada ise görevimiz linklerin rengi tarzı veya ek özellikler istiyorsan onları belirtmemiz gerekiyor.

#wrapper {

width:760px;

margin:0 auto;

}

#nav {

border-bottom:1px solid #eee;

padding:7px 0;

margin:0;

border-top:1px solid #fff;

height:28px;

}

#nav li {

float:left;

list-style:none;

}

#nav li a {

color:#999;

padding:5px 5px 7px 5px;

background:#fff;

font:1.6em Trebuchet MS;

margin:1px 2px 0 0;

font-weight:bold;

text-decoration:none;

display:block;

}

#nav li a:hover {

background-color:#eee;

color:#444;

text-decoration:none;

}

#nav li a.active {

background-color:#fff;

color:#FFFFFF;

text-decoration:none;

}

.clear {

clear:both;

}

#content {

margin:0 275px 0 0 !important;

margin:0 277px 0 0;

border-right:1px solid #eee;

border-left:1px solid #eee;

padding:10px 25px 30px 25px;

}

#content p {

line-height:25px;

margin:25px 0;

font-size:110%;

word-spacing:2px;

}

#content a {

text-decoration:none;

color:#333;

border-bottom:1px solid #eee;

}

#content a:hover {

color:#000;

}

#content h2 {

font-family:”Times New Roman”, Times, serif;

font-size:2.8em;

font-weight:normal;

margin:15px 0;

border-bottom:1px solid #f6f6f6;

padding:5px 0;

line-height: 30px;

}

#content h2 a {

color:#444;

text-decoration:none;

border:none;

}

Css kodlarımızı incelediğiniz aman farkedeceksiniz her bir özelliği belirtiyoruz örneğin <h2> yazı boyutunun rengini tonunu fontunu falan peki bunlar bizim ne işimize yarar niye html kodları ile düzenlemiyoruz bu konuda eğer kafanıza bir soru işareti takılmış ise heme bu adrese yönlendirelim sizi biraz bilginiz olsun bu konuda öncelikle şunu belirtmek istiyorum normal şartlarda css dosyasını hiç test etmeden yani header özelliklerini yazarken header.php yi açmadan acaba uyumlu diye kontrol etmeden devam etmezdim ama şimdilik konu bütünlüğünü korumak adına hem uygunluk açısından test edildiğinden dolayı sizleri css den php ye geçirmek istemiyorum neyse devam edelim şimdi de sidebarımız yani yan menumuzu ayarlamaya geleceğiz.

#sidebar {

width:250px;

float:right;

padding:10px 10px 30px 10px;

border-left:1px solid #eee;

border-right:1px solid #eee;

border-bottom:1px solid #eee;

}

#sidebar h2 {

letter-spacing:2px;

font-size:1.4em;

color:#333;

border-bottom:1px solid #CC0066;

padding:0 0 3px 0;

}

#sidebar ul {

list-style:none;

margin:0 0 20px 0;

}

#sidebar li {

padding:3px;

border-bottom:1px solid #f6f6f6;

}

#sidebar li a {

color:#333;

text-decoration:none;

}

#sidebar input {

width:240px;

padding:5px;

background:#fdfdfd;

color:#444;

border:1px solid #f6f6f6;

font:11px Verdana;

}

#sidebar input:focus {

background:#fff;

border:1px solid #CC0066;

}

#sidebar li a:hover {

color:#CC0066;

}

p.news {

padding:10px;

background:#D7F0B2;

margin:10px 0;

color:#537B17;

border-bottom:2px solid #BCE67D;

border-top:2px solid #BCE67D;

}

blockquote {

padding:5px 15px;

background:#f6f6f6;

margin:10px 0;

border:1px solid #eee;

}

#content ul, ol {

margin:10px 10px 10px 25px;

border-top:1px solid #eee;

}

#content li {

padding:10px;

border-bottom:1px solid #eee;

}

img {

background:#ccc;

padding:1px;

border:5px solid #eee;

}

#content h3 {

margin:10px 0;

font:160% Trebuchet MS;

color:#222;

}

a.more {

display:block;

text-align:right;

color:#2F460D;

text-decoration:none;

margin:10px 0 0 0 ;

}

a.more:hover {

text-decoration:underline;

}

textarea#comment { width: 400px; padding: 5px; }

.commentmetadata { font-size: 10px; }

Evet yukarıda da  gördüğünüz gibi sidebarımızın yerini genişliğini bağlantıların boyutunu rengini arkaplan rengini falan ekledik artı ek özellikte ekleyebilirsiniz mesela abouth(hakkmda)  gibi bir kısımda ekleyebilirsiniz sidebara daha sonra editör yardımı ile içerisine kendi hakkınızada bilgiler ekeleybilirsiniz bunun için de yapmanız gereken bir abouth seçicisi açıp özelliklerini belirtmek bunlar yeri boyutu genişliği yazı rengi arkaplan rengi aşağıdaki kodlamayı örnek olarak alabilirsiniz Not: aşağıdaki kod yukarıda yok harici olarak eklemek isteyenler düzenleme yapmadan eklemesinler çünkü verileri kafadan ekledim

p.abouth {

padding:10px;

background:#D7F0B2;

margin:10px 0;

color:#537B17;

border-bottom:2px solid #BCE67D;

border-top:2px solid #BCE67D;

}

Evet arkadaşlar css dosyamızın düzenlenmesini yaptık gelecek dersimizde php kodlarımızı yapacağız ve her float ta nasıl etki yaptığını göreceğiz daha sonra istersek css dosyasına ek özellikler ekleyebiliriz.

Yorum Yaz