วิธีแทรก icon บน Title Block Drupal 7

Translate this page to ...

Chinese (Simplified) Dutch English French German Japanese Korean Spanish Swedish
Print this pagePrint this page

การแทรก 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 ขึ้นไป)

ตัวอย่างแทรก icon บน title block drupal 7

ดูว่าบล็อก div ที่เราจะใส่ icon นั้นใช้ id อะไร เช่น ในรูปตัวอย่าง คือ

ตัวอย่างแทรก icon บน title block drupal 7

<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 ที่คุณต้องการ

ตัวอย่างแทรก icon บน title block drupal 7

จริงๆ เทคนิคนี้ไม่จำกัดเฉพาะ drupal เท่านั้น สามารถใช้ได้กับทุกเว็บที่ใช้ระบบ css ในการออกแบบหน้าตาเว็บไซต์