Tutorial: Lebarkan size Content Body, Sidebar & Post

Assalamualaikum



Hi, okey selepas tukar background aku nak ajar korang macam mana nak lebarkan content body,sidebar dan post. Kalau nak kicikkan pun boleh. Tapi tak nampak kemas kalau kicik-kicik.

Template -- Edit Html
Tekan mana-mana dalam kotak tuh dan CTRL+F untuk memudahkan pencarian
Untuk lebarkan content korang cari code #content-wrapper { dia akan keluar seperti contoh dibawah

#content-wrapper { 
width: 760px;
margin: 0 auto;
padding: 0 0 15px; 
text-align: $startSide; 
background-color: $mainBgColor; 
border: 1px solid $borderColor; 
border-top: 0; }

Untuk tukar keleberan post entry boleh search code ni #main-wrapper {

#main-wrapper { 
margin-$startSide: 14px; 
width: 464px; 
float: $startSide
background-color: $mainBgColor; 
display: inline; /* fix for doubling margin in IE */ 
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 */ 
}

Untuk sidebar pula korang search code ni #sidebar-wrapper {

#sidebar-wrapper { 
margin-$endSide: 14px;
width: 240px; 
float: $endSide
background-color: $mainBgColor; 
display: inline; /* fix for doubling margin in IE */ 
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 */ }


Merah: Tukar pada size yang korang nak. Misalnya kalau content 1000px. Korang agihkan sidebar 300px dan post entry 700px. {300px+700px =1000px}. Faham tak apa yang aku sampaikan ni. Kalau content 1200px. Korang nak sidebar 300px je selebihnya ada 900px kan? 900px tuh untuk post entry. Hm aku rasa macam dah ajar math pula.


Purple: Yang purple ni pula untuk sidebar dan post entry belah mana. Nak belah kanan ke kiri ke. Kalau korang perasan dekat main-wrapper codenya $startside kalau korang nak letak post entry to the left just gantikan kedua-dua $startside dengan code left. Kalau dah post entry left sidebar mesti laa right kan? Gantikan $endside tuh dengan code right. Begitu laa sebaliknya. 


Ada faham? kalau tara faham jangan segan-segan bertanya. 

Nanti aku akan update tutorial DENIM TEMPLATE dekat tutorial site aku. Nantikan yee tuto berikutnya




3 comments:

  1. yunk tolong buat tuto letak iklan antara content

    ReplyDelete
  2. Thanks Leeya. Tuto yang ni senang faham sebab tengok tuto orang lain tak berapa faham ^^

    ReplyDelete