ก็รู้อยู่ใช่มั้ยว่ากำลังทำธีมใหม่อยู่

ทีนี้ เลยต้องมีการยุ่งกับการทำ CSS เพื่อให้ธีมออกมาแจ่ม

คนทั่วไปคงบ่นกันให้เซ่ดเลยละสิว่า แก้ยาก

แต่โครงสร้างมันนั้นง่ายมาก! ถ้าเข้าใจจริงๆ แล้ว จะแก้ไขอะไรก็สบายเลย

ก็เลยเอาโครงสร้างธีมของ Exteen เวอร์ชัน 4 มาให้ดู เวลาจะแก้ธีมจะได้รู้ตำแหน่ง

(เฮียแชมป์จะออกเวอร์ชัน 5 เมื่อไรเนี่ย ออกเมื่อไรเอนทรี่นี้หมดประโยชน์ทันใด เอวัง )

 

รูปทั้งหมด เวลาจะใช้ก็คลิกที่รูปนะครับ แล้วมันจะเปิดรูปใหญ่มาให้

ตัวสีเขียว คือผมเข้ามาแก้ไขทีหลังครับ

 

ใช้ธีม Apollo เป็นต้นแบบนะครับ เวลาแก้อะไรสำหรับมือใหม่จะได้ไม่งง

เริ่มจาก หน้าบล็อกแรกเลย ไม่มีส่วนของคอมเมนต์

ผมจะพูดแค่ส่วนใหญ่ๆ นะครับ

  • body คือส่วนใหญ่ที่สุด คลุมทั้งหมดเลย ใครรู้ HTML จะรู้ว่า body คลุมการแสดงผลทั้งหมดบนหน้าเว็บครับ
  • ส่วน #page คือตัวที่คลุมเนื้อหาบล็อกทั้งหมด ไม่คลุมพื้นหลังบล็อก (แต่คลุมพื้นหลังเอนทรี่) เวลาขยายขนาดของบล็อก ขยาย #page นี่ล่ะครับ
  • #header คลุมส่วนหัวทั้งหมด รวมทั้ง #coverimage ที่เป็นรูปหัวบล็อกด้วย เปลี่ยนรูปหัวบล็อก เปลี่ยนที่ #coverimage นี่ครับ
  • #neck คอครับคอ ส่วนคอของบล็อก บรรจุ #neck .module ที่บรรจุแถบเมนูไว้ บล็อกผมย้าย #neck ไว้บน #header ล่ะ โดยการทำ #neck ให้ absolute แล้วจับไปลอยบน #header
  • #belly ลำตัว คลุมหมดทั้ง #content และ #sidebar, #sidebar2
  • #content คลุมเนื้อหาในเอนทรี่ แถบ Navigation (Previous | Next) และคอมเมนต์ (ในหน้าคอมเมนต์)
  • .entry เนื้อหาเอนทรี่ครับ ไม่มีอะไรมาก
  • #sidebar,#sidebar2 ตัวไซด์บาร์ครับ ไว้จะพูดถึงอีกทีหลัง
  • #footer ส่วนปลายสุดของบล็อก (ความจริงบน #footer มี #leg อีกนะนี่ แต่ในรูปไม่มี #leg ก็เหมือนๆ กับ #neck นั่นแหละ เพียงแต่ #neck เป็นคอ #leg เป็นขา ) #leg จะปรากฎเมื่อเราจับเอา Widget บางตัวใส่ไว้ใกล้ๆ กับ #footer

 

จบส่วนหน้าหลัก ไปต่อกับส่วน #content ในหน้าคอมเมนต์

รูปนี้น่ะ คุณโอ๋ คอมเมนต์ที่ 13 ฝากแก้มาครับ แก้จาก .commentform เป็น #commentform

  • .entry บอกไปแล้ว
  • #commentform ส่วนโพสคอมเมนต์
  • .comment ส่วนแสดงคอมเมนต์ 1 คอมเมนต์ก็ 1 .comment เลย แยกส่วนกัน
รายละเอียดของ .comment มันเยอะครับ ใครอยากดูก็ดูได้ครับ

 

เอาละ สุดท้ายแล้ว Sidebar บ้าง

#sidebar เปลี่ยนเป็น #sidebar2 ได้นะครับ ถ้าเราไม่ได้ใช้ #sidebar

ส่วนของ #sidebar #...... ทั้งหลาย ผมจะไม่พูดนะครับ ดูในรูปน่าจะเคลียร์แล้ว

ผมพูดถึง #profile ละกันครับ

หลายๆ บล็อกเลย จะเห็นว่า ส่วนของ #profile มันไปทับส่วนอื่นอยู่

ตรงนี้แก้ได้ครับ โดยปรับความสูงของ #profile ให้เท่ากับความสูงของรูป Avatar แค่นี้ก็เสร็จแล้ว ง่ายมั้ยละครับ

 

โอ้ย กว่าจะอัพเสร็จ เหนื่อยเลย โฮกกกกก

เอาเป็นว่า จบแล้วครับ มีปัญหาอื่นๆ อีก ทิ้งไว้ที่คอมเมนต์ได้ครับ

 

ปล. แอบโปรโมต Twitter นะเนี่ย เพิ่งสังเกต