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>