ไฟล์ css ในเทมเพลตของเรานั้น จะมีด้วยกัน 2 ไฟล์หลัก ก็คือ
1. ไฟล์ css ชื่อ (ชื่อเทมเพลต).css
อาทิเช่น tonnum.css โดยจะเป็นไฟล์หลักในการกำหนดรูปแบบของ css ในเทมเพลต โดยเบื้องต้น ในแต่ละ Div set เราได้กำหนด css ไว้ให้แยกจากกัน
/*** top ***/#top{ background:#fff; padding-top:10px; padding-bottom:20px;}#top-body{ padding:0px;}#social{ padding-top:15px;}
/*** slide ***/#slide{padding:0px; overflow:hidden !important;}.favth-carousel-inner{ margin:0px !important;}.favslider-carousel .favth-carousel-indicators{ margin-top:20px !important;}
/*** recommend ***/#recommend{ padding-top:3%; padding-bottom:2%;}#recommend h2{ padding-bottom:10px;}
นั้นหมายความว่าในแต่ละ div set จะสามารถกำหนดเฉพาะจุดของ Module ได้โดยเพิ่ม css ลงในแต่ละส่วน อาทิเช่น ต้องการเพิ่มสีพื้นหลังของ div set ที่ชื่อ recommend ท่านก็เพิ่มดังนี้
/*** recommend ***/#recommend{ padding-top:3%; padding-bottom:2%;background:#000000;}#recommend h2{ padding-bottom:10px;}
จะเห็นว่าเราได้เพิ่มสีพื้นหลังเป็นสีดำ ให้กับในส่วน div set ที่ชื่อ recommend
ตัวอย่างการเปลี่ยนสีพื้นหลังใน Div Set ที่ชื่อ recommend ให้เป็นสีดำ
2. ไฟล์ css ชื่อ (ชื่อเทมเพลต)-m.css
อาทิเช่น tonnum-m.css ในไฟล์นี้ จะเป็นตัวกำหนดการปรับขนาดของ css จากไฟล์หลัก (ตามข้อ 1) ให้ทำการแสดงผลรองรับในขนาดมือถือต่างๆ โดยเบื้องต้น เราแยกไว้ดังนี้
/* เมื่อความกว้างต่ำกว่า 1360px max*/@media screen and (max-width: 1360px) {
}/* เมื่อความกว้างต่ำกว่า 1024px max*/@media screen and (max-width: 1024px) {
.favth-carousel-caption h3 { font-size:2em !important ;} .favslider-caption-description { font-size:16px !important;}}
/* เมื่อความกว้างต่ำกว่า 768px max*/@media screen and (max-width: 768px) { #logo{ text-align:center;} #banner img{ text-align:center !important; margin:0 auto 0 auto; display:block; }}
/* เมื่อความกว้างต่ำกว่า 500px max*/@media screen and (max-width: 480px) {
#social { text-align:center; padding-top:10px;} .favth-carousel-caption h3 { font-size:1.4em !important ;} .favslider-caption-description { font-size:14px !important;}}
ซึ่งตามหลักการแล้ว เทมเพลตจะมองหาค่าที่กำหนดจากบรรทัดล่างสุดก่อนเสมอ ถ้าไม่พบการกำหนดใดๆ ก็จะเลื่อนขึ้นมาตามค่าต่างๆ จนถึงบนสุด จากหลักการนี้ เราเลยได้แยกขนาดความกว้างเอาไว้ โดยให้เทมเพลต มองจากขนาดต่ำสุดก่อน ถ้าไม่พบ ถึงค่อยขยับขึ้นมาดูในขนาดที่ใหญ่ขึ้นนั้นเอง แต่เราได้แยกในส่วน Blog เอาไว้ต่างหาก ที่ด้านล่างของไฟล์ css เพื่อให้เทมเพลตตรวจสอบก่อนเสมอ
** โปรดอย่าสลับการจัดเรียง เพราะจะสงผลในส่วนการแสดงผลที่เพียนไป
