ใช้ Firebug ช่วยดู CSS ไอดีและคลาส เพื่อ ปรับแต่ง Templates Joomla!

บ่อยครั้งที่ผมมันเจอคำถามว่า อยากปรับตรงนี้ ตรงนั้น แก้ยังไง เปลี่ยนขนาดของตัวหนังสือ เพิ่มกรอบ เปลี่ยนสีพื้นหลัง และอีกมากมาย ใช้ Firebug ช่วยดู CSS ไอดีและคลาส เพื่อ ปรับแต่ง Templates Joomla! เอาเป็นว่าลองมาดูเครื่องมือที่ใช้งานกันแบบง่ายๆก่อน

สิ่งที่เราต้องมีหากอยาก ปรับแต่ง Templates Joomla!

1. พื้นฐานเล็กน้อยเกี่ยวกับ html และ CSS
2. ติดตั้ง Firefox ในเครื่อง ไปโหลดได้ที่ https://www.mozilla.org/en-US/firefox/new
3. หลังจากติดตั้ง Firefox แล้ว ติดตั้ง Firebug  https://addons.mozilla.org/en-US/firefox/addon/firebug/

หลังจากติดตั้งเสร็จ มาลองใช้กัน

การใช้งาน Firebug

1. ปุ่มเปิดปิด firebug
2. คลิ๊ก เพื่อใช้ในการเลือก จุดที่เราต้องการดู ว่าใช้ css แบบไหน
3. เมื่อคลิกที่ 2 แล้วลากเม้าส์มาบริเวณที่เราต้องการดู สังเกตุว่าจะมีกรอบสีน้ำเงินขึ้นมา เมื่อได้จุดที่ต้องการให้คลิ๊กปุ่มเม้าส์ซ้าย 1 ครั้ง
4. html จุดที่เราต้องการดู ในรูปจะบอกว่าเป็น  div ใช้  class ชื่อ well
5. คือ CSS ที่ใช้ .well คือ class well ในข้อ 4 ในนี้จะระบุว่า .well มีรูปแบบแบบใด และอยู่ที่ไฟล์ไหน บันทัดที่เท่าไหร่
6. หากเอาเม้าไปชี้จะรู้ว่าไฟล์เก็บไว้ที่ไหน

เราสามารถทดลองแก้ไข css ได้เลยโดยไม่กระทบกับเว็บ 

เวลาสอบถามการแก้ไขแทมเพลตจูมล่า ก็สามารถ copy code หรือ แคปเจอร์มาให้ดูแบบนี้ได้เลยจะได้ง่ายขึ้น

VDO ใช้ Firebug ช่วยดู CSS

https://www.youtube.com/watch?v=pSnjMC7T8e8

sdfsf