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 ;

Hadi kolay gelsin…

“CSS ile blogunuzu şenlendirin -1” üzerine 8 yorum

  1. Ben de aynı temayı kullanıyorum fakat header.php dosyasına bir tag belirtmeden yaptım bu işlemi. eğer #header olarak var olmayan bir tag belirtirsek CSS’de olacaktır. Çünkü dosyayı incelediğimde “#header h1” den başlıyor tanımlamalar. Ben de sadece #header olarak yaptım ve oldu. Ama bu şekilde de daha pratik olacağına eminim. Teşekkürler…

    Cevapla
  2. @müJdaT
    Haklısın dostum fakat temadan temaya değişebiliyor dostum önemli olan tema içerisinde belirtilen div id=”değişken” tanımıdır. Bende farklı alt menüleride kapsamakta bu yüzden header resmi sapıtıyordu.

    Cevapla
  3. merhaba Teakolik,
    entelektuel.com benim sitem, ana sayfada bir header ekledim.resim olarak fakat içerik ile arasında boşluk var.Bunu nasıl sıfırlayabilirim.

    yani headerdaki resimden sonra direkt olarak içerigin gelmeisni istiyorum.

    çok teşekkürler şimdiden.

    Tavsiye: Yazıların altında muteakip yorumları maile gonderen eklentiyi eklesen süper olur.direkt bütün rssler yerine istedigim yazının rss sine abone olurum.

    Cevapla
  4. @amarat
    < div id ="wrapper_top">< / div >
    Kodunu kaldırırsan sanırım boşluk kapanacaktır :)

    Cevapla
  5. Bende Müjdat’ın yaptığı şekilde yaptım. Yazdığın şekilde yapınca resim görünmüyor. Ama yazın gerçekten yardımcı oldu. Teşekkürler..

    Cevapla
  6. gzl olmuş. çok sağol.
    birde şu kullandığın yorum yaz yerindeki gülücük eklentisi, konudaki paylaş eklentisini ve benzer konular paylaşırsan minnettar olacagım. :|

    Cevapla

Yorum yapın

teakolik hamza şamlıoğlu blog logo

Wordpress altyapısını kullandığımız bu sistem, Sunucu Çözümleri firmasında yüksek performans sağlayan özel sunucularda barındırılmaktadır. Görüntülemek için en iyi Chrome tarayıcı, 1920x1080 çözünürlük ve Full HD Android telefonlarda çalışır. Ayrıca Sitedeki içeriği istediğiniz gibi çarpabilirsiniz. :)