Kendi Şablonumu Kendim Yaptım (Yazı Dizisi 7) - Şablona İlave Bir Sidebar Ekleme

Dün Tarifsiz Bir Gece sitesini oluştururken istediğim 3 kolonlu bir şablon kullanmaktı. Birkaç hafta önce Delfina da bana benzer bir soru sormuştum. O zamanlar yaptığım araştırmalar sonucunda kafamda bişey oluşmuştu ama tam çözememiştim.

Temel olarak yapılan şey koda ekstra şablonun komutlarını eklemek. Bunun için internette ingilizce birsürü ders var onlara da bakabilirsiniz. Ancak bunlardan birine mesaj da atmıştım. Sidebarın yeri nasıl ayarlanıyor diye. Çünkü kodda buna dair bir bilgi yok ve ortada yazı yanlarda sidebar mı yoksa bir yanda yazı diğer yanlarda sidebarlar mı olsun bunu nasıl belirliyoruz diye. Tabi cevap vermediler ama dün akşam kafamda bir ışık yandı. Bugün dikkatlice okuyunca ve bir daha deneyince anladım ki çok basitmiş. Peh. Kodu nereye koyarsan sidebar orada oluyormuş.

Şimdi adım adım başlayalım. Daha önce var olan şu şablonu değiştireceğim.

Şablonu düzenlemek için yerleşimden html düzenleye geliyoruz ve aşağıdaki bölümü buluyoruz.

/* Outer-Wrapper--- */
#outer-wrapper { width: 900px; margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont; }

#main-wrapper {
width: 660px;
padding: 0 10px 0 10px; float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Outer wrapper'ı değiştireceğiz. Koda bakarsanız burası main wrapper (yazıların girildiği bölüm ve sidebar wrapper dan oluşuyor. Bu kodu yenileyip içerisine bir sidebar wrapper daha ekleyeceğiz adı newsidebar olsun.

#newsidebar-wrapper {
width: 133px;
margin-left: 30px;
margin-right: 15px;
float: left;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Bu kodu yukardaki bölüme ilave ediyoruz. Gördüğünüz gibi sidebar wrapper ile aynı sadece ismi değişik. Bir de margin ayarları var burda hazır girilmiş ancak bu ayarları zaten istediğimiz gibi değiştirebiliyoruz. Bu kodu buraya eklemekle bitmiyor malesef bir şey daha eklemek lazım.

Yukarıdaki kodu da aşağılarda biryerde şu ifadeyi bulduktan sonra yapıştıracağız. Kodu resim olarak koydum çünkü işleme alıyor. (Yukarıdaki ve hemen aşağıdaki kodları resim olarak koyduğum için kopyalanmayacaktır. Bunun için sizin html düzenlenin içinde zaten var olan sidebar için div id kodunu resimdeki kadar kopyalayın ve tekrar yapıştırın adını da newsidebar wrapper olarak değiştirin)

Gördüğümüz gibi bu yukarıdaki kod main wrapper'ın nasıl çalışacağını gösteren kod. Bu kodun benzeri her bir wrapper için mevcut. Biz yeni sidebar eklediğimiz için bu sidebarın id kodu da yer almalı (hemen yukardaki pembe yazılı div id=newsidebar yazan kod)

İşte bu noktada sidebarın yeri belirlenmiş oluyor. Eğer mainden önce konursa (yani yazı yazılan bölüm) yeni eklenen sidebar solda çıkacak (sol sidebar-main-sağ sidebar gibi)

Eğer mainden hemen sonra konursa main-yeni sidebar-eski sidebar şeklinde dizilecek.

Örnek olarak ben sola ekledim. Ancak resimden de görüldüğü gibi mevcut genişlik ayarları üzerine bir ilave yapıldığı için sağdaki sidebar aşağıya kaydı.

Bunu düzeltmek için toplan genişlik ile herbiri için ayrı ayrı verdiğim genişliklerin eşit olması lazım. Kendi kodlarımdan düzelteceğim.

Sidebarların ikisinin de margin lerle birlikte toplamı 380 piksel benimki. Dış genişliği 900 piksel ayarlamışım. Çıkarırsam kalan 520 pikseli main kısım için yapacağım. Onun marginleri de 10+10 imiş yani 500 piksel mainbara kalan miktar oldu.

İşte Oldu....

Sol sidebarın genişliği daha dar olduğu için, kiraz resmi küçük kaldı. Sol ile sağ tarafı aynı yapsaydım düzelecekti.

Hadi bakalım buyrun değişim başlasın.