в b è ä я s ™ `` SING.our.song version 31.0

โหมด : หลังจากดองมาชาติเศษๆ  *โดนตบ*
คำเตือน : ห้ามนำงานของผักออกไปแพร่เองนะคะ  !!!
โปรแกรมที่ควรใช้ดูบลอคนี้ : Firefox  เท่านั้น

-----------------------------------------------------------------------

กลับมากับ css with exteen นะคะ
อ๊ะ !  ก่อนอื่นมาดูรูปแบบธีมเป็นแบบ basic นะคะ  จิ้มดูภาพได้เลยคะ





เป็นส่วนสำหรับฟอร์มการตอบคอมเมนต์อ้ะคะ ,, ดูรูปอธิบายเพิ่มเติมคะ
เป็นแบบฟอร์มที่เราจะเขียนลงก่อนที่จะคอมเมนต์นะคะ

" /* Comment Form */
#commentform{ << ตรงนี้เป็นส่วนกล่องคอมเมนต์ทั้งหมดเลยอ้ะคะ
width:100%; <<ความกว้างของกล่องคอมเมนต์ จะมีขนาดเท่ากับความกว้างของเอนทรี่ (หรือ content )
background:#EEE; <<แบลคกลาวน์ของคอมเมนต์ ว่าเป็นสีอ้ะคะ
float:left; <<เป็นการจัดวาง ถ้าจะเปลี่ยนเป็นขวาก็ เปลี่ยนจาก left เป็น right นะคะ
}
#commentform form{
margin:5px;
}
#commentform h3{
font-size:16px; <<ขนาดของข้อความที่ขึ้นคำว่า comment อ้ะคะ
font-weight:bold;
}
#commentform .formrow{
border-top:1px solid #DDD; <<เส้นที่คั่นๆ อยู่นะ  ,, ดูรูปอธิบายเพิ่มเติมคะ
padding:2px; <<ข้อความต่างๆ ห่างจากด้านบนเท่าไร
}
#commentform label{
float:left;
width:150px; <<เป็นความกว้างของฝั่งทางด้านซ้ายอ้ะคะ
}
#commentform input.textbox{
width:150px; <<เป็นกล่องที่เราพิมพ์ข้อความลงไปอ้ะคะ  น่าจะเป็นสำหรับเวลาที่เราไม่ได้ log in อ้ะคะ
}
#commentform textarea{
width:310px; <<เป็นความกว้างกล่องที่เราพิมพ์ข้อความ เพื่อที่จะคอมเมนต์ลงไปอ้ะคะ
height:150px; <<เป็นความสูงกล่องที่เราพิมพ์ข้อความ เพื่อที่จะคอมเมนต์ลงไปอ้ะคะ
}

เป็นส่วนสำหรับใช้แสดงคอมเมนต์อ้ะคะ ,, ดูรูปอธิบายเพิ่มเติมคะ
ตามภาพด้านบนผักแยกพวกหลักๆ ออกมาให้แล้วนะคะ ตามสีแต่ละส่วนเลยคะ
แล้วค่อยมาดูโค้ดรายละเอียดกันนะคะ ~

" /* Comment (Showing Area) */
.comment{ <<เป้นส่วนของกาารตั้งค่าเบื้องต้นของส่วนที่แสดงนี้อ้ะคะ
border-bottom:1px solid #DDD; <<หมายถึงเส้นสี #DDDDDD ให้วางอยู่ด้านล่างของข้อความแต่ละคอมเมนต์ เป็นเส้นหนาทึบขนาด 1 px นะคะ
float:left; <<เป็นการจัดตำแหน่งของส่วนนี้อ้ะคะ ให้พยายามตั้งค่าตรงกับส่วน content นะคะ
margin:5px 0px 5px 0px;
padding-bottom:5px;
width:100%; <<ความกว้างของกล่องแสดงคอมเมนต์
}
.comment .post{ <<เนื้อหาของคอมเมนต์คะ
float:right; <<จัดวางให้อยู่ฝั่งทางขวา
width:330px; <<ความกว้างของเนื้อหานี้
}
.comment .post p{
margin-bottom:10px;
}
.comment .info{ <<รายละเอียดของการโพสต์ พวกวันที่ ชื่อคนโพสต์ คะ
float:left; <<จัดวางให้อยู่ด้านซ้าย (คนละตำแหน่งกับส่วนเนื้อหาคะ)
font-size:10px; <<ขนาดของตัวอักษรคะ
width:150px; <<ความกว้างของส่วนนี้ (เมื่อบวกกันแล้วต้องไม่เกิน ส่วนความกว้างทั้งหมดตั้งแรกที่เราตั้งค่าส่วนนี้นะคะ)
margin-right:10px;
}
.comment .info img{ <<ส่วนของภาพอ้ะคะ
width:32px; <<ความกว้างของภาพดิสเพลย์เรา
}

เป็นส่วนท้ายสุดของบลอคเลยนะคะ แต่ว่า Leg Menu นะ ทำหน้าที่เหมือนกับ neck (หรือ page) นะคะ
เพราะฉะนั้นตามปกติแล้วถ้าไม่ได้ตั้งค่าลง sidebars ในส่วนนี้  ก็จะไม่ปรากฏนะคะ
ถ้าใครอยากให้ส่วนนี้แสดงอะไรบ้างจะพวก links, favourite อะไรประมาณนี้
ก็ให้ไปที่เมนู manage >> theme >> widgets  ,, ดูรูปอธิบายเพิ่มเติมคะ
หลังจากนั้นก็ให้มาแก้การแสดงผลของ bottom menu ที่ส่วนโค้ด Leg Menu นะคะ
และส่วนของ Footer เป็นส่วนท้ายสุดของบลอค นะคะ จะอยู่ใต้ Leg menu เสมอนะคะ 
แล้วใต้โค้ดส่วนนี้ก็จะมีอีกอย่างนึง ที่ผักเองก็ยัดไว้เพราะเห็นว่าเอาออกแล้วบลอคเบี้ยวไปเลยอ้ะคะ
5555 555 ขออภัยนะคะที่ไม่สามารถหาคำตอบให้ได้คะ  *โค้ง*

" /* Leg Menu */
#leg{
background:url(http://g.exteen.com/t/darkapollo/belly.png) top left; <<บีจีทั้งหมดนะคะ
}
#leg .module{
background:#473e3c; <<พื้นหลัง แต่ละโมดูล (หรือแต่ช่องนะคะ)
display:inline;
float:left;
margin:0px 0px 0px 25px; <<ความห่างของแต่ละโมดูลคะ
padding:2px 0px 5px 0px;
width:730px; <<ความกว้างของแต่ละโมดูลนะคะ
}
#leg .module ul{
display:inline;
margin:0px;
padding:0px;
}
#leg .module h2{ <<การตั้งค่าชื่อหัวข้อของแต่ละโมดูล (พวก recomment, links, category อะไรแบบนี้)
font-size:12px; <<ขนาดของชื่อหัวข้อ
font-weight:bold;
display:inline;
}
#leg .module li{ <<แต่ละส่วนย่อยๆ ในแต่ละโมดูลอ้ะคะ (พวกลิงค์ต่างๆ นะ)
border-right:1px solid #CCC; <<เส้นที่อยู่ทางขวาคั่นอยู่ 1 px และสี #CCC คะ
display:inline;
padding:0px 10px 0px 10px;
}

/* Footer */
#footer{
background:url(http://g.exteen.com/t/darkapollo/footer.png) bottom left no-repeat; <<สามารถใส่ภาพ footer ตรงนี้ได้นะคะ
height:60px; << มาเซ้ตความสูงของ footer เราด้วยนะคะ
}
#footer p{
background:#EEE; <<สีพื้นหลังคะ
border-top:1px solid #CCC; <<เส้นที่อยู่ด้านบนข้อความของเอ็กทีนคะ
border-bottom:1px solid #CCC; <<เส้นที่อยู่ด้านล่างข้อความของเอ็กทีนคะ
font-size:10px; <<ขนาดตัวอักษร คะ
text-align:center; <<การจัดวางข้อความคะ
margin:5px 25px 0px 25px;
padding:5px;
}


.navbar{
float:left;
}
.commentmanage{
clear:both;
}
/*PNG support for IE*/
#header, #neck, #belly, #leg, #footer { behavior: url(/global/iepngfix.htc) }
#sidebar .module h2, #sidebar2 .module h2{
behavior: url(/global/iepngfix.htc)
}

ยัปปี้ ในที่สุดก็เสร็จแล้ว!!
ในเรื่องของเบสิกธีมของเอ็กทีน  ต่อไปจะเป็นการอัพธีมที่ผักทำนะคะ
คงต้องขอเวลาหน่อยนะคะ  เพราะกำลังอยากเขียน เรื่องราวของตัวเองอยู่พอดี
ส่วนเรื่องสอน ps รอหน่อยนะคะ แล้วก็ขอบคุณสำหรับทุกคอมเมนต์นะคะ ♥