#2 มาแต่งธีมแจ่มๆ ให้บล็อคของคุณกัน

posted on 03 Dec 2008 09:19 by rije in HowTo

มาแต่งธีมแจ่มๆ ให้บล็อคกันดีกว่าครับ

===========================

วันนี้เสนอ ตอนที่ 2 มาแต่ง comment กันเต๊อะ!

''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

อ่านตอนที่ 1 โดยเข้าทาง Tutorial ทางฝั่งซ้ายนะครับ

เริ่มแรกเรามาดูแต่ละส่วนของส่วน comment ทั้งหมดกัน

เริ่มจากส่วนที่ 1 : กล่องใส่ข้อความ

ส่วนนี้จะไม่ยุ่งยากนักครับ ในโค้ดดูส่วน /* Comment form */

ซึ่งจะแบ่งได้ตามภาพด้านล่าง

แบ่งตามสีต่างๆ ดังต่อไปนี้

กรอบสีแดง : #commentform , #commentform form

กรอบสีฟ้า : #commentform h3

กรอบสีขาว : #commentform .formrow

กรอบสีส้ม , เส้นใต้สีเขียว : #commentform label

กรอบสีม่วง : #commentform input.textbox , #commentform textarea

แก้ไขกันใน {} ได้ตามสะดวกครับ หากต้องการใส่พื้นหลังแบบผม

ให้ใส่ไว้ในส่วนของ #commentform แล้วปรับด้านในด้วย #commentform form

===========================

ต่อมาส่วนที่ 2 : กล่องแสดงข้อความ

ส่วนนี้จะยุ่งยากนิดหน่อย หากต้องการแก้ไขเพิ่มจากโค้ดที่มีมาให้

ผมขอแนะนำแบบเพิ่มเติมแก้ไขแล้วกันนะครับ

ไปดูกันในส่วน /* Comment (Showing Area) */ จากของเดิม

.comment

.comment .post

.comment .post p

.comment .info

.comment .info img

ที่ผมได้เพิ่มเข้าไปอีกคือ

.comment .post กับ .comment .info p

และเพิ่มเติมสำหรับเจ้าของบล็อคเอง .commentmanage

ซึ่งจะอยู่ด้านล่างๆ เลยในโค้ด css คือส่วน Hide Delete คอมเม้นท์นั่นเอง

จากภาพผมได้แบ่งเอาไว้ 4 ส่วนเอามาอธิบาย

1. ส่วนสีฟ้า : .comment (จริงๆ ส่วนนี้ครอบคุมตั้งแต่ 1-3)

2. ส่วนสีส้ม : .comment .post , .comment .post p (อันนี้ไม่ได้ใช้)

3. ส่วนสีเขียว : .comment .info , .comment .info img , .comment .info p

4. ส่วนสีชมพู : .commentmanage

ไปดูโค้ดแต่ละส่วนที่สำคัญกันครับ

มาทำความเข้าใจกันก่อน

ในส่วน class ที่เรานำมาเขียนในโค้ด css

ส่วนที่อยู่ภายในระหว่าง < div >...< /div >

ซึ่งจะแสดงผลตามโค้ด css นั้นๆ เช่น class="comment" คือ .comment{}

สำหรับการทำงานดูรูปกรอบสี่เหลี่ยม 3 อันซ้อนกัน

class="comment" จะครอบคุม class อื่นๆ ทั้งหมดภายในครับ

หากเราแก้ไข class="post" หรือ .post ในโค้ด ส่วนที่เป็นสีฟ้า

ก็จะแสดงผลตามโค้ดที่เราเขียนใน .post ครับ

ไปดูโค้ดกันต่อ ตามที่ได้แบ่งเอาไว้ 4 ส่วน

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.comment
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

background:url(url ภาพ) no-repeat; --> ไม่ให้ภาพแสดงซ้ำ ส่วนนี้จะเป็นส่วนภาพ Local Disk C:
width:516px; --> กำหนดขนาดความกว้าง เท่ากับภาพพื้นหลัง
float:left; --> ให้ส่วน comment ชิดซ้าย
margin:15px 0px 5px 0px; --> จากขอบมา บน ซ้าย ล่าง ขวา
color:#c0c0c0; --> สีตัวอักษร

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.comment .post
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

margin-top:52px; --> กำหนดให้ห่างจากขอบบนลงมา จะช่วยให้พื้นหลังส่วนนี้ไม่ภาพพื้นหลังของส่วน comment แต่ต้องกำหนดให้ห่างเท่ากับส่วนสูงของภาพพื้นหลังส่วน comment ด้วย
float:left;
width:516px;
color:#000;
display:table; --> กำหนดแสดงแบบ table (แนะนำครับ)
background:url(url ภาพ); --> ส่วนพื้นหลัง

ทำ .comment .post เพิ่มอีกอันต่อจากอันนี้

width:490px; --> กำหนดความกว้างให้น้อยกว่าภาพพื้นหลังตามเหมาะสม
padding-left:25px; --> เลื่อนข้อความให้ออกมาจากทางซ้าย

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.comment .info
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

float:left;
font-size:10px;
height:93px; --> กำหนดความสูง เท่ากับความสูงพื้นหลัง
width:516px; --> กำหนดความกว้าง
background:url(url ภาพ) no-repeat; --> ภาพพื้นหลังส่วนสีเขียว

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.comment .info img
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

display:table; --> ใช้ table เพื่อให้ภาพลงมาอยู่คนละส่วนกับ post
float:right; --> ชิดขวา
padding-right:25px; --> ห่างจากขอบขวาเข้ามา
padding-top:20px; --> ห่างจากขอบบนลงมา

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.comment .info p
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

float:right;
padding-top:50px; --> ห่างจากขอบบนลงมา

ส่วนนี้คือ # จนถึง วันที่คอมเม้นท์ (อยู่ล่างรูป avatar)

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
.commentmanage
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

ส่วนนี้ไม่ต้องแก้ไขอะไร หรือหากต้องการแก้ก็ตามสบายเลยครับ แต่ของผมไม่ได้แก้ไข

===========================