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:09 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) สามารถเลือกรูปแบบการแสดงผลได้ทั้งแบบมีกรอบสีฟ้า หรือไม่มีกรอบสีฟ้า +การแสดงผลหน้าเว็บของ 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}}

Personal Tools
Creative Commons License
STKS Online Learning โดย http://stks.or.th/wiki อนุญาตให้ใช้ได้ตาม สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน 3.0 ประเทศไทย.