http://samarn.multiply.com/journal/item/33
Layout Multiply Map (ผมตั้งชื่อเอง) เป็นแผนผังของธีมมัลติพลาย ผมแกะดูและเอาส่วนของโครงสร้างหลักๆ มาทำเป็นผังเพื่อให้ง่ายต่อการเขียน CSS ว่าอะไรอยู่ตรงไหน ผมมองมันหลายแบบ
1. ผมมองมันเป็นกล่องหลายๆ อันที่ซ้อนกัน
2. ผมมองมันเป็นเหมือนกับ Directory ในคอมพิวเตอร์
มันเป็นเช่นนั้นจริงๆ ครับ มาดูกันเลย....
จากภาพมองให้มันเป็นกล่องหลายอันนะครับ...จะได้เข้าใจง่าย
1. กล่องนอกสุด มีสีแดงชื่อ bodywrap
2. ใน bodywrap มีกล่องอยู่ 3 อัน คือ header, contentwrapper, ownedfooterc
3. contentwrapper มีกล่องอยู่ 2 อันคือ owner_nav_wrapper, page_start_wrapper
4. owner_nav_wrapper มีกล่องอยู่ 4 อัน คือ owner_nav, page_owner_title, subnavc, subnav
5. page_start_wrapper มีกล่อง คือ page_start, ตาราง 2 คอลัมภ์ มีกล่อง คือ maincontent, rail
6. maincontent มีกล่อง homewrapper > maincontentdiv > itemboxsub, itemshadow, itembox
8. rail > railstart, railbody, railend
9. railbody > userlogo, railsep, UL,Li,iframe
10. ownedfooterc > ownedfooter
นี้เป็นเพียงอันหลักๆ เท่านั้นนะครับ ยังมีย่อยๆ อีกมาก จะเอามาบอกต่อในโอกาสต่อไปนะครับ...
พอรู้อะไรเป็นอะไร ก็จะทำให้เราจัดการกับการแต่งบ้าน Multiply ง่ายขึ้นครับ เช่นขยายขนาดของธีม เราต้องหากล่องที่ใหญ่กว่า กล่องที่อยู่นอกสุดก็คือ bodywrap คือขยายอันนี้ก่อน แล้วต่อด้วยกล้องที่อยู่ใน bodywrap ครับ
ขยายธีม ลำดับขั้นตอนดังนี้
1. ขยาย bodywrap ด้วย width : 900px; เป็นต้น
2. ขยาย header, ขยาย contentwrapper, ขยาย ownedfooterc ด้วยความกว้างเดียวกันกับ bodywrap
ขยายส่วนแสดงเนื้อหา ให้กว้างตามธีมที่เราขยายออก
1. ขยาย page_start ให้กว้างเท่ากับ bodywrap ในกรณีไม่มีขอบ หากใส่ขอบ จะต้องลบขอบออกด้วย
2. ขยาย itemboxsub ด้วย max-width: 730px; ขยายได้ใหญ่สุด โดยเอา page_start - rail เป็นความกว้างของ profile ด้านขวา หากมีขอบลบออกด้วย ง่ายๆ ผลรวมทั้งหมด จะต้องเท่ากับความกว้างของ bodywrap
3. ขยาย itemshadow และ viewmore
