Accessibility Tools

Written by Pisan Chueachatchai on . Posted in เทคนิค Joomla Template.

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

ใช้ 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/

add-firebug-to-firefox

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

การใช้งาน Firebug

how-to-use-firebug

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

get-url-css

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

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

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

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

 

sdfsf