Bu düzensiz ve çirkin görüntüyü değiştirmeye karar verdim. Bu sebeple hem özelleştirme işlemini yapacağım hem de o esnada yaptıklarımı bu yazıya not edeceğim.
İlk olarak yapmam gereken işlem tema kodunu açmak. (Bu aşamada temanızı yedeklemeniz tavsiye edilir.) </head> etiketinin yukarısında olmak üzere aşağıdaki kodu yazdık. Bu etiket arasına sayfa düzeni için gerekli CSS kodları yazılacak:
<b:template-skin><![CDATA[ /* CSS kodları gelecek */ ]]></b:template-skin>
Yukarıdaki kodu yazdıktan sonra kaydet butonuna bastığımda resimdeki hata ile karşılaştım. Panik yok.Bu durum temanın sürüm kodu ile alakalı. Benim temanın sürüm numarası 1 (öyle sanıyorum). Yukarıdaki kullandığım etikette bu yüzden bu sürüm numarası ile uyumlu değil. Sorunun çözümü ise b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' parametrelerini eklemek. Eklediğimiz yer ise kodda olduğu gibidir:
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Tema'yı kaydet butonuna tıkladığımızda bu sefer herhangi bir hata ile karşılaşmadık. O zaman artık sayfa düzenini özelleştirmeye başlayabiliriz. Ancak Yerleşim sayfasına tekrar baktığımda şu şekilde bir değişikliğin meydana geldiğini farkettim:Anladığım kadarıyla bir widget'ın gösterilip gösterilmediğine dair bilgi veren bir emote. Neyse tasarıma başlayalım, ilk olarak sayfa düzeninin arkaplan renginin siyah olmasını istiyorum:
body#layout{background:#000;}
Şimdi sıra Sidebar, Main ve rightp sectionların yan yana görünmesini sağlamak. Bunun için bazı özel yapılandırmalarda bulunuyorum. Bu yapılandırmalar sizin temanıza göre değişiklik gösterebilir, o yüzden burada devreye CSS bilgileriniz giriyor.
body#layout{background:#000;}
body#layout .hidden,
body#layout .invisible {
display: inherit;
}
body#layout .header-area,
body#layout .sidebar-area,
body#layout .content,
body#layout .right-sidebar-area{display: inline-block;left: inherit;position: relative;vertical-align: top;}
body#layout .header-area{float:left;width:30%;margin-bottom:30px;}
body#layout .sidebar-area{float: left;width: 20%;margin-top: 100px!important;margin-left: -285px!important;}
body#layout .content{width: 30%;float: left;margin-top: 90px!important;margin-left: -60px!important;}
body#layout .right-sidebar-area{float:right;width: 30%;margin-top: 80px!important;}
Bu işlemleri yaptıktan sonra Yerleşim sekmesine bakılır:Görüldüğü gibi oldukça düzenli bir hale geldi. Sizde bu şekilde sayfa düzenini özelleştirebilirsiniz.
Hiç yorum yok:
Yorum Gönderme