HOT-TH.COm

.:: สังคมดีๆแห่งการแบ่งปัน ::....

คุณมี ID แล้วหรือยัง ? สมัครสมาชิก  ลืมรหัสผ่าน

หาเงินออนไลน์ งาน online โปรเจคจบ ทำ seo adword สร้างเว็บฟรี แจกสคริป

ดู: 722|ตอบกลับ: 0

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

[คัดลอกลิงก์]


90

กระทู้

0

ติดตาม

309

เครดิต

VIP

Rank: 10Rank: 10Rank: 10

Medals No.1 Medals No.2 Medals No.3 Medals No.4 Medals No.5 Medals No.6 Medals No.7 Medals No.8 Medals No.9 Medals No.10

โพสต์เมื่อ 20-6-2013 17:24:33 |ดูโพสต์ทั้งหมด
  shared Ping your blog, website, or RSS feed for Free

การแทรก 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 ในการออกแบบหน้าตาเว็บไซต์

Sponsor
ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | สมัครสมาชิก

Ping your blog, website, or RSS feed for Free

© 2013 หาเงินออนไลน์ งาน online โปรเจคจบ ทำ seo adword สร้างเว็บฟรี แจกสคริป

Check Google Page Rank

Processed in 0.211755 second(s), 13 queries .

ขึ้นไปด้านบน