วิธีทำ เทมเพลท 2 คอลัมน์
ให้มี 3 คอลัมน์ Sidebar ด้านขวา 2 คอลัมน์
วันนี้ผมจะมาพูดถึง วิธี การปรับแต่ง Template จาก 2 คอลัมน์ ให้มี 3 คอลัมน์ นะครับ โดยจะมี 1 คอลัมน์ คือในส่วนของ Content และ 2 คอลัมน์เล็ก ในแถบของ Sidebar โดยจะใช้ธีม Minima เป็นแม่แบบหลัก ตามที่ผมได้เคยกล่าวไว้นะครับ ด้านล่างนี้จะเป็น รูปแบบ ตัวอย่าง ที่จะทำออกมานะครับ (หรือเหมือน หน้าบล็อกของผมในตอนนี้แหละครับ)
เริ่มแรก ตามเคยนะครับ Login แล้ว ให้ไปที่ รูปแบบ -> แก้ไข HTML และติ๊ก Checkbox ที่ ขยายแม่แบบเครื่องมือ ตามภาพด้านล่างเลยครับ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)
1.เริ่มจาก แก้ไข CSS ของ Template นะครับ เป็นการปรับขนาดของธีมครับ ให้ลบ 3 บรรทัด ตามภาพด้านล่าง ได้เลยครับ
ลบส่วนที่ 1
ลบส่วนที่ 2
ลบส่วนที่ 3
2.ปรับขนาดของส่วนต่างๆ ใน CSS ตามนี้นะครับ
ในส่วนของ #outer-wrapper ให้ปรับขนาด จาก 660px เป็น 960px
และ ในส่วนของ #main-wrapper ให้ปรับขนาดจาก 410px เป็น 530px และจัดต่ำแหน่ง ไปด้านซ้าย ตามภาพด้านล่างเลยครับ
ส่วนนี้ เพิ่มโค็ดจัด ซ้าย ตามภาพนะครับ
3.ถัดมา ให้ค้นหา โค็ดนี้ครับ
4.และทำการ เพิ่ม โค็ด CSS สำหรับ สองคอลัมน์ ทางด้านขวา โดยการเพิ่มโค็ด ต่อไปนี้ครับ
เริ่มแรก ตามเคยนะครับ Login แล้ว ให้ไปที่ รูปแบบ -> แก้ไข HTML และติ๊ก Checkbox ที่ ขยายแม่แบบเครื่องมือ ตามภาพด้านล่างเลยครับ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)
1.เริ่มจาก แก้ไข CSS ของ Template นะครับ เป็นการปรับขนาดของธีมครับ ให้ลบ 3 บรรทัด ตามภาพด้านล่าง ได้เลยครับ
ลบส่วนที่ 1
ลบส่วนที่ 2
ลบส่วนที่ 3
2.ปรับขนาดของส่วนต่างๆ ใน CSS ตามนี้นะครับ
ในส่วนของ #outer-wrapper ให้ปรับขนาด จาก 660px เป็น 960px
และ ในส่วนของ #main-wrapper ให้ปรับขนาดจาก 410px เป็น 530px และจัดต่ำแหน่ง ไปด้านซ้าย ตามภาพด้านล่างเลยครับ
ส่วนนี้ เพิ่มโค็ดจัด ซ้าย ตามภาพนะครับ
3.ถัดมา ให้ค้นหา โค็ดนี้ครับ
#sidebar-wrapper และทำการแก้เป็น #column_wrapper และแก้ขนาดเป็น 410px และจัดชิดขวา ดูตัวอย่างได้ตามภาพด้านล่างเลยครับ 4.และทำการ เพิ่ม โค็ด CSS สำหรับ สองคอลัมน์ ทางด้านขวา โดยการเพิ่มโค็ด ต่อไปนี้ครับ
#sidebar-top{
clear:both;
}
#sidebar-right{
width:200px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#sidebar-left{
width:200px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
จริงๆ จะเอาไปไว้ตรงส่วนไหนของ CSS ก็ได้ครับ แต่ถ้าไม่รู้จะไปวางตรงไหนดี ก็วางตามภาพเลยครับ
5.จากนั้นให้ทำการ ค้นหา โค็ดนี้ครับ <div id='sidebar-wrapper'> และทำการแก้ไข ตามภาพด้านล่างครับ
เสร็จแล้วทำการ เพิ่ม โค็ดนี้เข้าไปอีกทีนึงครับ<b:section class='sidebar' id='sidebar-top'/>
<b:section class='sidebar' id='sidebar-left'/>
โดยการเพิ่มเข้าไปที่ใต้ tag <div id='column_wrapper'> นะครับ ดูตามภาพก็ได้ครับ
เสร็จแล้ว มาทำการเพิ่ม CSS อีกทีนึงครับ โดยการ เพิ่ม โค็ด ด้านล่างไว้ก่อน Tag </head> นะครับ
/* wire frame layout tweaks */
body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:310px;}
ไม่เข้าใจ ก็ดูภาพด้านล่างเอาครับ
เรียบร้อยแล้วครับ ทำการเซ็ฟ แล้วไปดูในหน้า องค์ประกอบของหน้า ถ้าได้หน้าตาแบบ ด้านล่างก็ โอเค ครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น