วันนี้เราจะมาทำความรู้กับเมนู 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;
}

คราวนี้เราจะมาทำความรู้จักกับเมนู 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 ขอขึ้นเป็นตอนใหม่แล้วกันครับผม :)

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

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

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

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

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