การกำหนดสีให้ icon เฉพาะตำแหน่งที่ต้องการ ใน phpbb

[Ittichai_chupol]

- ในการพัฒนาระบบเว็บ ให้มีความสวยงาม หรือมีรูปเล่นต่างๆ เพื่อให้ระบบเว็บหรือระบบ ที่พัฒนามีความน่าใช้งานมากขึ้น ก็คงหนีไม่พ้นการใช้งาน css เข้ามาช่วยในการทำงานของสิ่งเหล่านี้
- ซึ่งในปัจจุบันนี้ css ที่สวยๆ หรือ มีลูกเล่นเยอะ นั้นมีให้หาโหลดมาใช้งานได้มากมยตาม เว็บไซต์ ต่างๆมากมาย หรือถ้าหากใครมีึความรู้ความสามารถก็ที่สร้างขึ้นมาใช้เองได้เลย หรือไมก็นำ css ที่มีอยู่ก่อนมาปรับเปลี่ยนเฉพาะบางส่วนให้เข้ากับความต้องการของผู้พัฒนา

- จากตัวอย่าง ก็คือเป็นการปรับสี icon เฉพาะที่ปุ่มไลค์เพียงที่เดียว ใน เว็บบอร์ด phpbb
- เเรกเริ่มเดิมที เว็บบอร์ด phpbb นั้นก็มี css ที่แสดงสีของ icon อยู่เป็นมาตรทุก icon ที่มีอยู่ใน เว็บบอร์ด phpbb นั้นก็คือ สีฟ้า แต่ทั้งนี้ ถ้าหากจะเปลี่ยน icon บางตัวตัวให้เป็นสีเขียนเพียงแค่ตัวเดียวเลย icon ตัวอื่นยังเป็นสีฟ้าอยู่นั้น ก็มีวิธีการง่ายเลย
ดังนี้

1.สร้าง tag <div></div> ขึ้นมา
2.สร้าง class ใน tag <div></div> โดยในที่นี้ผมจะใช้ชื่อ class ว่า button_like ดังนี้

โค้ด: เลือกทั้งหมด

<div class="button_like">
---------------เนื่อหา ข้อ 3 ---------------------
</div> 

3.สร้าง tag <div></div> แล้วใส่ class ที่ชื่อว่า ว่า button_like_back แล้วเว้นวรรคตามด้วย คำว่า button ใส่่ไว้ใน <div class="button_like"> ดังนี้

โค้ด: เลือกทั้งหมด

<div class="button_like">
<div class="button_like_back  button"> 
---------------เนื่อหาข้อ 4 ---------------------
</div> 
</div> 

4.สร้าง tag <span></span> แล้วใส่ class ที่ชื่อว่า unlike ให้กับ tag <span></span> โดยที่ tag <span></span> จะอยูใน <div class="button_like_back button"> อีกที่ ดังนี้

โค้ด: เลือกทั้งหมด

<div class="button_like">
<div class="button_like_back  button"> 
<span title="" class="unlike">
---------------เนื่อหาข้อ 5 ---------------------
</span>
</div> 
</div> 

5.สร้าง tag <i></i> เพื่อใส่ สัญลักษณ์ icon โดยการกำหนด class ที่ชื่อว่า icon แล้วตามด้วยชื่อ icon ที่เราต้องการลงไป ดังนี้

โค้ด: เลือกทั้งหมด

<div class="button_like">
<div class="button_like_back  button"> 
<span  class="unlike">
<i class="icon far fa-thumbs-up" aria-hidden="true"></i>
</span>
</div> 
</div> 

ผลลัพธ์ที่ได้ ดังนี้

Selection_999(1633).png (1.33 KiB) Viewed 746 times

จากนั้นเราก็มาสร้าง css ดังนี้

1.โดยหลักการก็คือ ถ้าเราเปลี่ยนสีที่ class button .icon เลยจะทำให้ icon ทุกตัวเป็นสีเขียว
2.ดังนั้นเราจะทำการระบุถึงตำแหน่งที่แนนอนหรือเฉพาะเจาะจง ว่าเราจะเปลี่ยนที่ตำแหน่งไหน
3.ดดยวิธีการเขียนก็คือ เราจะต้องไล่จาก class ที่อยู่ก่อน icon ที่เราต้องการอยู่ ในจากตัวอย่างก็คือ unlike
4.ซึ่งเราก็สารมารถเขียนได้ดังนี้

โค้ด: เลือกทั้งหมด

.button_like .button:focus ,
.button_like .button:hover  {
    border-color: #006600;
}
.unlike > i.icon.far.fa-thumbs-up {
    color: #006600;
}

ผลลัพธ์ที่ได้

Selection_999(1635).png (2.26 KiB) Viewed 746 times