การตกแต่ง Moudule ของ Joomla พิมพ์ อีเมล
Joomla-1.5.x - บทความ Joomla-1.5.x
วันพฤหัสบดีที่ 17 กุมภาพันธ์ 2011 เวลา 19:52
เมื่อท่านได้ทำการสร้างเว็บไซต์ด้วย Joomla แล้ว บางครั้งท่านอาจมีความจำเป็นต้องทำการปรับเปลี่ยนหน้าตาของการแสดงผลของแต่ละ Module ที่แสดงออกหน้าเว็บไซต์ให้เหมาะกับความต้องการของท่าน เนื้อหาต่อไปนี้จะอธิบายวิธีการตกแต่ง Module ด้วย Module Parameter ที่ชื่อว่า "Module Class Suffix" และการเขียน Style ใน Cascading Style Sheets (CSS) เพื่อควบคุมการแสดงหน้าตาของ Module โดยเราจะมาเรียนรู้จากการทำงานจริง ดังต่อไปนี้

เลือก Module ที่จะนำมาตกแต่ง
Module ที่จะนำมาเพื่อเป็นตัวอย่างตกแต่งหน้าตานี้เป็น module สำหรับอ่าน rss feed ซึ่งดึง feed มาจาก pantip.com ที่เรารู้จักกันดีอยู่แล้ว แต่จะเป็น module อะไรก็ไม่สำคัญ เพราะจะมีหลักการในการตกแต่งหน้าตาด้วย Style เหมือนกันอยู่แล้ว เอาเป็นว่ามันก็เป็น module หนึ่งของ joomla ก็แล้วกัน

2011-02-17_203055

module ที่ยกตัวอย่างมานี้ ผมต้องการเปลี่ยนหน้าตาให้เป็นดังต่อไปนี้
  1. เปลี่ยนสีของพื้นหลัง (background-color) ให้เป็นสีม่วง
  2. เปลี่ยนสี (color) ของตัวอักษร ให้เป็นสีขาว
  3. เปลียนสี (color) ของตัวอักษร เวลาเอา mouse ไปชี้ ให้เป็น สีเหลือง
เตรียมเครื่องมือ
เพื่อให้ง่ายต่อการทำงาน เราจำเป็นต้องมีเครื่องมือช่วยทำงาน เพื่อหา html tag (หรือ object ) ที่เราต้องการกำหนดลักษณะหน้าตา ดังต่อไปนี้
  1. Firefox Browser
  2. Firefox Add-on : Firebug
  3. Firefox Add-on : ColorZilla
  4. โปรแกรมช่วยในการโอนย้าย file จาก server เพื่อนำ file CSS (template.css) มาแก้ไข เช่น Firefox Add-on:FireFTP หรือ FileZilla
  5. HTML Editor เช่น Notepad, Edit Plus หรือ Dreamweaver และอื่น ๆ
ลงมือปฏิบัติ

1. ตั้งค่า module class suffix ใน module parameter ที่เราต้องการแก้ไข

2011-02-17_210740

  1. Login เข้า Joomla Backend -> Modules Manager -> เลือก Module ที่เราต้องการแก้ไข
  2. ที่ Module Parameters กรอก "ชื่อ class suffix" ที่เราต้องการ ในตัวอย่างนี้ จะใช้ชื่อว่า "_blueplanet" เป็น class suffix ลงในช่อง parameter 'Module Class Suffix'
  3. Save
หมายเหตุ การตั้งชื่อ class suffix จะต้องไม่มีช่องว่างระหว่างตัวอักษร

2. ตรวจสอบและยืนยัน module ที่ได้ตั้งค่า Module Class Suffix แล้วด้วย Firebug

ใช้ Firefox เปิดหน้าเว็บไซต์ ที่มี module แสดงอยู่ และเปิด Firebug (F12) เพื่อช่วยค้นหา HTML object เมื่อท่านเอา mouse ไป click ยังบริเวณ module ตัวอย่าง หน้าต่าง Firebug จะทำการแสดงรายละเอียดของ HTML Object นั้น ๆ ให้ท่านทราบ ตามภาพต่อไปนี้

2011-02-17_215206

  1. ใน Firebug จะแสดงข้อมูล Module ตัวอย่างของเรา เป็น HTML Object คือ div ที่มี attribute class="_blueplanet"
  2. ด้านขวามือของ Firebug จะเป็นข้อมูลการเขียน style ทีใช้ในการกำหนดหน้าตาของ div ในขณะนี้
หมายเหตุ
  • ในบางครั้งท่านจะเห็น attribute class ของ div tag เป็น class="moduletable_blueplanet" แทนที่จะเป็น class="_blueplanet" เนื่องจากการกำหนด output ของ module ขึ้นอยู่ Template ที่ท่านใช้



 
ป้ายโฆษณา
Web Wizard Solutions Logo