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

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

การแก้ไขไฟล์ template.css

1. เพื่อความง่ายในการแก้ไข ให้ติดตั้ง Joomla 3 ในเครื่องของเราเอง ติดตั้งแบบ Local เพื่อความสะดวกในการทดลองแก้ไข แล้วจึงอัพโหลดไฟล์ไปไว้ในเว็บไซต์จริง จากตัวอย่างได้ใช้ Xampp เป็นเว็บเซิร์ฟเวอร์ในคอมพิวเตอร์ของเราเอง และติดตั้ง Joomla 3 บน Xampp อีกที
2. ให้แก้ไขไฟล์ template.css ซึ่งจะอยู่ในโฟลเดอร์ที่เก็บไฟล์ของ Joomla เช่น joomla3adsense
3. ไฟล์จะอยู่ในโฟลเดอร์ templates/prostar/css
4. การแก้ไขให้คลิกขวาที่ไฟล์ template.css แล้วคลิก Edit

5. เลื่อนไปยังบรรทัด ที่ใช้สไตล์ชื่อ .well
6. จัดการแก้ไขคำสั่งต่างๆ ได้ตามต้องการเช่น
background-color: #ffffff; เปลี่ยนสีพื้นให้เป็นสีอื่น จากตัวอย่างจะใช้สีขาว
border: 1px dotted #e3e3e3; ขนาดและสีของเส้นขอบโมดูล
border-radius: 4px; ความโค้งมนของการขอบกรอบโมดูล
padding: 12px; ให้ข้อความชื่อโมดูลห่างขอบซ้ายมือ 12px

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

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