CSS ile blogunuzu şenlendirin -1

Merhaba arkadaşlar bugün sizlere birkaç örnek vererek CSS ile WordPress Temalarınıza nasıl değişiklikler yapacağınızdan bahsedeceğim.

Bu yazıyı yazmayı kendi temam Blocks2 üzerinden fikir edindim. Blocks2 temasının standardında biliyorsunuz ki Üst header kısmında logo türü bir resim yok. Ayrıca arkaplan da renkli ama bir resim konulmamış.

2 haftadır Blocks2 teması üzerinde çalışıyorum.  Açıkcası Blocks2 teması basit ve sadeliği ile ilgimi çekmişti. Çünkü huyum kurusun kendi temamı her zaman özel bir hale getirmişimdir.  Gerçi bu temaya kadar hiç anlatmadım sadece e-mail atıp soran arkadaşlara yeni yaptığım değişikliklerin nasıl olduğunu belirttim ve blogda yazdım.

Blocks2 ile  öncelikle neler yaptığımı sizlere daha önceki yazımda yazmıştım. Vakit buldukçada değiştirmeye özelleştirmeye devam ediyorum. Sizlerlede paylaşmaya çalışacağım.

Öncelikle sizlere temanızın üst kısmında eğer bir resim yoksa nasıl ekleyeceğinizden bahsedeceğim.

Temamızın Header.PHP dosyasını açalım ve aşağıdaki kodların olduğu satıra inelim.

<!– header START –>
<div id=”header”>
<div id=”title”>
<h1><a href=”<?php bloginfo(‘url’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div id=”tagline”><?php bloginfo(‘description’); ?></div>
</div>

Bu kısım temamızın üst kısmıdır. Arka plan resmimizi koyacağımız yer ise Blog ismimizin ve Sloganımızın yazdığı yer. Header.php dosyasında kendi temamda buldum. Genelde temalarda Blog isminin yazdığı yer ve slogan yeri şu şekilde yazar.

<?php bloginfo(‘url’); ?>/”>
<?php bloginfo(‘name’); ?>
<?php bloginfo(‘description’); ?>

Bu kodlar ile PHP içerisinde Blog adı ve başlığı yazılır.  Arka planımızı bu kısma yerleştirmek için yeni bir Div tagı açıyoruz ve içine özel olarak ekleyeceğimiz id yi belirtiyoruz.

<!– header START –>
<div id=”headertea”>
<div id=”header”>
<div id=”title”>
<h1><a href=”<?php bloginfo(‘url’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div id=”tagline”><?php bloginfo(‘description’); ?></div>
</div>

Şimdi dikkat ettiyseniz  üstteki kodlarda farklı olarak  <div id=”headertea”> eklemesi yaptım.  Buradaki “id” CSS dosyamız içerisine belirteceğimiz kodlar ile üst kısımın arka planına resim eklemesi yapacak.  Yani CSS dosyamın içerisine  bir tane daha değişken tanımlayacağım bu değişkende  “headertea”  olacak. Son olarak </div> ile div kısmımızı kapatmamız lazım.

Peki nerede kapatacağız ?

İşte orası biraz kafanızı karıştırabilir ama mantığını çözdüğünüz zaman bu iş tamamdır diyebilirsiniz.

Üst kısımda header.php içerisinde Blog başlığımızı ve sloganımızı bitirdiğimiz yerde </div> ekleyerek div tagımızı kapatıyorum.

<!– header END –>
<!– Bu div tagı header resimi için–>
</div>

Benim temamda zaten tema yapımcısı sağolsun Header kısmının nerede başladığını  ve nerede bitirildiğini yazmışlar. Tam bittiği yere </div> yaparak kapanışı yaptım.

Şimdi CSS dosyamızı düzenleme sırası geldi.

Still dosyamız style.css ye geliyoruz. Bu dosyamız içerisinde Header kısmına ekleme yapacağız.

/* header START */
#header h1 {
font-style:normal;
font-weight:normal;
letter-spacing:-1px;

}

gibi kodlarımızı görebiliriz.  Yeni değişkenimizin adını ne yapmıştık ?  headertea  Div tagımızda id olarak “headertea” olarak belirlediğimiz değişkenimizi tanımlıyoruz.

#headertea {
background: url(images/header-bg.jpg) no-repeat;
height: 60px;
background-position:0px 100%;

}

Bu kodu açıklayayım.

#headertea =  Header.php içerisinde Blog başlığı ve Blog sloganının olduğu kısma <div id=”headertea”> olarak açmıştık bu değişkenin tanımlanması.

background: url(images/header-bg.jpg) no-repeat; = Bu kodda ise arka plan resminin yerini belirtiyoruz.  URL yazan yerde temamızın içerisindeki images klasöründe header-bg.jpg dosyasının okunmasını sağladık.   no-repeat ise resmi tekrarlamasını engelliyoruz. Eğer norepeat koymassak resmimiz koyacağımız yere ufak gelirse 2. yada 3. kez aynı resmi yan yana koyarak boşlukları kapatır.

Üst kısımdaki bölümde benim 1000 yatay genişlik 60 da yükseklik.  Adobe Photoshop programımda bu ölçülerde logo resmimi yaptım ve temamın içerisinde images klasörüne resmimi upload ettim.

CSS kodumuzuda yukarıdaki gibi yapıp Style.css dosyasına eklediğimiz zaman Blogumuzun üst kısmında resmimizi görebileceğiz.

Ayrıca  şunuda belirtmeden geçemeyeceğim bazı temalarda background: url(images/header-bg.jpg) no-repeat; kısmı background: #FF0000; gibi renklendirilmiş bir şekilde olabilir. Eğer böyleyse renk kodunu silip arkaplan resmimizi url ile gösterebiliriz.  Böylelikle arka plan resmi için header.php içerisinde kodlarla oynamanıza gerek kalmayacaktır.

Bu arada Tema’yı kullanmak isteyenler varsa ;

• Blocks2 Orjinal versiyonu ve önizlemesi
• Blocks2 Orjinal versiyon Türkçe Dil dosyası
• Blocks2 düzenlediğim yeni versiyon ve önizlemesi
• Blocks2 düzenlediğim yeni versiyon Türkçe Dil dosyası
  

Hadi kolay gelsin…