โครงสร้าง Theme ของ Exteen อย่างละเอียด

posted on 14 Sep 2008 19:44 by xvista in ExteenVista

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

ทีนี้ เลยต้องมีการยุ่งกับการทำ 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 นะเนี่ย เพิ่งสังเกต

Tags: css, exteen, exteen theme, theme88 Comments

เย้!!!

มาคนแรก...

มีประโยชน์จริงๆเลยค่ะ

งงๆอยู่เหมือนกันว่า อะไรเป็นอะไรหว่า??

#1 By ►Junsh◎ku on 2008-09-14 20:12

ขอบคุณครับ

ขอเรียนถามว่าถ้าผมจะไม่ใช้ sidebar ทั้งสองข้าง
เพื่อเปิดหน้ากลาง (Content) ทั้งหน้าเลยล่ะครับ

ตอนนี้มีปัญหาคือลองไปแก้ css ปรับความกว้าง sidebar ใหม่
แล้วใช้ได้บน firefox แต่บน ie กลับโดน
Sidebar 2 บังอยู่ดี แม้ไม่ใส่ widget ใด ๆ
ก็เลยแก้ปัญหาโดยเขียนเลเยอร์ทับ
แต่คิดว่าไม่น่าจะใช่วิธีการที่ดี

#2 By supameeh on 2008-09-14 20:15

ดีมาก!

#3 By Eddy on 2008-09-14 20:15

#2 ผมลองเปิดบล็อกดูทั้งใน IE, Firefox, Chrome แล้ว ก็ไม่มีอะไรผิดแปลกนี่ครับ big smile

#4 By xViStA on 2008-09-14 20:21

บทความชั่นเทพ

ก็อบเลยแล้วกันครับ จะเอาไปอ่านละเอียดอีกที big smile

#5 By หุ่นดีกันเถอะ on 2008-09-14 20:23

โอ้ สุดยอดมากครับ Hot!

#6 By Yashima on 2008-09-14 20:23

เยี่ยมเลยค่ะ

#7 By Lily Pixel on 2008-09-14 20:25

55 +++ รายละเอียดดีจัง

เคยคิดอยู่เหมือนกันว่าต้องชำแหละโค้ดเป็นช่วงๆ แต่ความพยายามเป็นศูนย์ เวลาแก้ทีก็เละที sad smile

ทำไปทำมาก็งง ว่าอะไรเป็นอะไร cry

#8 By ตุ้มเป๊ะ on 2008-09-14 20:31

ว่าจะบอก ส่วนปลายอ่ะสวยมากเลย ชอบ confused smile

#9 By ตุ้มเป๊ะ on 2008-09-14 20:34

OH GoOd Job+

#10 By Blue Boat on 2008-09-14 20:47

สุดยอดเลยค่ะ!!!

เผื่อจะได้เอาไปใช้แต่งธีมครั้งต่อไป >_<! Hot!

#11 By คาโอเรนจ้า on 2008-09-14 20:51

Well done!!!

#12 By เจนเนสซ่า on 2008-09-14 20:52

แก้นิดตรงกล่องใส่คอมเมนต์ครับ ที่ถูกต้องคือ
#commentform เพราะตรงนี้เป็น
<div id="commentform">

ซึ่งมันต่างกับ .commentform เพราะอันนี้จะเรียกใช้ด้วย <div class="commentform">

ครับผม..
Hot!

#13 By palermos on 2008-09-14 21:00

ครับคุณโอ๋ เดี๋ยวแก้ครับ แหะๆ question

#14 By xViStA on 2008-09-14 21:04

ตอนนี้พี่กำลังเปลี่ยน header อยู่ครับผม big smile

#15 By แพนด้าญี่ปุ่น on 2008-09-14 21:07

ขอบคุณมากเลยครับ

Hot!

#16 By MD [คนพูดมาก@สิงคโปร์] on 2008-09-14 21:09

เข้าใจกระจ่างแจ้งขึ้นเยอะเลยค่ะ

ขอบคุณนะคะ

#17 By Rhizopus ❤ on 2008-09-14 21:49

ขอบคุณมากค่า อยากลองแก้ธีมอยู่เลย cry

#18 By Zodiac.L. on 2008-09-14 21:51

ขอบคุณครับ :)
อันก่อน ลองโพส glitter มันไม่ได้ ขออภัยครับ

#20 By หมูปิ้ง on 2008-09-14 21:54

ตกใจวาบเลย เมื่อเห็นโค้ดยั้วเยี้ย sad smile

ขออนุญาต Hide คอมเมนต์ที่ 19 นะครับ sad smile

#21 By xViStA on 2008-09-14 21:56

เยี่ยมไปเลย Hot!

#22 By moodee on 2008-09-14 22:43

ขอบคุณมากคะ มีประโยชน์จริงๆ

#23 By [: j.i.n.x :] on 2008-09-14 23:14

ขอบคุณมากๆเลยค่า
พอดีมีบางตัวกำลังสงสัยอยู่เหมือนกันว่าในCSSในคือตัวไหนหว่า embarrassed

พอดีคิดจะเปลี่ยนมันซักหน่อยได้เข้ามาแล้วก็แจ่มเลยเจ้าค่ะ
ไว้วันหลังเราจะมาแก้ไขอีกทีวันนี้คงต้องไปนอนก่อนแล้วเน้อ Hot!

ปล.เพิ่งเปลี่ยนตีมใหม่เสร็จวันนี้พอดีเลยค่ะ เดี๋ยวต้องไปเปลี่ยนตัวนี้ที่ค้างค่าใจด้วย อิอิ cry

#24 By ★iam-Blight on 2008-09-14 23:46

จะลองไปปรับดูนะคับ ขอบคุณมากๆ^^

กะจะขยายบลอกให้กว้างเหมือนคนอื่นๆ
แต่ทำไม่เป็น กำลังงงพอดี จะลองดูคับ

ถ้ามีปัญหาอะไรเดี๋ยวจะคอมเมนต์ไม่ก็ ems ไปถามนะคับ

#25 By Choudate on 2008-09-15 00:20

ลืมคับ ลืม Hot!

#26 By Choudate on 2008-09-15 00:21

ว้าว เยี่ยมเลยค่ะ ขอบคุณมากเลยค่า
(อินี่ใช้วิธีก๊อป+พาสอยู่) - -

จบสิ้นกันทีกับยุคงมโข่งกับcss
อย่างนี้ต้องให้ Hot!

ไปเลยค่ะ

บลอคของยูมีปัญหาตรงที่ว่า เหมื๊อนมันจะขาดตอนอยู่

ซึ่งระหว่างเฮด กับคอนเทนเนี่ย ยูย้ายส่วนเพจลงมาไว้ข้างๆ เลยใช้โค้ดเดียวกับไซด์บาร์ปกติไป แต่ว่าตรงนั้นมันจะว่างอยู่น่ะค่ะ (สังเกตุจากที่เส้นขาวจะขาดช่วง แต่จริงๆกะให้ชนกันพอดี)
เป็นจนจะเปลี่ยนธีมใหม่แล้วยังแก้ไม่ได้เลยอ่ะค่ะ *-*)

ถ้ายังไงรบกวนช่วยดูให้หน่อยนะคะ แบบว่างงมากมายT__T

ขอบคุณมากๆเลยค่า

#27 By YüKIHIME::มีรูทและเฮียเป็นน้ำทิพย์ชโลมใจ~ on 2008-09-15 00:29

ละเอียด สรุึปมาดีจังครับ:D cry

#28 By กรรมกรไซเบอร์ on 2008-09-15 01:01

ละเอียด สรุึปมาดีจังครับ:D cry

#29 By กรรมกรไซเบอร์ on 2008-09-15 01:01

เหมาะกับเราที่ชอบผ่าตัด CSS มากเลย Hot!

#30 By Kefron Kerina on 2008-09-15 06:12

งงมา3ชาติแล้วครับ
เด๋วต้องไปลองทำดูหน่อยละ อิอิ
บอบคุณคับ Hot!

#31 By Wisor on 2008-09-15 07:22

ยอดเลยค่ะ

#32 By General เบ๊ on 2008-09-15 08:50

เจ๋งส์
กะลังจะเปลี่ยนธีมพอดีเร๊ยยยย Hot!

#33 By ilumin on 2008-09-15 08:53

ขอบคุณค่ะ ได้ความรู้มาก ขอเก็บไปศึกษาค่ะ

#34 By peewa on 2008-09-15 10:51

ปัญหาของผมมันอยู่ีท่ผมไม่รู้จะใส่อะไรในแต่ละอันตะหากครับ...
อิอิ sad smile

#35 By นิเกะ on 2008-09-15 11:52

โฮ้ ตาสว่างเลยทีเดียวเชียว confused smile

#36 By (^_^)/nana on 2008-09-15 14:03

มีประโยชน์มากมายครับ Hot!

#37 By YiUM ชีวิตจริงไม่เหมือนฝัน on 2008-09-15 14:04

แวะมาเก็บความรู้

ขอบคุณค้าาา

อยู่ในระยะหัดใช้ ฮี่ๆๆ

#38 By HeDw!g on 2008-09-15 14:17

สุดยอด คัมภีร์เทวดา big smile

#39 By st.GiZMo on 2008-09-15 16:18

เป็นประโยชน์มากมายจ้า ขอบคุณหลายๆ big smile

#40 By ผู้หญิงไร้ใจ ผู้ชายไร้รัก...T.K. on 2008-09-15 16:20

อ่อ

แล้วถ้าเกิดทำไปทำมาแล้วในส่วนCSSมันมีบรรทัดเยอะมากกกกก

ทำไงอ่ะคะ -*-
อยู่ดีๆก็มีบรรทักเต็มเลยอ่ะ TT TT,,
เวลาจะเเก้โค้ดทีลำบากมาก
หาไม่เจอ -*-

ปล.แปะดาว! Hot!