การกำหนดสีให้ icon เฉพาะตำแหน่งที่ต้องการ ใน phpbb
Posted: 01/07/2019 5:05 pm
- ในการพัฒนาระบบเว็บ ให้มีความสวยงาม หรือมีรูปเล่นต่างๆ เพื่อให้ระบบเว็บหรือระบบ ที่พัฒนามีความน่าใช้งานมากขึ้น ก็คงหนีไม่พ้นการใช้งาน css เข้ามาช่วยในการทำงานของสิ่งเหล่านี้
- ซึ่งในปัจจุบันนี้ css ที่สวยๆ หรือ มีลูกเล่นเยอะ นั้นมีให้หาโหลดมาใช้งานได้มากมยตาม เว็บไซต์ ต่างๆมากมาย หรือถ้าหากใครมีึความรู้ความสามารถก็ที่สร้างขึ้นมาใช้เองได้เลย หรือไมก็นำ css ที่มีอยู่ก่อนมาปรับเปลี่ยนเฉพาะบางส่วนให้เข้ากับความต้องการของผู้พัฒนา
- จากตัวอย่าง ก็คือเป็นการปรับสี icon เฉพาะที่ปุ่มไลค์เพียงที่เดียว ใน เว็บบอร์ด phpbb
- เเรกเริ่มเดิมที เว็บบอร์ด phpbb นั้นก็มี css ที่แสดงสีของ icon อยู่เป็นมาตรทุก icon ที่มีอยู่ใน เว็บบอร์ด phpbb นั้นก็คือ สีฟ้า แต่ทั้งนี้ ถ้าหากจะเปลี่ยน icon บางตัวตัวให้เป็นสีเขียนเพียงแค่ตัวเดียวเลย icon ตัวอื่นยังเป็นสีฟ้าอยู่นั้น ก็มีวิธีการง่ายเลย
ดังนี้
1.สร้าง tag <div></div> ขึ้นมา
2.สร้าง class ใน tag <div></div> โดยในที่นี้ผมจะใช้ชื่อ class ว่า button_like ดังนี้
3.สร้าง tag <div></div> แล้วใส่ class ที่ชื่อว่า ว่า button_like_back แล้วเว้นวรรคตามด้วย คำว่า button ใส่่ไว้ใน <div class="button_like"> ดังนี้
4.สร้าง tag <span></span> แล้วใส่ class ที่ชื่อว่า unlike ให้กับ tag <span></span> โดยที่ tag <span></span> จะอยูใน <div class="button_like_back button"> อีกที่ ดังนี้
5.สร้าง tag <i></i> เพื่อใส่ สัญลักษณ์ icon โดยการกำหนด class ที่ชื่อว่า icon แล้วตามด้วยชื่อ icon ที่เราต้องการลงไป ดังนี้
ผลลัพธ์ที่ได้ ดังนี้
จากนั้นเราก็มาสร้าง css ดังนี้
1.โดยหลักการก็คือ ถ้าเราเปลี่ยนสีที่ class button .icon เลยจะทำให้ icon ทุกตัวเป็นสีเขียว
2.ดังนั้นเราจะทำการระบุถึงตำแหน่งที่แนนอนหรือเฉพาะเจาะจง ว่าเราจะเปลี่ยนที่ตำแหน่งไหน
3.ดดยวิธีการเขียนก็คือ เราจะต้องไล่จาก class ที่อยู่ก่อน icon ที่เราต้องการอยู่ ในจากตัวอย่างก็คือ unlike
4.ซึ่งเราก็สารมารถเขียนได้ดังนี้
ผลลัพธ์ที่ได้
- ซึ่งในปัจจุบันนี้ 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>
Code: Select all
<div class="button_like">
<div class="button_like_back button">
---------------เนื่อหาข้อ 4 ---------------------
</div>
</div> 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 (1.33 KiB) Viewed 192 times
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 (2.26 KiB) Viewed 192 times