Sidebar Genişliğini Değiştirmek

Birkaç arkadaşımın göndermiş olduğu e-postalara binaen şimdi bahsedeceğim konu blogumuzun “sidebar”  kısmını nasıl genişletebilirim sorusuna cevap vermeye çalışacağım. Ancak ben bu sorunu biraz daha geniş tutup blogumuz da bulunan colonların(column) genişliklerini ve böylelikle blogumuzu nasıl boyutlandırabiliriz sorusuna genel bir cevap vermeye çalışacağım.

http://sanalduvar.googlepages.com/sidebar-ayarlari-1.jpg

Konuyu WordPress’in “default” olarak adlandırılan teması üzerinden anlatağım.
Boyutlar ve stil ayarları WordPress temaları için “style.css” dosyasında yapılmaktadır.

http://sanalduvar.googlepages.com/sidebar-ayarlari-2.jpg

Ancak tanımlamayı boyutunu değiştirmek istediğimiz dosya içerisinde id=”tanımlama” şeklinde görebilirsiniz. Bu tanımlamayı dosyayı açtığınızda sayfanın en başında görebilirisiniz. Çünkü böylelikle bölümünün içeriğini belirlemeden önce ona şeklini kazandırmak gerekir. WordPress temalarında eğer bir sidebar mevcut ise bu genelde sadece sidebar diye tanımlanırlar. Fakat iki veya daha fazla var ise bunlarda genelde l_sidebar ve r_sidebar şeklinde görmeniz mümkün yani sol(left) ve sağ(right) olacak şekildedirler.
http://sanalduvar.googlepages.com/sidebar-ayarlari-3.jpg
Açıklamayı “default” temasından yapacağımdan dolayı burada bir tane sidebar olması sebebi ile tema hazırlanırken tanımlama yani id=”sidebar” şeklinde yapımıştır.
Aynı şekilde index.php dosyası için de bir tanımlama yapılmıştır. Buradaki boyutlandırma baktığımızda class=”narrowcolumn” ile yapılmış. Bunu nereden biliyoruz sorusuna “style.css” dosyasından kontrollerimiz ile söyleyebiliriz. Çünkü id=”content” için bir boyut tanımlaması yapıladığını görüyoruz.
Ben burada sizlere sidebar’ın genişliğini artırmak kaydı ile yapacağımız değişiklikleri kaleme alıyorum. Eğer bir sidebar’ı genişletmek istiyorsan bu fazlalığı başka bir yerden kısmamız gerekiyor bunu da yandaki class=” narrowcolumn” dan yapacağımız kesme ile olacak. Eğer bu bölümün boyutlarında bir değişiklik yapmak istemiyorsak komple sayfanın genişliğini arttırmamız gerekiyor ki genişlettiğimiz sidebar sayfanın aşağısına kaymasın.
Şimdi işlemimize başlayalım “style.css” dosyasını açıp  resimde görmüş olduğunuz satırları buluyorsunuz ve sidebar’ımızın 190px olan boyutları 300px olarak büyütelim ve “magrin-left” komutu ile verilen 545px lik farkıda haliyle geri çekmek gerekecek. Bunuda yapmış olduğumuz fark kadar yapmamamız gerekir yani 435px’e düşürmemiz gerekiyor.
Bu değişiklikleri yaptıktan sonra sidebar’ımınız sayfanın altına düştüğünü göreceksiniz. Bunu düzeltmek için sayfanın genişliğinin sabit olduğunu düşünüyoruz. “default” temamız için verilen sayfa genişliğini eğer öğrenmek isterseniz, “header.php” dosyasında  id=”page” tanımlamasının “style.css” dosyasındaki stilini incemeniz yeterli.

 http://sanalduvar.googlepages.com/sidebar-ayarlari-4-5.jpg

Şimdi sayfanın altına kayan sidebarı yukarıya çekelim. Bunun için “index.php” dosyasındaki class=”narrowcolumn” tanımlamasını “style.css” dosyasındaki stil ayarlarını buluyoruz.

http://sanalduvar.googlepages.com/sidebar-ayarlari-6.jpg

Ve sidebar’ımızda yaptığımız genişlik değişikliği kadar kısaltıyoruz, yani 450px’den 340px’e indiriyoruz.
İşlemlerimizi tamamladığımızda aşağıdaki görünümü elde edeceğiz.

http://sanalduvar.googlepages.com/sidebar-ayarlari-7.jpg

Aslında yaptığımız tanımlama takibi ve .css stil dosyasındaki boyut değişikliği orantılı bir şekilde yapmakla olacak.

Umarım faydalı olmuştur, kolay gelsin!

Veysel

Veysel

Sosyal Medya ve İnternetteki gelişmeleri inceleyen, Web Tasarım Araçları, CMS(İçerik Yönetim Sistemi)leri, özellikle WordPress üzerine haberleri araştıran, 2007 yılında yayın hayatına başlayan SanalDuvar.Com'un yöneticisidir. Ana Bilim Dalı Elektrik-Elektronik Mühendisliği olan bir Sistem Mühendisidir.

You may also like...

11 Responses

  1. Avatar mustafa dedi ki:

    Selam temamın styl css kodlarında sidebar genişlik kodlarını bulamıyorum temadan temaya fark ediyormu

  2. Avatar BaybayKo dedi ki:

    Merhaba arkaraşım. WordPress temam war. Sitebarı tamamen sol almak istiyorum ama bir türlü başaramadım.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.