2005/Sep/19

วันนี้เราจะมาทำความรู้กับเมนู config css กันต่อนะคะ
(หลังจากตอนที่แล้ว ได้รู้เรื่องการปรับเปลี่ยนธีมเบื้องต้นไปแล้ว)



เมื่อเราต้องการปรับเปลี่ยน css
ให้คลิกเข้ามาที่เมนู Theme จากนั้น เลือกขั้นที่ 4 ค่ะ
Config CSS (Advance User)

หน้าจอก็จะเปลี่ยนไปเป็นแบบนี้




ให้เราคลิกที่ปุ่มตามรูปเลยค่ะ


เมื่อเราเคลิกแล้ว
หน้าจอเราก็จะเข้าสู่การจัดการแก้ไข CSS ซึ่งเป็นช่องพิมพ์ยาวๆ
เป็นโค้ดนะคะ


แบบนี้






ถ้าเพื่อนๆ ลองค่อยๆ ไล่อ่านดู
จะเห็นว่าทาง exteen ได้บอกรายละเอียดแต่ละอันอยู่แล้วว่า
จะเปลี่ยนอะไรตรงไหน ได้อย่างไรบ้าง

เราลองมาไล่ดูไปทีละส่วนเลยนะคะ

**โค้ดที่แม่อ้ออธิบายนี้ เป็นโค้ดของ easy นะคะ **









เริ่มแรก มาดูที่ส่วนนี้กันค่ะ

/* สีของลิงค์ */
a:link, a:visited{
color:#B8D9EC;
border-bottom:1px dotted #B8D9EC;
text-decoration:none;
}
a:hover{
color:#B8D9EC;
border-bottom:1px solid #B8D9EC;




สีของลิงก์ก็หมายถึงสีของส่วนข้อความที่เราทำไว้เป็นลิงก์ (หมายเลข1 ตามรูป) นะคะ
ไม่เกี่ยวกับพวกในแถบด้านข้างค่ะ
แต่เป็นลิงก์ที่เราใส่ไว้ในเอนทรีแต่ละวัน

a:link หมายถึง สีของตัวหนังสือที่เราทำเป็นลิงก์
a:visited หมายถึง สีของลิงก์ที่เราคลิกเข้าไปแล้วค่ะ
a:hover คือ สีของตัวหนังสือเวลาที่เราเอาเมาส์ไปวางค่ะ

เราสามารถปรับเปลี่ยนได้ตามที่แม่อ้อทำตัวหนาไว้ค่ะ

color ให้เพื่อนๆ ใส่ค่าสีเป็นเลขหกหลัก นำหน้าด้วย #
ลองเข้าไปดูโค้ดสีได้ที่
Color code นะคะ

ส่วน border bottom หมายถึงเส้นขีดด้านล่างค่ะ
เราสามารถปรับขนาดความหนาของเส้นได้ด้วยการเปลี่ยนตัวอักษรหน้า px
(1 เล็กสุดนะคะ)
ส่วน dotted หมายถึงสั่งให้เส้นเป็นเส้นจุดไข่ปลา
ถ้าเพื่อนๆ อยากได้เส้นแบบอื่น ก็จะมี

solid เส้นทึบ ธรรมดา
dashed เส้นประ
double เส้นคู่

ถ้าอยากได้แบบไหนก็ใส่เข้าไปแทนคำว่า dotted เลยค่ะ
สีของเส้นก็สามารถเปลี่ยนได้เช่นกันนะคะ
ใส่โค้ดสีที่ต้องการแทนโค้ดสีเดิมเลยค่ะ







ส่วนต่อไปนะคะ

/* ทั้งหน้ามีลักษณะเป็นอย่างไร */
.site{
margin:20px;
padding:0px;
text-align:center;
background:url() #014368 repeat;
}
/* ความกว้างของหน้าบลอค */
#wrapper{
width:680px;
}
/* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */
#all{
width:680px;
float:left;





เริ่มที่ /*ทั้งหน้ามีลักษณะเป็นอย่างไร*/ นะคะ
ส่วนที่เราจะเปลี่ยนได้ก็มี ใส่ background ให้กับหน้าบล๊อกของเราค่ะ

ถ้าต้องการใส่เป็นรูป
ก็ให้ก๊อปปี้ url ของรูปมาใส่ในวงเล็บข้างหลังคำว่า url ค่ะ

background:url(ใส่url ของรูปตรงนี้) #014368 repeat

ส่วนต่อไปคือความกว้างของหน้าบล๊อก
อันนี้ใช้ในกรณีที่เราอยากให้หน้าบล๊อกของเรากว้างมากขึ้น
ก็สามารถเปลี่ยนตัวเลขนี้ได้ค่ะ

ซึ่งตัวเลขที่เปลี่ยนนี้ ทำให้เราต้องไปเปลี่ยนค่าความกว้างในส่วนอื่นๆ ด้วย
เช่น ความกว้างของรูปที่ใช้ทำ head ค่ะ





มาที่ uptab นะคะ

/* แถบบนสุด */
#uptab{
width:680px;
float:left;
height:29px;
background: url(/global/theme/predefined/easy/exteen.gif) right top no-repeat;
}





ในส่วนนี้หมายถึงคำว่า exteen ที่แสดงอยู่เหนือเฮดของเราตรงมุมขวาค่ะ
สามารถลบออกได้นะคะ
ถ้าต้องการจะลบออก ก็ลบตั้งแต่คำว่า /*แถบบนสุด*/ ไปจนถึง no-repeat; ค่ะ

แต่ถ้าจะคงไว้ต้องเปลี่ยนความกว้าง
ให้เท่ากับความกว้างของหน้าบล๊อกที่เราเปลี่ยนในขั้นที่แล้วด้วยค่ะ






ส่วนถัดไป
เป็นแถบกลางที่ใช้แสดงบล๊อกของเราค่ะ
(หมายความถึงเมนูด้านซ้ายมือที่เป็นแถบรวมลิงก์
และด้านขวาที่เป็นส่วนแสดงเอนทรีนะคะ)

/*แถบกลาง หรือก็คือที่แสดงบลอค */
#midtab{
width:680px;
padding:0px;
border:3px solid #FFFFFF;
float:left;
}
/* แถบล่างสุด */
#downtab{
float:left;
width:680px;
height:4px;
}


ให้เพื่อนๆ เซทค่าความกว้างตามค่าที่เราเปลี่ยนขนาดความกว้างของบล๊อกมาตั้งแต่แรกนะคะ
สรุปว่าตรงตัวเลข 680 px นี่ถ้าเปลี่ยนแล้ว
ต้องไล่เปลี่ยนให้เท่ากันทั้งหมดค่ะ

ส่วนตรงคำว่า border ตัวนี้หมายถึงเส้นขอบทั้งหมดของบล๊อกเรานะคะ
ขอบนอกสุดน่ะค่ะ
เปลี่ยนขนาด สี และสไตล์ของเส้นได้ค่ะ

ส่วน /*แถบล่างสุด*/ ก็เช่นเดียวกันค่ะ
ปรับขนาดความกว้างให้เท่ากับแถบกลางที่เราตั้งใหม่ไปนะคะ






ส่วนเฮดของบล๊อก

/* รูปภาพด้านบน เซตความสูงและกว้างตามภาพ */
.picture{
background: url(
http://www.exteen.com/global/theme/predefined/easy/headereasy.gif) no-repeat;
height: 130px;
width: 680px;
border-bottom:1px dotted #FFFFFF;
}


ในส่วนนี้เป็นการเซทค่าของรูปที่เราเอามาทำเป็นเฮดค่ะ

เราสามารถเปลี่ยนรูปที่จะใส่เป็นเฮดของบล๊อกได้
ด้วยการก๊อปปี้ url ของรูปมาใส่ในวงเล็บข้างหลังคำว่า background: url(ใส่urlรูป) ค่ะ

height/width ก็ต้องปรับให้เท่ากับขนาดของรูปที่เราใช้นะคะ

ซึ่ง width ก็จะไปเท่ากับขนาดความกว้างของหน้าบล๊อกที่เราเซทตอนแรกค่ะ

border-bottom ก็คือเส้นขอบด้านล่างของเฮดบล๊อกค่ะ
ปรับสี/สไตล์ของเส้น และ ความหนาได้เลยค่ะ







ไตเติ้ล

.title{
font-family: "Microsoft Sans Serif", "Sans Serif";
font-size: 10pt;
font-weight: Bold;
color: #FFFFFF;
padding-right:10px;
vertical-align:bottom;
text-align:right;
}
.content{
width:680px;
font-family: Tahoma, "MS Sans Serif";
font-size: 12px;
color:#FFFFFF;
text-align:center;
float:left;
background-color:#014368;

tiltle ก็คือส่วนที่เป็นชื่อของบล๊อกเราที่แสดงในรูปเฮดตรงมุมขวาค่ะ



เราสามารถเปลี่ยนสีตัวหนังสือ(color) และขนาด(font-size)
รวมถึงแบบของฟอนต์ (font-family)ได้ค่ะ

ส่วนของ content หมายถึงส่วนแสดงเนื้อหาของบลีอกค่ะ
ถ้าเราต้องการให้ตัวหนังสือในบล๊อกของเราใหญ่ขึ้นก็ปรับขนาดได้ที่ font-size นะคะ
color ตัวแรกหมายถึง สีของตัวหนังสือค่ะ
ส่วน background-color คือ สีของ background ในส่วนหน้าบลีอกของเราค่ะ
(ที่อยู่ในกรอบสี่เหลี่ยม)






มาต่อกันที่ส่วนต่อไปเลยนะคะ leftcontent


/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */
.leftcontent{
width:500px;
float:right;
text-align:left;
background-color:#025F95;
border-left:1px #FFFFFF dotted;
}

.leftcontent
ส่วนนี้หมายถึงคอลัมน์ที่แสดงเอนทรีที่เราโพสท์แต่ละวันค่ะ

ถ้าเราปรับเปลี่ยนค่าความกว้างของหน้าบล๊อก
เราต้องมาปรับค่าความกว้างในส่วนนี้ด้วยค่ะ

ซึ่งค่าความกว้างของส่วนนี้ เมื่อบวกกับค่าความกว้างของคอลัมน์ที่เป็นแถบแสดงลิงก์ด้านข้างของเราบวกกัน
จะต้องไม่เกินค่าความกว้างของหน้าบล๊อกค่ะ

เช่น ถ้าเราเซทค่าความกว้างหน้าบล๊อกเป็น 700 px
ค่าความกว้างของ leftcontent เป็น 500
ค่าความกว้างของ rightcontent ก็ต้องเป็น 200 เป็นต้นค่ะ

นอกจากนี้เรายังสามารถเซทค่าสีที่จะใช้เป็น background-color ได้ด้วยค่ะ
ส่วน border-left หมายถึงเส้นขอบด้านซ้ายมือ
เราสามารถปรับค่าของเส้นได้เช่นกันนะคะ







ต่อไปค่ะ rightcontent

/* พวกที่เป็นแถบลิงค์ต่างๆ */
.rightcontent{
width:179px;
float:left;
text-align:left;
background-color:#02517f;
border-bottom:1px #FFFFFF dotted;
}



.rightcontent ก็คือส่วนคอลัมน์ที่แสดงพวก category /archive และอื่นๆ ของเรานั่นเองค่ะ

สิ่งที่เราสามารถปรับเปลี่ยนได้ก็ได้แก่พวกความกว้างของคอลัมน์ (width)
สีพื้นหลัง (background-color)และสี/สไตล์/ความหนาของเส้นขอบ (border)ค่ะ





ต่อไปนะคะเป็นส่วนหัวข้อของเอนทรีที่เราโพสในแต่ละวัน
จะแบ่งเป็นสองส่วนคือ ส่วนวันที่ (iday) กับส่วนชื่อเอนทรี (entry) และเนื้อหาของเอนทรี (entrycontent)ค่ะ

font-size: 14px;
color:#FFFFFF;
background-color:#02517f;
}
/* เรื่องหนึ่งๆ */
.entry{
padding:5px 15px 5px 10px;
margin:5px 0px 5px 0px;
}
/* หัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */
.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{
background-image: url(/global/theme/predefined/easy/bl.gif);
background-repeat: no-repeat;
background-position: left top;
padding:0px 10px 0px 16px;
font-size: 12px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
border:0px;
}
/* ส่วนแสดงเนื้อหา entry */
.entrycontent{
padding:5px 10px 5px 16px;
color:#FFFFFF;
font-size:12px;
}








มาเริ่มกันที่ .iday เลยนะคะ

.iday หมายถึงส่วนที่เป็นวันที่ที่เราโพสท์เอนทรีนะคะ
แสดงอยู่ในบรรทัดบนสุดตามรูปเลยค่ะ
เราสามารถปรับเปลี่ยนขนาด/สี ของตัวอักษรได้ และสามารถเปลี่ยนสีพื้นหลังได้ด้วยค่ะ

ส่วนต่อไป .entry
บรรทัดนี้หมายถึง หัวข้อของเอนทรีที่เราโพสค่ะ


/* หัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */
.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{
background-image: url(/global/theme/predefined/easy/bl.gif);
บรรทัดนี้หมายถึง รูปลูกศรเล็กๆ ที่อยู่หน้าเอนทรีค่ะ
ถ้าต้องการเปลี่ยนรูป ให้ก๊อปปี้ url มาใส่แทนตัวหนังสือสีแดงที่แม่อ้อทำไว้ในวงเล็บได้เลยค่ะ
background-repeat: no-repeat;
background-position: left top;
padding:0px 10px 0px 16px;
บรรทัดนี้ให้เพื่อนๆ เปลี่ยนค่าตัวเลขตัวสุดท้ายให้เท่ากับความกว้างของรูปที่เอามาใส่นะคะ
*ดูขนาดของรูปได้จากการคลิกขวาที่ภาพแล้วเลือก properties จะมีขนาดของรูปอยู่ที่บรรทัดสุดท้าย
เป็นกว้างxยาวค่ะ*
**padding หมายถึงระยะการเว้นพื้นที่นะคะ ค่าตัวเลขสี่ตัวเรียงตามนี้ค่ะ บน ขวา ล่าง ซ้าย**

font-size: 12px;
เปลี่ยนขนาดของตัวหนังสือที่ใช้เป็นหัวข้อที่นี่ค่ะ
text-decoration:none;
font-weight:bold;
บรรทัดนี้หมายถึงสั่งให้เป็นตัวหนา ถ้าไม่ต้องการให้ลบออกเลยค่ะ
*ใครอยากให้เป้นตัวเอียงใส่โค้ดนี้เพิ่มได้ค่ะ font-stlye: italic;*

color:#FFFFFF;
เปลี่ยนสีตัวหนังสือที่เป็นหัวข้อเอนทรี่ตรงนี้ค่ะ
border:0px;
ถ้าต้องการใส่ขอบก็พิมพ์เขาไปเลยค่ะ
เช่น ต้องการขอบหนา 1px เป็นเส้นจุดไข่ปลา สีขาว
ก็ใส่ลงไปว่า border: 1px dotted #FFFFFF;

}

ส่วนต่อไปคือ .entrycontent
ส่วนนี้ใช้กำหนดลักษณะของเนื้อเรื่องของเอนทรี่ที่เราโพสท์ค่ะ
สิ่งที่เราสามารถปรับเปลี่ยนได้ก็ได้แก่ สีของตัวอักษร (color), และขนาดค่ะ
หลายๆ คนบ่นว่าตัวหนังสือมันเล็ก ก็ลองปรับขนาดของตัวอักษรให้เพิ่มขึ้นนะคะ
น่าจะประมาณ 14 px กำลังดีค่ะ
แล้วแต่คนชอบนิ





ส่วนต่อไป เป็นส่วนแสดงรายละเอียดของเราค่ะ

/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */
.entryfooter{
border-top:1px dotted #FFFFFF;
padding:2px 2px 2px 15px;
color:#FFFFFF;
font-size:9px;
}
/* ชื่อผู้โพส */
.entryposter{
padding:0px 5px 0px 0px;
}
/* ลิงค์ไปดู comment ของ entry */
.entrycomment a:link,.entrycomment a:visited,/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
background-image: url(/global/theme/predefined/easy/comment.gif);
background-repeat: no-repeat;
color:#B8D9EC;
text-decoration:none;
padding:0px 80px 0px 0px;
border:0px;
}
/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
color:#FFFFFF;
border:0px;







มาไล่ดูทีละส่วนเลยนะคะ

เริ่มที่ entryfooter นะคะ

.entryfooter{
border-top:1px dotted #FFFFFF;
บรรทัดนี้หมายถึงเส้นจุดไข่ปลาสีขาว ที่อยู่เหนือ บรรทัดแสดงรายละเอียดผู้โพสท์ค่ะ
สามารถเปลี่ยนขนาด/สี และสไตล์ของเส้นได้นะคะ

padding:2px 2px 2px 15px;
ส่วนบรรทัดนี้คือการกำหนดระยะห่างโดยรอบของ entryposter ค่ะ
ถ้าอยากให้เส้นจุดๆ ลอยห่างขึ้นไปอีก ก็เพิ่มค่า padding ตัวแรกนะคะ

color:#FFFFFF;
เปลี่ยนสีตัวหนังสือตรงนี้ค่ะ
font-size:9px;
ส่วนบรรทัดนี้เปลี่ยนขนาดค่ะ


ส่วนตัวไป entryposter ข้ามไปเลยค่ะ
ไม่ต้องเปลี่ยน

มาที่ entrycomment เลยนะคะ

/* ลิงค์ไปดู comment ของ entry */
.entrycomment a:link,.entrycomment a:visited,/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
background-image: url(/global/theme/predefined/easy/comment.gif);
บรรทัดนี้เป็นรูปคำว่าcommentนะคะ ถ้าไม่มีรูปอื่นจะใส่ก็ไม่ต้องเปลี่ยนค่ะ
ถ้าจะใส่รูปอื่นก็ก๊อป url มาใส่แทนตัวหนังสือสีแดงได้เลยค่ะ

background-repeat: no-repeat;
color:#B8D9EC;
บรรทัดนี้เป็นสีตัวหนังสือของ เลขจำนวนคอมเมนต์ค่ะ
text-decoration:none;
padding:0px 80px 0px 0px;
border:0px;
}
/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
อันนี้คือสีของตัวหนังสือเวลาเราเอาเมาส์ไปวางเหนือเลขจำนวนคอมเมนต์ค่ะ
color:#FFFFFF;
เปลี่ยนเป็นสีอื่นตรงนี้นะคะ
border:0px;









มาที่แถบด้านข้างบ้างนะคะ
เริ่มต้นไล่ลงมาจากส่วนโปรไฟล์กันเลย


/* แถบแสดงชื่อ */
.profile{
padding:5px; margin:0px 1px 0px 10px;
font-size:10px;
}
/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:2px 0px 2px 0px;
color:#FFFFFF;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
padding-left:10px;
background-color:#014368;
border-bottom:1px #FFFFFF dotted;
border-top:1px #FFFFFF dotted;
}
.sidebar-item{
padding:0px 0px 0px 5px;
margin:0px 0px 10px 0px;
}
/*แต่ละไอเท็มของแถบด้านข้าง*/
.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image: url(/global/theme/predefined/easy/bl.gif);
background-position:0px 2px;
}
.sidebar-item a:link, .sidebar-item a:visited, .sidebar-item a:hover{
font-family:"Trebuchet MS",Tahoma;
text-decoration:none;
font-size:11px;
border:0px;
}
.sidebar-item a:hover{
color:#B8D9EC;
border:0px;
}





ส่วนแรกคือช่องแสดง profile ของเรานะคะ

/* แถบแสดงชื่อ */
.profile{
padding:5px; margin:0px 1px 0px 10px;
font-size:10px;
เปลี่ยนขนาดตัวอักษรค่ะ ตรงชื่อและคำว่า view full profile ค่ะ
}
/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:2px 0px 2px 0px;
อันนี้เอาไว้ปรับระยะห่างจากขอบแต่ละด้านนะคะ อยากให้เส้นประๆ ข้างบนกับข้างล่าง ห่างจากตัวหนังสือมากขึ้น ก็เปลี่ยนจาก 2 เป็นเลขที่มากขึ้นค่ะ
color:#FFFFFF;
เปลี่ยนสีตัวอักษรที่เป้นหัวข้อเช่นคำว่า recommend /Link/Archieve
font-family:Tahoma;
แบบฟอนท์ค่ะ ไม่ต้องเปลี่ยนก็ได้
font-size:12px;
ขนาดฟอนท์
font-weight:bold;
สั่งให้เป้นตัวหนา ถ้าไม่ต้องการก็ลบออกค่ะ
padding-left:10px;
ระยะห่างจากขอบด้านซ้ายค่ะ
background-color:#014368;
สีพื้นหลังของหัวข้อพวกคำว่า recommend /Link/Archieve เปลี่ยนได้ตามชอบค่ะ
border-bottom:1px #FFFFFF dotted;
เส้นขอบด้านบนที่เป็นจุดไข่ปลา เปลี่ยนได้เหมือนเส้นอื่นๆ ที่สอนไปแล้วนะคะ
border-top:1px #FFFFFF dotted;
เหมือนกันค่ะ
}

.sidebar-item{
padding:0px 0px 0px 5px;
margin:0px 0px 10px 0px;
}

/*แต่ละไอเท็มของแถบด้านข้าง*/
.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image: url(/global/theme/predefined/easy/bl.gif);
ถ้าต้องการเปลี่ยนรูปหน้าลิงก์ในแถบด้านข้าง ให้ก๊อป url รูปมาใส่แทนตัวสีแดงนะคะ ต้องไปแก้ padding ให้สัมพันธ์กับขนาดของรูปที่เอามาใส่แทนด้วยค่ะ แก้ padding ตัวสุดท้ายให้เท่ากับความกว้างของรูปนะคะ
background-position:0px 2px;
}
.sidebar-item a:link, .sidebar-item a:visited, .sidebar-item a:hover{
font-family:"Trebuchet MS",Tahoma;
text-decoration:none;
font-size:11px;
ขนาดของฟอนท์
border:0px;
}
.sidebar-item a:hover{
color:#B8D9EC;
สีของตัวหนังสือที่เป็นลิงก์เวลาเราเอาเมาส์ไปวางค่ะ เปลี่ยนได้เช่นกัน
border:0px;
}







หมดจากแถบด้านข้าง
เราย้ายมาดูกันที่ ส่วนของคอมเมนต์บ้างนะคะ


/* ส่วนคอมเมนต์ */
.comment{
padding:6px 5px 2px 5px;
margin:10px;
background-color:#02517f;
}
.commentcontent{
color: #FFFFFF;
padding:5px 5px 5px 16px;
font-size:11px;
line-height: 1.3em;
}
.commentfooter{
padding:2px 2px 2px 15px;
color:#FFFFFF;
font-size:9px;
}
.commentdetail{
padding:0px 5px 0px 0px;
}
.commentposter a:link,.commentposter a:visited,.commentposter a:hover{
text-decoration:none;
padding:0;
border-bottom:0px;
}
.commentposter a:hover{
border-bottom:0px;
}



ส่วนนี้จะหมายถึงส่วนที่แสดงคอมเมนต์ที่มีคนโพสต์ในบล๊อกเรานะคะ

เริ่มกันเลยค่ะ

.comment{
padding:6px 5px 2px 5px;
margin:10px;
background-color:#02517f;
ตรงนี้หมายถึงสี BG ของคอมเมนต์นะคะ สามารถเปลี่ยนสีได้
หรือใส่เป้นรูปก็ได้ค่ะ
ถ้าต้องการใส่เป็นรูป ให้ใส่โค้ดนี้นะคะ BACKGROUND-IMAGE: url(urlของรูป);
แทนเข้าไปตรง background-color ทั้งบรรทัดเลยนะคะ
}
.commentcontent{
color: #FFFFFF;
ส่วนบรรทัดนี้คือสีของตัวหนังสือในคอมเมนต์ค่ะ
padding:5px 5px 5px 16px;
font-size:11px;
ส่วนนี้หมายถึงขนาดของตัวอักษรที่แสดงในคอมเมนต์เราค่ะ
หลายคนบ่นว่าคอมเมนต์ตัวเล็ก อ่านยาก เปลี่ยนได้ตรงนี้เลยนะคะ

line-height: 1.3em;
}
.commentfooter{
ส่วนนี้หมายถึงรายละเอียดของคนที่มาคอมเมนต์ค่ะ
padding:2px 2px 2px 15px;
color:#FFFFFF;
นี่สีของตัวอักษรในส่วนแสดงรายละเอียด เปลี่ยนได้ค่ะ
font-size:9px;
ขนาดของตัวอักษรเปลี่ยนได้เช่นกัน
}
.commentdetail{
padding:0px 5px 0px 0px;
}
.commentposter a:link,.commentposter a:visited,.commentposter a:hover{
อันนี้หมายถึงชื่อคนที่มาคอมเมนต์เรานะคะ มันจะเป็นลิงก์น่ะค่ะ
text-decoration:none;
padding:0;
border-bottom:0px;
}
.commentposter a:hover{
border-bottom:0px;
}








มาต่อกันที่ฟอร์มใส่คอมเมนต์ค่ะ

/* ฟอร์มใส่คอมเมนต์ */
form{
padding:2px 5px 2px 20px;
margin:10px;
font:11px Tahoma,"MS Sans Serif";
background-color:#014368;
}
input{
font:11px Tahoma,"MS Sans Serif";
}




/* ฟอร์มใส่คอมเมนต์ */
form{
padding:2px 5px 2px 20px;
margin:10px;
font:11px Tahoma,"MS Sans Serif";
ส่วนนี้หมายถึง ขนาดของตัวอักษรด้านบนนะคะ (พวกคำว่าชื่อ เว็บไซต์ คอมเมนต์ น่ะค่ะ)
เปลี่ยนขนาดได้ค่ะ

background-color:#014368;
แบ๊คกราวนด์ของช่องใส่คอมเมนต์ ใส่เป็นรูปก็ได้ค่ะ
โค้ดเหมือนที่บอกไปแล้วด้านบน

}
input{
font:11px Tahoma,"MS Sans Serif";
อันนี้เป็นขนาดของตัวหนังสือที่ใช้พิมพ์ในช่องคอมเมนต์นะคะ ขยายได้ค่ะ จะได้สบายตา (คนแก่) :P
}




เบสิคของการแก้ css ก็หมดเพียงแค่นี้นะคะ
ยังมีลูกเล่นอย่างอื่นเพิ่มเติมอีก
แม่อ้อขอเวลาทะยอยๆ นำมาลงเรื่อยแล้วกันค่ะ

ถ้าอยากดูเพิ่มเติมลองไปดูได้ที่บลีอคของคุณงูตามลิงก์ด้านข้างเลยนะคะ

เอวัง สวัสดีค่า :)














2005/Sep/16

คราวนี้เราจะมาทำความรู้จักกับเมนู Theme กันนะคะ

ในส่วนของเมนู Theme ประกอบไปด้วยเมนูย่อยอีก 4 ส่วน
นั่นคือ

1. Select Lay out
2. Select Components
3. Config Styles
4. Config CSS









เมื่อเราคลิกเข้ามาที่ส่วนของเมนู Theme
หน้าแรกที่เราจะพบคือ หน้า Select Lay out ค่ะ





หน้านี้เป็นหน้าที่เราจะเลือกลักษณะการจัดวาง (Lay out) ของหน้าบล๊อกของเราค่ะ
(ในที่นี้แม่อ้อเลือกใช้ Easy นะคะ - การอธิบาย CSS ก็จะใช้ Easy เช่นกันค่ะ)


เมื่อเราคลิกเลือก Lay out แล้ว
ก็จะมีหน้าที่ให้เรา Confirm Lay out ที่เราเลือกอีกรอบหนึ่ง

แล้วจึงจะไปที่ขั้นตอนถัดไปคือ หน้า Select Components




Select Components
เป็นหน้าที่เราใช้เลือกข้อมูลที่เราต้องการให้แสดง
ในแถบเมนูด้านข้างในหน้าบล๊อกของเราค่ะ






ถ้าเราต้องการให้มีอันไหนแสดงก็คลิกเครื่องหมายถูกที่ด้านหน้าช่องนั้นๆ เลยค่ะ

**Comment Alert อาจจะมีคนสงสัยว่ามันคืออะไร
หาคำตอบได้ที่นี่ค่ะ
อะไรคือ comment alertที่บล๊อกของเวบมาสเตอร์-คุณแชมป์ค่ะ




เมื่อเราคลิกเลือกหัวข้อที่เราต้องการให้แสดงในหน้าบล๊อกได้แล้ว
ก็คลิกที่ปุ่ม ok เลยค่ะ




จากนั้นเราจะไปที่หน้าต่อไป
คือหน้า Config styles ค่ะ



ในหน้านี้เราจะทำการปรับแต่งหน้าตาของธีมที่เราเลือกไว้ค่ะ
สามารถดูได้ตามหมายเลขเลยนะคะ

1. สีหลัก หรือสีพื้นหลังของบล๊อก (ส่วนที่เป็นเอนทรี) เราสามารถเลือกสีได้โดยคลิกที่ปุ่ม pick color ด้านข้าง
แล้วจิ้มสีที่ต้องการได้เลยค่ะ

2. สีตัวอักษรก็เช่นเดียวกันค่ะ คลิกที่ปุ่มด้านข้างเพื่อเลือกสีได้เลย

3. สีลิงก์คือส่วนที่เป็นแถบลิงก์ในเมนูด้านข้าง

4. สีเส้นขอบ ตามรูปเลยค่ะ เส้นขอบของบล๊อกเรานั่นเอง

5. เฮดบล๊อกเราสามารถใส่รูปได้สองแบบนะคะ

วิธีแรก คลิกที่ปุ่ม add picture เพื่อใส่รูป
เมื่อเราคลิกที่ปุ่มนี้ หน้าต่าง manage file ก็จะเปิดขึ้นมาค่ะ
เราสามารถอัพโหลดรู)ที่เราต้องการทำเป็นเฮดของบล๊อกและ Insert จากหน้านี้ได้เลย

หรือ

วิธีที่สอง
ก๊อปปี้ url ของรูปมาจากเวบอื่น
อันนี้ใช้ในกรณีที่เพื่อนๆ ฝากรูปไว้ที่ host อื่นๆ นะคะ

*ความกว้างของรูปภาพที่จะเอามาใช้ทำเฮด คือ 640 px
แต่เราสามารถใช้กว้างกว่านี้ก็ได้นะคะ ต้องไปแก้ไขใน css ค่ะ*

6. ความสูงของรูปภาพ ที่ใช้ทำเป็นเฮดให้เพื่อนๆ กำหนดเอาเองเลยนะคะ
แล้วแต่ความสวยงามค่ะ (หน่วยเป็น pixel )

7. Backgroundของบล๊อกจะใส่หรือไม่ใส่ก็ได้นะคะ แล้วแต่ชอบค่ะ
วิธีใส่มีสองแบบเหมือนการใส่ head นั่นล่ะค่ะ

มีลิงก์รวมรูปภาพที่ใช้เป็น bg น่ารักๆ มาฝากด้วยค่ะ
ลองเข้าไปดูที่นี่เลยนะคะ บอร์ดรวมของแต่งเวบน่ารักๆ by materialz
กับที่ fanaticclub.com ค่ะ



เมื่อเราปรับเปลี่ยนหน้าตาจนพอใจแล้ว
ให้คลิกที่ปุ่ม Confirm เลยค่ะ

เป็นอันเสร็จขั้นตอนการปรับเปลี่ยนหน้าตา Theme แบบง่ายๆ นะคะ
ส่วนการ config css ขอขึ้นเป็นตอนใหม่แล้วกันครับผม :)








2005/Sep/16

หลังจาก ๒ ตอนที่แล้วเราได้ทำความรู้จักกับ

และ ไปแล้วนะคะ

วันนี้เราจะมาทำความรู้จักกับ กันบ้าง

เป็นส่วนที่เราใช้จัดการกับข้อมูลทั่วไปของเรานะคะ
ในส่วนนี้จะประกอบด้วยส่วนย่อยๆ อีก 6 ส่วน ได้แก่

1. Title & Avatar
2. Formatting
3. Favourites
4. Links
5. Your Profile
6. Account Information








มาเริ่มที่ส่วนแรกเลยค่ะ นั่นคือ

ซึ่งหน้าตาเป็นแบบนี้ค่ะ




ประกอบด้วย 3 ส่วนย่อยๆ นะคะ
เริ่มกันที่

1. Blog Title
ช่องนี้เราใช้กำหนด title ของบล๊อกเรา
ที่จะแสดงบนแถบบนสุดของ IE เวลาที่เราเปิดบล๊อกค่ะ

แบบนี้

นอกจากนี้ Blog Title จะปรากฏในรูปภาพที่เราใช้ทำเป็นเฮดของบล๊อกด้วยค่ะ
(เห็นเป็นตัวหนังสือเล็กๆ ที่มุมขวาบนของรูปเฮดค่ะ)



2. Screen Name
คือชื่อแทนตัวเวลาที่เราไปคอมเมนต์ที่บล๊อกอื่นๆ ค่ะ

3. Avatar
หมายถึงรูปที่จะปรากฏในส่วน Profile ในหน้าบล๊อกของเราค่ะ

เราสามารถใส่รูป avatar ได้ 2 วิธีนะคะ

วิธีแรก คือการคลิกที่ปุ่ม
เมื่อเราคลิกแล้ว จะมีหน้าต่าง pop up ขึ้นมาหน้านึงค่ะ
เป็นหน้าต่างที่เราใช้จัดการกับไฟล์ที่เราอัพโหลดขึ้นเอาไว้ใน exteen นั่นเอง






เราสามารถใส่ avatar ได้โดยทำการอัพโหลดรูปที่เราจะทำเป็น avatar ขึ้นมาเก็บไว้ในนี้
จากนั้นคลิกรูปที่เราต้องการ แล้วคลิกที่ปุ่มค่ะ

วิธีที่ 2 ในการใส่ avatar คือลิงก์รูปจากเวบอื่นค่ะ
ทำได้โดยการก๊อปปี้ url ของรูปที่เราจะใช้มาจากเวบอื่น
แล้วเอามาใส่ในช่องนี้ได้เลยนะคะ

**ขนาดของ avatar ที่เหมาะสมคือ 64 x 64 pix ตามที่ exteen กำหนด
แต่เราสามารถทำให้ใหญ่กว่านี้ได้นะคะ
(อย่างขนาดของ avatar ที่แม่อ้อใช้ก็ 100 x 100)

แต่เราต้องตามไปแก้ css ให้ขนาดของช่องที่แสดง avatar สัมพันธ์กันด้วยค่ะ













เมนูต่อไปใน ที่เราจะทำความรู้จักกันคือ ค่ะ




1. New Entry Number ใช้กำหนดจำนวนเอนทรีที่เราอยากให้แสดงในหน้าแรก

2. Previous Entry Number กำหนดจำนวนรายชื่อเอนทรีเก่าที่เราอยากให้แสดงในแถบเมนูด้านข้างในบล๊อก

3. Show All Comment ถ้าเราไม่ติ๊กเครื่องหมายในช่องนี้ เราก็สามารถซ่อนคอมเมนต์บางอันได้ค่ะ










ต่อไปเป็น เมนู

ส่วนนี้เราใช้จัดการกับบล๊อกที่เรา add ไว้นะคะ



ส่วนแรก หมายเลข 1
เป็นส่วนแสดงรายชื่อของบล๊อกที่เราแอดไว้เป็น favourites

ส่วนที่ 2
ใช้จัดการกับรายชื่อบล๊อกที่เรา add เป็น favourites ไว้แล้ว
เช่นปุ่ม up/down ก็เอาไว้เลื่อนรายชื่อบล๊อกขึ้น/ลง

ส่วนที่เราแก้ไขได้ก็คือส่วน Description นะคะ
username แก้ไม่ได้เน้อ มันเป็นชื่อ url เค้าง่ะ

เมื่อเราต้องการแก้ไขรายชื่ไหน
ก็คลิกที่รายชื่อนั้นในส่วนที่ 1 แล้วจึงทำการแก้ไขค่ะ
พอเสร็จเรียบร้อยก็คลิกที่ปุ่ม ค่ะ

หรืออถ้าเราต้องการลบชื่อไหนออกก็คลิกที่ชื่อนั้น
แล้วคลิกปุ่ม


ส่วนที่ 3
เป็นการเพิ่มรายชื่อบล๊อกเข้าใน fav.list ของเราค่ะ
ใส่ชื่อ user ลงไปในช่อง user
(ชื่อ user คือชื่อที่เป็น url ของบล๊อกนั้นๆ นะคะ เช่นของแม่อ้อก็ tinypooh)
ใส่ description แล้วจึงคลิกที่ปุ่ม

**วิธีที่ง่ายกว่าในการเพิ่ม fav. list คือคลิกที่ปุ่ม add favourites ในหน้าบล๊อกนั้นๆค่ะ
ไม่ต้องจำ username ด้วย ง่ายกว่าเยอะเลย :)










เมนูต่อไปในส่วน ได้แก่ เมนู ค่ะ

เมนูนี้หน้าตาคล้ายๆ กับ ค่ะ
การใช้งานก็คล้ายกัน

ส่วนที่ 1 เป็นส่วนแสดงรายชื่อของลิงก์ที่เราใส่ไว้ในบล๊อก

ส่วนที่ 2
ใช้แก้ไขหรือลบลิงก์ที่เราใส่ไว้แล้ว

ส่วนที่ 3 ใช้เพิ่มลิงก์ใหม่ค่ะ






สำหรับเมนูย่อยในส่วนของ ที่เหลือ
คือ Your Profile และAccount Information ไม่น่าจะมีอะไรยุ่งยากนะคะ
แม่อ้อขอข้ามไปเลยแล้วกัน
ไม่งั้นอาจจะไปไม่ถึงการแก้ css ซักที