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

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 5410
Joined: 19/09/2018 10:33 am

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

Post by 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 ดังนี้

Code: Select all

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

Code: Select all

<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"> อีกที่ ดังนี้

Code: Select all

<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 ที่เราต้องการลงไป ดังนี้

Code: Select all

<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
Selection_999(1633).png (1.33 KiB) Viewed 164 times
จากนั้นเราก็มาสร้าง css ดังนี้

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

Code: Select all

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

ผลลัพธ์ที่ได้
Selection_999(1635).png
Selection_999(1635).png (2.26 KiB) Viewed 164 times
ขอให้วันนี้เป็นวันที่ดี
  • Similar Topics
    Replies
    Views
    Last post

Return to “PHP Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests