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;