แก้ไขโมดูล Position 7 ใน Joomla 3

บทความแสดงตัวอย่าง การแก้ไขและการปรับแต่งโมดูล ตำแหน่ง Position 7 ในเทมเพลท Protostar ใน Joomla3 เช่น เปลี่ยนสีแก้ไขขนาดข้อความชื่อโมดูล ทำสีพื้นหลังโมดูลหรือแทรกภาพแทนสีพื้นหลังโมดูล ช่วยทำให้เว็บไชต์ของท่านมีสีสันเพิ่มมากขึ้น

ตัวอย่างการแก้ไขไฟล์เพจในหน้านี้ ผู้เขียนทดลองทำในเครื่อง localhost ด้วยโปรแกรม MAMA ซึ่งการแก้ไขกรณีนี้ จะมองภาพรวมการแก้ไขได้ง่ายกว่าบนโฮทจริงๆ 

คลิกที่เก็บไฟล์และโฟล์เดอร์ D:\MAMP\htdocs\myweb\templates\protostar\css\template.php 

เมื่อเจอไฟล์ เพจที่ชื่อ template ให้คลิกขวา ใช้ Edit with Noteped เปิดขึ้นมาแก้ไข ตามภาพตัวอย่างในหัวข้อต่อไป

ตำแหน่งไฟล์ที่จะแก้ไข .well อยู่ที่บรรทัด 2139 มีตัวแปรเยอะแยะไม่รู้คืออะไร แต่พอเดาได้ เช่น background-color: #f5f5f5; เปลี่ยนสีพื้นให้เป็นสีอื่นๆ 

border: 1px dotted #e3e3e3; ขนาดและสีของเส้นขอบโมดูล 

border-radius: 4px; ความโค้งมนของการขอบกรอบโมดูล

padding: 12px; ให้ข้อความชื่อโมดูลห่างขอบซ้ายมือ 12px

หากต้องการใช้ภาพเป็นพื้นหลังของกรอบโมดูลให้อัพโหลดไฟล์ภาพไปไว้ในโฟลเดอร์ templates/protostar/images  เช่น ไฟล์ภาพ bullet.jpg

                        

แก้ไขไฟล์เพจ จากเดิม background-color: #f5f5f5; แก้ใหม่ให้เป็น background: url(../images/bullet.jpg)left top repeat-x; เพื่อแทรกภาพแทนสี พื้นหลังโมดูล Position 7 จบการแก้ไขโมดูล Position 7 สำหรับ joomla3 แต่มีข้อเสียตรงที่ว่า เมือผู้อ่านสร้างโมดูลขึ้นมาใหม่ ภาพที่แทรกตำแหน่งนี้ จะเป็นภาพเหมือนกันหมด อาจจะไม่ถุกใจ ผู้เขียนจะอธิบายวิธีการแทรกภาพในโมดูลแบบแยกคลาส ก็คือให้สามารถแทรกภาพแบบอิสระได้ทันที่ แต่บทความนี้ แนะนำหลักการพื้นฐานการแก้ไขเท่านี้ก่อน