การแทรก icon บน title block ทำเพื่อสร้างจุดเน้นของสายตาผู้ชม ให้มองเนื้อหาเป็นกลุ่มหมวดหมู่มากขึ้น และความเป็นระเบียบสวยงาม จริง ๆ ก็มีโมดูล block icons ใช้กัน แต่มีเฉพาะ drupal 6 เท่านั้น ส่วน drupal 7 แนะนำว่าให้ใช้ css ช่วยในการจัดการ ไม่ต้องไปแก้ไข drupal core เพราะเวลาอัพเดทก็ไม่ต้องคอยจำว่าเราไปแก้โค้ดระบบตรงไหนไว้บ้าง :-)
ขั้นตอนวิธีทำ
แบบที่ 1 ใส่ icon เหมือนกันหมดทุกบล็อก
- แทรก css ชุดนี้เข้าไปในไฟล์ style.css ในโฟลเดอร์ชุดธีม
.block h2 {
padding-left: 1.5em;
background: url(/themes/garland/images/menu-leaf.gif) no-repeat;
}
หมายเหตุ:
- ในบางธีม title block ใช้ h2 บางธีม title block ใช้ h3 ต้องเช็คด้วยนะครับว่าธีมที่เราเลือกใช้นั้นใช้ header ระดับไหน
- เปลี่ยน /themes/garland/images/menu-leaf.gif ให้เป็นรูป icon ที่คุณต้องการ
แบบที่ 2 กำหนด icon ไม่เหมือนบล็อกอื่นๆ
- คลิกขวาเปิด Inspect element ในโปรแกรม Google Chrome หรือใน Firefox ก็ได้เหมือนกัน (เวอร์ชั่น 11 ขึ้นไป)
ดูว่าบล็อก div ที่เราจะใส่ icon นั้นใช้ id อะไร เช่น ในรูปตัวอย่าง คือ
<div id="block-user-login" class="block block-user" class="block block-user">
เมื่อเราได้ div id มาแล้ว ก็ใช้ css จัดการดังนี้
#block-user-login h2 {
padding-left: 1.5em;
background: url(/themes/garland/images/task-list.png) no-repeat;
}
หมายเหตุ:
- เปลี่ยน /themes/garland/images/task-list.png ให้เป็นรูป icon ที่คุณต้องการ
จริงๆ เทคนิคนี้ไม่จำกัดเฉพาะ drupal เท่านั้น สามารถใช้ได้กับทุกเว็บที่ใช้ระบบ css ในการออกแบบหน้าตาเว็บไซต์
