แต่งกล่อง comment กันดีกว่า ^ ^
posted on 30 Oct 2009 17:19 by itbasicแต่งกล่อง comment ให้หลากหลายด้วย css
ลักษณะกล่อง comment แรกเริ่ม basic จะเป็นเช่นนี้
การแก้ไขส่วน comment จะแตกต่างตรงที่ว่า กด preview ไม่ได้!(เพราะหน้า preview มันไม่โผล่) ดังนั้นถ้าไม่อยากเสียเวลาก็ต้องศึกษาดูให้ดีก่อนนะจ้ะ
บทนี้จะค่อนข้างไปเร็ว ใครตามไม่ทันลองศึกษาบทที่ 1-3 ดูก่อนจ้า
Step 1 เอาเส้นออก
ให้ไปดูที่ #commentform .formrow ลบบรรทัด border ออกครับ
#commentform .formrow{
border-top:1px solid #DDD; <<<ลบบรรทัดนี้ออก
padding:2px;
}
แค่นี้เส้นบรรทัดก็หายไปแล้ว
Step 2 ขยายส่วน comment
ไปที่ #commentform ครับ แก้ตรง width:100%; ใส่เป็นค่า px ได้เลยตามความต้องการของเราแต่อย่าให้เกินความกว้างของ #page
และถ้าใครต้องการใส่ความสูงเองก็เติม height:ความสูงที่ต้องการ; เข้าไป
ของผมปรับ width เป็น 600px นะครับ ส่วน height เป็น 400px
#commentform {
width:600px;
height:400px;
background:#EEE;
float:left;
}
ตอนนี้กล่อง comment ขยายออกแล้ว
*ขนาดปกติของกล่อง comment ที่ยังไม่แก้โดยประมาณคือ width:490px; height:312px;
Step 3 ใส่ background
เตรียมรูป background ขนาดพอเหมาะกับกล่อง comment ของเรา โดยขยายความสูงและความกว้างเล็กน้อย เผื่อค่า padding และ margin
ของผมทำ bg มาที่ขนาด 610*410 px
จากนั้นแก้ตรงส่วน background ของ #commentform ได้เลย
#commentform {
.
.
background:url(ลิงค์รูป) no-repeat;
.
}
ออกมาเป็นแบบนี้ครับ
*ตัวอย่างไม่ได้สื่อความหมายอื่นนะครับ อย่าคิดมาก อิอิ
*ถ้าอยากเปลี่ยนตัวอักษรให้เข้ากับ bg ก็ใส่ color:สีที่ต้องการ; เข้าไปเลยนะครับ
Step 4 กล่องโปร่งแสง;
textarea มันบัง bg อยู่ครับ เราก็ทำให้ textarea ใสซะเลย
ไปที่ #commentform .textarea เพิ่มส่วน background:none; เข้าไป เพื่อทำให้ bg ใส
#commentform .textarea{
width:310px;
height:150px;
background:none;
}
ใสแล้วครับ
*หรืออาจจะใส่รูปอื่นๆ เข้าไปเป็น bg ใน textarea ก็ได้นะครับ ^ ^
แต่สำหรับผู้ใช้ IE จะมีแถบ scroll bar อยู่ข้างๆ ตามรูป แต่ผู้ใช้ firefox จะไม่มีนะครับ
ประเทศเรามีคนใช้ IE สูงถึง 70% ดังนั้นเราต้องคิดถึงพวกเขาด้วยนะครับ เอาแถบ scroll bar ออกไปซะ โดยเพิ่ม overflow:hidden; เข้าไปใน #commentform .textarea
#commentform .textare{
.
.
overflow:hidden;
}
แค่นี้ผู้ใช้ IE ก็เห็น bg เราเต็มๆ ตาแล้ว
Step 5 ตกแต่ง
เพราะเราขยายขนาดกล่อง comment เลยทำให้รูปหน้าไม่ค่อยสวย ไม่พอดีพื้นที่ครับ เราก็ต้องปรับแก้ให้สวยงามหน่อย
ไปที่ #commentform .formrow แก้เพื่อเพิ่มระยะห่างให้แต่ละบรรทัด
มีหลายวิธีครับแต่ผมเลือกใช้ margin-top:10px; เพื่อปรับตัวระยะบรรทัดให้ห่างกันอีก 10 px
#commentform .formrow{
.
.
margin-top:10px;
}
บรรทัดด้านบนจะห่างกันพอสวยงามแล้วนะครับ คราวนี้ก็ไปที่ #commentform .textarea บ้าง ใส่ margin เช่นเดียวกัน โดยผมจะใส่ margin-top:20px; และ margin-bottom:20px; เพื่อเว้นช่องว่างให้ textarea ทั้งด้านบนและด้านล่างครับ(แล้วแต่ขนาดของกล่อง comment ที่คุณใส่ในตอนแรก)
#commentform .textarea{
.
.
margin-top:20px;
margin-bottom:20px;
}
ตอนนี้ผมพอใจในการจัดหน้าแล้ว
Step 6 เล่นกับปุ่ม
ตอนนี้ปุ่มต่างๆ เช่นปุ่ม submit ยังไม่ถูกใจเราก็ต้องแก้ไขให้มันใสเหมือนชาวบ้านเขา
คราวนี้ให้ "เพิ่ม" ส่วน input{....} เข้าไปนะครับ เพื่อแก้ไขส่วนของปุ่ม โดยผมกำหนดให้พื้นหลังใสโดยใช้ background:none; เช่นเคย
input {
background:none;
cursor:pointer;
}
จะเห็นว่า background ใสแล้ว ,บรรรทัด cursor:pointer; จะทำให้เกิดรูปมือ เวลาเราเอาเมาส์ไปวางนะครับ
*หากต้องการเปลี่ยนสีตัวอักษรให้ใช้คำสั่ง color:สีที่ต้องการ;
Step 7 เล่นกับปุ่มแบบ Advance
จาก step 5 เราเปลี่ยนทุกปุ่มพร้อมกัน แต่บางคนอาจจะไม่พอใจอยากเปลี่ยนทีละปุ่ม โอเคจัดให้
หลักๆ ปุ่มในกล่อง comment จะมี 5 ปุ่ม นั่นคือ " B " , " I " , " U " , " Link " และ "Submit" ถ้าเราจะแก้ทีละปุมต้องใช้ keyword ดังกล่าวเข้าช่วย โดยใช้
input[value="keyword"]{......}
ตัว keyword นี้ต้องใส่ให้ถูกนะครับ " B " , " I " , " U " , " Link " จะต้องเว้นช่องว่างระหว่าง " " และ keyword ด้วย 1 ช่อง ส่วน "Submit" ไม่ต้องเคาะนะครับ
ตัวอย่าง
input[value=" B "]{
background:#00f;
color:#000;
border:1px dotted #000;
}
input[value=" I "]{
background:#000;
color:#fff;
border:1px solid #fff;
}
input[value=" U "]{
background:#fff;
color:#000;
border:1px double #000;
}
เอาแค่ 3 ปุ่มก็ยาวเหยียดแล้ว ลักษณะเมื่อรวมกับ step ที่แล้วก็จะเป็นแบบนี้
เพื่อนๆ สามารถขยายขนาด ปรับสี หรืออื่นๆ ได้ตามความพอใจ รวมทั้งอาจจะใส่รูปเป็น bg ด้วยเลยก็ได้เช่น
input[value=" U "]{
background:url(ลิงค์รูป);
color:#000;
border:none;
width:46px;
height:46px;
}
จะออกมาเป็นแบบนี้
ที่นำมาให้ดูเป็นตัวอย่างการแก้ไขในส่วนกล่อง comment นะครับ เราต้องนำไปประยุกต์เพื่อใช้กับบล้อกตัวเองจ้า
==============
จริงๆ จะทำตรงส่วนช่องแสดง comment ด้านล่างด้วย แต่ทำไปทำมายาวอีกแล้ว เลยขอยกยอดไป entry หน้าแล้วกันครับ
ว่าแต่ว่าทำบล็อกสอนแก้ธีม แต่ ธีมของบล้อกตัวเองดันขี้เกียจแก้น่ะสิ!! 
เอาไว้ว่างๆ (จริงๆ ก็ว่างนี่หว่า!) ค่อยทำก็ได้เนอะ
ขอบคุณคร้าบ พบกันใหม่ entry หน้าจ้า
ไม่ใช่กล่องพิมพ์คอมเม้นท์) 
จะเอาไปใช้ เร็วๆ นี้...
ปล.ซันจิ....
#1 By ไทโย on 2009-10-30 17:26