แต่ง blog แก้ theme ด้วย CSS ฉบับมือใหม่#3
posted on 23 Oct 2009 18:28 by itbasicแต่ง Sidebar ให้สวยด้วยมือเรา
เข้าสู่บทที่ 3 คราวนี้จะไปไวมากขึ้นนะครับ ใครไม่มีพื้นฐานให้อ่าน บทที่ 1 และ 2 ก่อน แปปเดียวครับ ทำตามทีละ step ไม่ยากครับ ในบทที่ 3 นี้จะเป็น workshop ง่ายๆ เลือกดูหัวข้อที่สนใจแล้วทำตามได้เลย
เนื้อหาในบทนี้
- เปลี่ยนหัวเมนูใน sidebar ด้วยตนเอง
- การใส่กรอบ border ให้เมนู sidebar
- ปรับสีพื้นหลังเปลี่ยนสีตัวอักษรใน sidebar
- เปลี่ยนสีตัวอักษร เปลี่ยนสีฉากเวลาเอาเมาส์ไปวาง
- ใส่รูปหน้ารายการ list ใน sidebar
==================
เปลี่ยนหัวเมนูใน sidebar ด้วยตัวเอง
Step 1:
เตรียมรูปที่จะนำเป็นเมนูใน sidebar ก่อน โดยความกว้างมาตรฐานไม่ควรเกิน 225px ยกเว้นเราทำการขยาย sidebar ให้กว้างขึ้น ส่วนความสูงแล้วแต่ความชอบเลยครับ
รูปที่เตรียมมาให้สัมพันธ์กับเนื้อหาด้วยนะครับ อย่าแหวกแนวมากเดี๋ยวคนมาดูจะงง
ตัวอย่างรูปจากบล็อกผมที่เตรียมมา เลือกเฉพาะที่เราจะโชว์ให้คนอื่นก็พอนะครับ ทำเผื่อไปไม่ได้ใช้ก็เท่านั้น
Step 2:
เปิด css editor แล้วเลื่อนลงมามองหาส่วนนี้ได้เลย
/* Sidebar Header image */
#sidebar #recommend h2, #sidebar2 #recommend h2{background:url(http://g.exteen.com/t/apollo/hd_recommend.png) no-repeat;width:131px;height:19px;}
.
.
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{background:url(http://g.exteen.com/t/apollo/hd_pages.png) no-repeat;width:64px;height:23px;}
อย่าพึ่งมึนงงกับโค้ดยาวๆ ให้มองแค่ส่วนหัวก็พอ ตัวอย่างบรรทัดแรก
#sidebar #recommend h2, #sidebar2 #recommend h2
สังเกตแค่ส่วนขีดเส้นใต้เท่านั้น นี่คือส่วนของเมนู recommend นั่นเอง หากเราจะแก้ส่วนอื่นเราก็มองหาชื่อเมนูอื่นๆ ได้เลย เช่นเราจะแก้ส่วนของ previous ก็ไปแก้ที่
#sidebar #previous h2,#sidebar2 #previous h2{background:url(http://g.exteen.com/t/apollo/hd_previous.png) no-repeat;width:104px;height:23px;}
วิธีแก้ก็ง่ายๆ ครับ เปลี่ยนลิงค์ background ใน url(...) มาเป็นลิงค์รูปที่เราเตรียมไว้แทน ส่วน width ก็ใส่ความกว้างของรูปเรา height ก็ใส่ความสูงของรูปเรา
#sidebar #เมนูที่ต้องการ h2,#sidebar2 #เมนูที่ต้องการ h2{background:url(ลิงค์รูปที่เตรียมไว้) no-repeat;width:ความกว้างของรูป;height:ความสูงของรูป;}
ตัวอย่าง
#sidebar #previous h2,#sidebar2 #previous h2{background:url(http://www.pocketonline.net/g2engine/d/32357-1/previous.png) no-repeat;width:227px;height:48px;}
.
#sidebar #links h2,#sidebar2 #links h2{background:url(http://www.pocketonline.net/g2engine/d/32359-1/link.png) no-repeat;width:227px;height:48px;}
เมื่อแก้แล้วกด preview กันดูนะครับ จะเห็นว่าหัวเมนูเปลี่ยนไปแล้ว
===========================
การใส่กรอบ border ให้เมนู sidebar
Step 1:
สำหรับคนไม่ได้อ่าน entry ที่แล้วเรื่องการใช้ border
สมมุติว่าเราจะใส่กรอบให้เมนู previous เราก็พิมพ์แทรกลงไปใน css เลย
#previous {
border:3px dotted #00f;
}
ลักษณะจะออกมาแบบนี้
#previous = ส่วนของเมนู previous ทั้งหมด ซึ่งหากเราเพียงแก้ให้เป็นหัวเมนูอื่นๆ เราก็สามารถแก้ไขเมนูตรงส่วนนั้นได้แล้ว โดยจะมี #recommend, #previous, #favourites, #links, #categories, #archives, #tags, #pagemenu
border:3px dotted #00f;
คือ border:ขนาดของขอบ ลักษณะของขอบ สีขอบ
เนื้อหาส่วนนี้ entry ที่แล้วลงไว้แล้วดังนั้นเพื่อประหยัดพื้นที่ขอย่อให้เลื่อนอ่านเอานะครับ
ในส่วนโค้ด border นั้นแบ่งเป็นสามส่วน
border:ขนาดของขอบ ลักษณะของขอบ สี;
ขนาดของขอบ : ปกติจะใส่ค่าเป็น px แต่ก็มีกำกับด้วยอย่างอื่นแทนได้คือ thin(บาง) medium(ปานกลาง) thick(หนา)
ลักษณะของขอบ :มีดังนี้
dotted 
dashed
solid
double
groove
ridge
inset
outset
สี:นิยมใช้ทั้งชื่อสี เช่น red white black หรือ โค้ดสีตัวอย่างโค้ดสีดูได้จากที่นี่ http://www.colorschemer.com/online.html
การใช้ border จะสามารถช่วยเราตกแต่งรูปต่างๆ ได้มากใช้ให้ชำนาญจะดีที่สุดครับ และเรายังสามารถใส่ border เฉพาะขอบแต่ละด้านได้ด้วย
border-top, border-right, border-bottom, border-left เลือกใส่ได้เลยจะใส่ด้านเดียวก็ได้ หรือหลายด้านก็ได้ เช่น
#links li{
border-bottom:5px dotted #00f;
border-top:5px dashed #00ff00;
border-left:5px solid green;
border-right:5px double #f00;
}
Step 2:
แบบที่ 1
บางครั้งเราอยากให้ขอบมีอยู่แค่ในส่วนของ list เท่านั้นก็สามารถทำได้โดยกำกับด้วย #ชื่อเมนู ul{...}
เช่น
#previous ul{
border:3px dotted #00f;
}
แบบที่ 2
ถ้าต้องการให้มีขอบมันทุกบรรทัดใน list เลยก็ใช้ #ชื่อเมนู li{...}
เช่น
#previous li{
border:3px solid #00f;
}
จะเห็นว่าขอบมันซ้อนกันไม่สวยเราก็เพิ่มบรรทัดนี้เข้าไป margin-top:ขนาดของขอบ(ติดลบ);
เช่น
#previous li{
border:3px solid #00f;
margin-top:-3px;
}
ขอบจะซ้อนทับกันพอดี อย่าลืมนะครับขนาด margin ต้องติดลบ(ศึกษาค่า margin ได้จากบทที่ 2)
แบบที่ 3
และถ้าจะให้ขอบคลุมทั้ง sidebar เลยก็ง่ายใส่ไปเลย
#sidebar ,#sidebar2{
border:3px dotted #00f;
}
#sidebar คือ ส่วน sidebar ด้านซ้าย
#sidebar2 คือ ส่วน sidebar ด้านขวา
ซึ่งปกติเราใช้แค่ตัวใดตัวหนึ่ง ดังนั้นเวลาเขียนก็สามารถเลือกเขียนแค่ตัวใดตัวหนึ่งได้เช่น #sidebar2{...} ซึ่งจะได้ผลเหมือนกัน
==============
ปรับสีพื้นหลัง เปลี่ยนสีตัวอักษรใน sidebar
Step 1
ปกติเวลาเราปรับ bg จะปรับทั้งแถบเลยนะครับไม่งั้นลายตาพิลึก โดยให้เลื่อนลงมาปรับตรงส่วน #sidebar, #sidebar2{...}
ใน theme apollo จะเป็นแบบนี้ (แต่ละคนอาจจะไม่เหมือนกันนะครับ ให้มองหาหัวข้อเอา)
#sidebar, #sidebar2{
background:#ecf4f7;
display:inline;
float:right;
margin:5px 25px 0px 0px;
width:225px;
}
ก่อนอื่นถ้าจะแก้สี background เราต้องก็เปลี่ยนที่ background ได้เลย
background:สีที่ต้องการ;
แล้วอาจจะใส่ขอบ border เข้าไปประดับตามความพอใจ เช่น (ตัวอย่างจาก sidebar ของผมเอง ซึ่งมีขนาด 240px)
#sidebar, #sidebar2{
background:#000;
display:inline;
float:right;
margin:0px 25px 0px 0px;
width:240px;
border:5px double #fff;
}
*การแสดงผลเวลากด preview อาจจะผิดพลาด เนื่องเพราะเวลาแสดงผลจะแสดงผล sidebar หลายตัวแก้ได้โดยใช้ display:none; ใส่ใน sidebar ตัวที่เราไม่ได้ใช้ เช่น
#sidebar{
display:none;
}
ใส่โค้ดนี้ไปจะทำให้ไม่เห็น sidebar ฝั่งซ้าย
Step 2:
ตอนนี้สีพื้นหลังเปลี่ยนแล้วก็มาเปลี่ยนสีตัวอักษร ซึ่งทั้งหมดในรายการ sidebar สีตัวอักษรจะเป็นลิงค์ดังนั้นเราจะใช้ #ชื่อ a{ color:โค้ดสี ;}
ในส่วนชื่อนั้นจะมี #sidebar (แถบด้านซ้าย) #sidebar2 (แถบด้านขวา) และสามารถกำกับค่าสีเฉพาะส่วนด้วยชื่อหัวข้อต่างๆ ได้เช่นเดิม #recommend, #previous, #favourites, #links, #categories, #archives, #tags, #pagemenu
เช่น
#sidebar2 a{
color:#f00;
}
#previous a{
color:#00f;
}
จะออกมาเป็นแบบนี้
ส่วนของลิงค์อื่นๆ ใน sidebar จะเป็นสีแดง(#f00) เฉพาะส่วนของ previous จะเป็นสีน้ำเงิน (#00f)
โค้ดสีต่างๆ หาได้จากที่นี่ http://www.colorschemer.com/online.html
=======================
เปลี่ยนสีตัวอักษร เปลี่ยนสีฉากเวลาเอาเมาส์ไปวาง
ใครอ่าน entry ก่อนหน้านี้คงพอทำเป็นแล้วนะครับ แต่ขอเริ่มใหม่อีกทีเฉพาะ sidebar
หัวข้อเมนูใน sidebar จะมี #recommend, #previous, #favourites, #links, #categories, #archives, #tags, #pagemenu
เวลาเราจะเปลี่ยนสีตัวอักษรจากเมนูไหนก็เลือกจากพวกนี้ แล้วใช้หัวข้อแบบนี้ #ชื่อหัวข้อ li:hover{...}
การเติม :hover เข้าไปคือทำให้เกิดการแสดงผลเมื่อเอาเมาส์ไปวางตัวอย่าง
#previous li:hover{
background:#000;
color:#fff;
}
#previous = ชื่อเมนู
li = ส่วนย่อยของเมนู
:hover = แสดงผลเมื่อเอาเมาส์ไปวาง
background:โค้ดสี = เปลี่ยนสีพื้นหลังเป็นสีนี้
color:โค้ดสี = เปลี่ยนสีตัวอักษรเป็นสีนี้
ดูโค้ดสีได้จาก http://www.colorschemer.com/online.html
=========================
ใส่รูปหน้ารายการ list ในเมนู sidebar
Step 1
เตรียมรูปขนาดพอเหมาะ ไม่ควรใหญ่เกินไป เดี๋ยวบล็อกแหก และถ้าจะทำควรขยายหน้า page และส่วน sidebar ของเราดวยก็ดีนะครับ ดูวิธีได้จากบทที่ 2
*ควรทำให้เป็นรูป .png หรือ .gif ที่มีพื้นหลังใส หรือ มีพื้นหลังสีเดียวกับ bg เราจะได้สวยงาม
ตัวอย่างรูปที่ผมเตรียมมาขนาด 40*40px
Step 2
เลื่อนลงมามองหาส่วนนี้
#sidebar .module ul, #sidebar2 .module ul{
margin:5px 0px 0px 5px;
padding:0;
list-style:none;
}
ลบบรรทัด list-style:none; ออกไปเลย เมื่อลบแล้วกด preview ดูจะเห็นจุด list โผล่ออกมา
Step 3
คราวนี้เราก็เลือกใส่รูปหน้ารายการ list ได้โดยกำกับด้วย #ชื่อเมนู ul{ list-style:inside url(ลิงค์รูป); }
ชื่อเมนูลืมกันหรือยังครับประกอบด้วย #recommend, #previous, #favourites, #links, #categories, #archives, #tags, #pagemenu
ตัวอย่าง
#previous ul{
list-style:inside url(http://www.pocketonline.net/g2engine/d/33983-1/list.png) ;
}
#previous = หัวเมนู
ul = ส่วน list
inside = ให้รูปที่เตรียมมาเข้าไปอยู่ในบรรทัดเดียวกับรายการ list ถ้าไม่ใส่รูปจะทะลุ sidebar ออกไป
url(ลิงค์รูป) = ลิงค์รูปที่จะใช้ mark หน้า list
ถ้าจะทำหลายๆ อันแบบเดียวกันก็ได้โดยใช้ , คั่น เช่น
#previous ul, #recommend ul, #categories ul{.....}
ก็จะแสดงผลแบบเดียวกันหมด
Step 4
มีบางเมนูที่เราไม่ต้องการให้มีรูปหน้ารายการ list อย่างเช่นส่วน #links ที่มี banner สวยๆ อยู่ก็สามารถเอารูป list ออกได้ด้วย list-style:none;
ตัวอย่าง
#links ul{
list-style:none;
}
เช่นเดียวกันสามารถใส่ส่วนที่ไม่ต้องการให้มีหลายๆ ส่วนพร้อมกันได้โดยการคั่นด้วย ,
#links ul, #favorites ul{....}
ซึ่งจะทำให้แสดงผลเช่นเดียวกัน
===================================
ปรับแต่ง css บทที่ 3 ก็จบลงแต่เพียงเท่านี้นะครับ
จริงๆ แล้วยังมีอีกพอสมควร และ ตอนแรกจะใส่ส่วน comment ไปด้วย แต่ทำไปทำมามันชักเยอะเลยยกยอดไป entry หน้าก้แล้วกัน
ในส่วนของเนื้อหาหากอ่านแล้วพบปัญหาให้ถามมาได้นะครับ บางครั้งเนื้อหาอาจผิดพลาดได้เหมือนกัน ผมจะได้รีบแก้ไข
พบกันใหม่ entry หน้าครับ ^ ^
#1 By Nuts on 2009-10-23 18:40