Trace:
Differences
This shows you the differences between the selected revision and the current version of the page.
| joomla:css-class-suffix 2009/05/31 10:10 | joomla:css-class-suffix 2010/08/06 09:32 current | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== ปรับแต่ง Joomla ด้วย CSS Class Suffix ====== | ====== ปรับแต่ง Joomla ด้วย CSS Class Suffix ====== | ||
| - | การแสดงผลหน้าเว็บของ Joomla จะใช้ CSS เป็นส่วนสำคัญ โดยแต่ละส่วนประกอบบหน้าเว็บสามารถปรับแก้ไขได้อิสระ เช่น การแสดงผลชุดเมนู (Memu Sets) สามารถเลือกรูปแบบการแสดงผลได้ทั้งแบบมีกรอบสีฟ้า หรือไม่มีกรอบสีฟ้า (**หมายเหตุ** ใช้ template rhuk_milkyway เป็นชุดการแสดงผลหลัก) | + | การแสดงผลหน้าเว็บของ Joomla จะใช้ CSS เป็นส่วนสำคัญ โดยแต่ละส่วนประกอบบหน้าเว็บสามารถปรับแก้ไขได้อิสระ เช่น การแสดงผลชุดเมนู (Memu Sets) สามารถเลือกรูปแบบการแสดงผลได้ทั้งแบบมีกรอบสีฟ้า หรือไม่มีกรอบสีฟ้า (**หมายเหตุ** ใช้ template <fc #ff0000>rhuk_milkyway</fc> เป็นชุดการแสดงผลหลัก) |
| {{:joomla:css-class-suffix001.jpg|}} | {{:joomla:css-class-suffix001.jpg|}} | ||
| + | |||
| + | โดยการปรับการแสดงผลชุดเมนูข้างต้นให้ทำผ่าน Administrator Control Panel แล้วเลือก Module Manager จากนั้นปรับค่าการแสดงผลชุดเมนูโดย | ||
| + | |||
| + | 1) คลิกเลือกชุดเมนู เช่น Key Concepts | ||
| + | 2) คลิกเลือก Advanced Parameters ในรายการ Module Class Suffix ให้พิมพ์เป็น _menu | ||
| + | |||
| + | {{:joomla:css-class-suffix002.jpg|}} | ||
| + | |||
| + | 3) เมืื่อ Reload หน้าเว็บจะปรากฏผลดังนี้ | ||
| + | |||
| + | {{:joomla:css-class-suffix003.jpg|}} | ||
| + | |||
| + | ===== แก้ไขการแสดงผลหน้าเว็บ ===== | ||
| + | |||
| + | **คำถาม** กำหนดให้รูปแบบการแสดงผลเนื้อหาหนึ่ง แตกต่างกับอีกเนื้อหาได้หรือไม่ ? | ||
| + | |||
| + | **คำตอบ** ทำได้ โดยบทความแต่ละบทความ หรือทุกบทความใน Section/Category สามารถกำหนดรูปแบบการแสดงผลได้อิสระแตกต่างจากบทความอื่น หรือแตกต่างจากการแสดงผลของ Section/Category อื่นได้โดยการสร้าง CSS Class และระบุผ่าน Page class suffix เช่น เมื่อคลิกเมนู Overview เพื่อเปิดบทความ Overview จะมีรูปแบบการแสดงผลแตกต่างจากบทความ Contact ที่เปิดด้วยเมนู Contact | ||
| + | |||
| + | {{:joomla:css-class-suffix004.jpg|}} | ||
| + | |||
| + | ===== เอกสารเพิ่มเติม ===== | ||
| + | |||
| + | * {{:joomla:joomla-class-suffix-guides.pdf|Joomla Class Suffix Guides}} | ||
| + | |||
| + | ===== หมายเหตุ - CSS ===== | ||
| + | |||
| + | การใช้งานส่วนนี้ผู้พัฒนาควรศึกษาคำสั่ง CSS ประกอบ | ||
| + | |||
| + | * {{:joomla:w3c-css.pdf|Cascading Style Sheets Level 2 Revision 1}} (CSS 2.1) Specification | ||
| + | * {{:joomla:css-help-sheet1.pdf|CSS Help Sheet}} | ||
| Line 10: | Line 40: | ||
| - นายบุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี | - นายบุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี | ||
| - | - นายขันธ์ศิริ อาทร เจ้าหน้าที่ระบบคอมพิวเตอร์ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี | + | |
| + | {{tag>joomla CMS CSS}} | ||
