Code ตกแต่งสำหรับ Comment Box
selector ที่เกี่ยวข้อง
#comments บล้อกทั้งหมดของคอมเม้น
#comments h1 แถบหัวข้อที่เขียนว่า Comments
#comments h2 a ลิ้งของคำว่า View All Entries
#comments h3 เป็นส่วนที่มี กล่องพิมพ์ และปุ่มกดอยู่
#comments h3 a ลิ้งที่สำหรับ ใช้กดคอมเม้นแบบ All user จะเห็นในกรณีที่เรา เข้าดูโปรไฟล์คนอื่น โดยที่ยังไม่ได้ล้อกอินเข้าระบบ
.commentEditor textarea กล่องที่ใช้พิมพ์
.commentEditor input ปุ่มกดคอมเม้น, เพิ่มความเห็น, Add comment
.comment กล่องคอมเม้นแต่ละกล่อง ที่เพื่อนๆ ได้คอมเม้นไว้แล้ว จะประกอบด้วย
.comment-picture ส่วนของรุป แต่ไม่ใช่ ตัวรูป
.comment-picture img รูปดิสเพลย์เพื่อน
หากใช้ในกรณีทำ Filter ให้กับรูป จะใช้
.comment-picture a img {Filter:----;}
.comment-picture a:hover img {Filter:ขณะชี้ที่รูป;}
.comment-text ตัวอักษรที่คอมเม้น
#comments .listitem-separator เส้นคั่นระหว่างคอมเม้น
--------------------------------------------
Code จัดกลางรูปดิสเพลย์
.comment-picture { float: none; text-align: center }
Code จัดกลางตัวอักษรที่เพื่อนคอมเม้น
.comment-text { text-align: center }
ทำตัวอักษรห่างๆ กัน
.comment-text { letter-spacing: 3px }
Code จัดกลางทั้งหมด
.comment-picture { float: none }
.comment { text-align: center }
Code ใส่ Effect ให้กับตัวอักษรคอมเม้น
.comment-text { font-size: ขนาดตัวอักษร; font-family: รูปแบบตัวอักษร; color: สีของตัวอักษร; filter:Glow(color=สีของเงาตัวอักษร, strength=ความเข้มข้นสีเงา); height: ขอบเขตความสูง; width: ขอบเขตความกว้าง; padding: 15px; }
Code ใส่กรอบ, พื้นหลัง ของตัวอักษรคอมเม้น
ใส่กรอบ
.comment-text { border: solid 2px #000000; padding: 10px }
ใส่เป็นรูป
.comment-text { background:url(---); }
ใส่เป็นสี
.comment-text { background-color: #FFFFFF; }
Code ใส่พื้นหลังให้แต่ละบล้อก
.comment { background:url(ใส่ URL รูปภาพ); }
Fixed ค่ากล่อง แล้วมี scrollBar
.comment { height: ความสูงpx; overflow: auto; }
ใส่สี scrollBar (แบบสั้นๆ)
.comment { scrollbar-arrow-color: black;
scrollbar-face-color: white;
scrollbar-track-color: white }
Code ใส่เส้นกรอบให้แต่ละบล้อก
.comment { border: solid 2px #000000; }
Code ใส่เส้นกรอบให้บล้อกใหญ่ #comments
ใส่กรอบ
#comments { border: solid 2px #000000; }
ใส่เป็นรูป
#comments { background:url(---); }
ใส่เป็นสี
#comments { background-color: #FFFFFF; }
===========================
สำหรับการใส่ปีกไก่ให้รูป 555+
ก้อเพียงกำหนดรูปดิสเพลย์ให้มาอยู่ตรงกลาง
แล้วนำรูปภาพที่เป็นปีกมาใส่ใน .comment
แต่เพื่อความสวยงาย จะจัดกลางทั้งหมดนะคับ
<style type="text/css">
.comment-picture { float: none }
.comment { text-align: center;
background:url(--รูปปีกไก่--) transparent no-repeat top center; }
</style>