ปรับนิดแต่ง theme หน่อยก็สวยแล้ว
posted on 23 May 2009 20:33 by cstproject in General, iT
อ่า... สวัสดีขอรับ~~~ ไม่ได้อัพนานแล้ว (ประมาณ 5 ชม.) เอนทรี่เมื่อกี้ อัพแก้ดองไป คราวนี้กลับมาเรื่อง 7 เอนทรี่เหมือนเดิมแล้วคร้าบบบ
ที่ผ่านมาอัพแต่เรื่องที่ไม่เคยอัพมาทั้งนั้น มาเอนทรี่นี้ได้กลับมาอัพเรื่องที่ถนัดเหมือนเดิมแล้ว^ ^
ก่อนอื่นอยากถาม (ให้ตอบในใจ) หลายๆคน ที่เพิ่งเข้ามาสมัครเว็บ exteen ว่า เคยแต่งบล็อกกันรึเปล่า?
ทำไมต้องแต่งบล็อก???
ปกติเวลาคุณเลือกทานข้าว แวปแรกที่ตัดสินก็คือ "หน้าร้าน" ถ้าหน้าร้านไม่สะอาด หรือสกปรก เป็นผมคงหนีไปเลย (เว้นแต่มีร้านเดียวก็ฝืนต่อไป =w=)
บล็อกก็เช่นกัน "ธีม"(Theme) ก็ถือเป็นหน้าร้านที่คอยต้อนรับผู้เข้าชม หากว่ามีคนแปลกหน้า(น่ากลัว!!)คนภายนอกลองเข้ามาดูว่าเป็นอย่างไรบ้าง ถ้าธีมตัวหนังสือเรียบๆ พื้นหลังสีขาวๆ ก็อาจจะกดปุ่มปิดไปแล้วก็ได้
เพราะฉะนั้น อย่าละเลยเรื่องสำคัญพวกนี้ หากคุณต้องการให้คนเข้ามาเยอะๆ หรือมีเพื่อนเยอะๆ
วันนี้ผมจะสอนแต่ง CSS บล็อก(ตามคำขอ) แบบมือใหม่ก็ทำได้ (พยายามเขียนให้เข้าใจง่ายที่สุดนะครับ) ดัดแปลงจากธีมหากิน "My Apollo" มาทำให้่สวยขึ้น
คำแนะนำ : คนที่ปรับจากโหมด wizard (แม่มด!!) [โหมดแต่งสำเร็จรูป] มาเป็น CSS Editor จะกลับมาโหมดเดิมไม่ได้แล้วนะ ตัดสินใจดีๆ
==========================================================
ความรู้พื้นฐานก่อนจะเรียน (เอาไว้ประดับสมอง หนักกบาลเล่นๆ)
ก่อนที่เอาจะขอมาแก้ css นั้น ต้องมีพื้นฐานเรื่องพวกนี้ก่อน เวลาแก้ปรับเปลี่ยนอะไร จะได้เข้าใจไงล่ะ...
1. รู้ก่อน แต่ง css ที่ไหน
ไม่รู้ก็ไปตายซะไป๊!! ล้อเล่น แหะๆ เราคงไม่ใจร้ายขนาดนั้นหรอก (แค่ 1 ใน 4 เท่านั้นเอง) เย้ย
ไปที่ Theme -> เลือกธีมตัวเอง -> Edit -> CSS Editor (อยู่ด้านบน)
2. เวลาแต่ง css พยายามเลี่ยงการใช้ IE
เพราะว่าจะมัน copy หรือ paste โค้ดเมื่อไหร่ มาจะเว้นบรรทัดเรื่อยๆ (สรุป IE มันห่วย = =") แนะนำว่าใช้หมาไฟจะดีกว่า (โครมก็ใช้ได้ชิมิ)
3. รู้จักรหัส RGB Code
และแล้ว เดี๋ยวมันต้องมีคนบ่นว่า "RGB คือไรวะแสรด" ตอบให้ก็ได้ (บล็อกจะเสื่อมก็เพราะคำหยาบนี่แหละ -..-)
RGB มันก็อ่านว่า อาร์-จี-บี นั่นแหละคงไม่มีใครอ่าน อาร์จุ๊บุ จุ๊บุ หรอก = =; บางคนเคยผ่านหูมาบ้างแล้วละ ตอนแต่ง "ฮิห้า" ก็คงถนัดเลย
RGB ก็ตามที่ใส่สีนั้นแหละ ย่อมาจาก R = Red, G = Green, B = Blue เป็นแม่สี 3 สีตามหลักศิลปะ (ทั้งๆที่สอนคอมอยู่ -*-) เมื่อจับสีใดสีหนึ่งรวมกัน ก็จะได้สีใหม่ขึ้นมา
เหมือนช่อง 7 สีซะมากกว่า =w= (credit: minutemanbristol.com)
เอ้า!! กลับมาเรื่อง RGB Code ต่อ
"RGB Code" มันก็คือรหัสตัวเลขแทนแต่ละสีนั่นแหละ
เช่น #FF0000 จะได้ "สีแดง"
#0000FF จะได้ "สีน้ำเงิน"
จะได้สีอะไรก็ใช้รหัสสีนั้น หาได้จาก google ตามสบาย
(Ex: http://multimedia.udru.ac.th/homecs1/Black_sky/color.html)
4. สามารถอัพภาพเป็น (เพราะต้องมาที่อยู่เว็บมาใช้)
ไม่มีก็แนะนำ imageshack.us หรืออื่นๆ กลับไปดู 10 เว็บ service เอาละกัน(โฆษณาไปในตัว หึหึ)
5. คำศัพท์ใน CSS เบื้องต้น
width = ความกว้าง สามารถกำหนดเป็นตัวเลข pixel(px) หรือเปอร์เซ็นต์ได้ ระบุเป็น height:180px;
height = ความยาว (เหมือนกันล่ะ)
ตำแหน่งวางมีหลายคำสั่งที่ใช้กับตัวนี้
left อยู่ซ้ายสุด - right อยู่ขวาสุด - center อยู่ตรงกลาง
~~พอเข้าใจแล้วก็เริ่มกันเลย~~
==========================================================
1. แก้ header ซะก่อน (รูปบนหัวน่ะ)
- ให้วาดรูปที่ตัวเองสร้าง (กว้างมาตรฐาน 730 x 180 px)
- อัพขึ้นเว็บนำลิงค์ใส่(แทนในตัวอักษรสีเทา)
- หา #coverimage (กด Ctrl+F สิครับ พิมพ์ "#coverimage")
(หากว่ารูปใหญ่กว่า ต้องการกว้างกว่านี้แก้ที่ตัวเลขด้วยนะครับ)
background:url(ที่อยู่ของไฟล์รูป) no-repeat;
height:180px; //สูง
margin-bottom:5px;
}
2. แก้ background (พื้นหลัง) ซะ
- หา body {
background:#c7e1e9 url(ที่อยู่ของไฟล์รูป) repeat-x top left;
color:#333;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
}
ตัวอักษรสีแดง : ใช้รหัส RGB Code (Background เลือกสีระหว่างโหลดรูปพื้นหลัง / color เลือกสีตัวอักษรทั้งหมด)
สีส้ม : line-height:1.5em; กำหนดระยะห่างระหว่างบรรทัด (แก้ตัวเลขก็พอ)
ถ้าต้องการล็อกพื้นหลังไม่ให้ขยับระหว่างเลื่อน ใส่เพิ่มคำสั่งไปเพิ่ม(ตัวหนังสือสีน้ำเงิน)
background:#c7e1e9 url(ที่อยู่ของไฟล์รูป) repeat top left;
color:#333;
background-position: center top;
background-attachment: fixed;
font:12px Tahoma, "Microsoft Sans Serif", "MS Sans Serif";
line-height:1.5em;
text-align:center;
}
3. แก้สีพื้นหลังของ sidebar
หา #sidebar
background:#565656;
display:inline;
margin:5px 25px 0px 0px; //เว้นระยะจากกรอบ
}
4. เปลี่ยนภาพหัวข้อใน sidebar
หา /* Sidebar Header image */
#sidebar #recommend h2, #sidebar2 #recommend h2{background:url(ที่อยู่ของไฟล์รูป Recommand) no-repeat;width:131px;height:19px;}
#sidebar #previous h2,#sidebar2 #previous h2{background:url(ที่อยู่ของไฟล์รูป Previous) no-repeat;width:104px;height:23px;}
#sidebar #commentalert h2,#sidebar2 #commentalert h2{background:url(ที่อยู่ของไฟล์รูป Lastest Comment) no-repeat;width:181px;height:19px;}
#sidebar #favourites h2,#sidebar2 #favourites h2{background:url(ที่อยู่ของไฟล์รูป Favorite) no-repeat;width:105px;height:19px;}
#sidebar #links h2,#sidebar2 #links h2{background:url(ที่อยู่ของไฟล์รูป Link) no-repeat;width:52px;height:19px;}
#sidebar #categories h2,#sidebar2 #categories h2{background:url(ที่อยู่ของไฟล์รูป Categories) no-repeat;width:112px;height:23px;}
#sidebar #archives h2,#sidebar2 #archives h2{background:url(ที่อยู่ของไฟล์รูป Archives) no-repeat;width:89px;height:19px;}
#sidebar #tags h2,#sidebar2 #tags h2{background:url(ที่อยู่ของไฟล์รูป Tag) no-repeat;width:49px;height:23px;}
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{background:url(ที่อยู่ของไฟล์รูป Page) no-repeat;width:64px;height:23px;}
5. เปลี่ยนสีพื้นหลัง Neck (คอ =3=)
หา #neck .module{
background:#1b1a1b;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px; // ความกว้าง
}
6. แก้พื้นหลังตรงกล่อง comment
หา #commentform{
background:url(ที่อยู่ของไฟล์รูป) top no-repeat; //ถ้าต้องการให้มีรูปพื้นหลัง (แนะนำขนาดไม่เกินความกว้างของบล็อกซัก 490px × 300px น่าจะได้มั้ง)
width:100%; //ความกว้าง
background:#EEE; //สีพื้นหลัง
float:left;
}
หมายเหตุ สีน้ำเงินคือเพิ่มเข้าไป ถ้าต้องการส่วนนี้
อีกนิด ต้องการไม่ให้มีเส้นหา #commentform .formrow{
แก้ border-top:1px solid #DDD; เป็น border-top:1px ; เท่านี้ก็ไม่มีเส้นมารำคาญพื้นหลังแล้ว ^ ^
7.รายละเีอียดเล็กน้อยๆ (แก้สีตัวอักษรตามใจฉัน)
[แก้สีลิงค์] หา a:link, a:visited{
text-decoration:none; //ขีดเส้นใต้
a:hover, a:active{//ลิงค์เมื่อเม้าส์วางทับ
color:#AA0D00;
}
[แก้สีชื่อเอนทรี่] หา .entry{ แล้ววางเพิ่มด้านล่างต่อจาก .entry{
.
.
}
color:#ffffff;
}
.entry .title h2 a:hover{ //ตรงคำว่า "THEME" เมื่อลิงค์โดนเม้าส์ color:#aa0d00;
}
//คัดลอกคำสั่งด้านล่าง แล้วเพิ่มตรงนี้
.entry .title span{
color:#a90a00;
font-size:10px; //ขนาดตัวอักษร
ที่เหลือก็ดูจากภาพเองนะครับ (by xVista)
==========================================================
คาดว่าทำครบทุกข้อ theme ของเราก็คงจะสวย (ขึ้นอยู่กับฝีมือด้วย =w=)
ของเล่นบล็อก (Extension) ที่ควรมีไว้ประดับบารมี เหอๆ
Favourites Extension (by xVista)
ใส่ Loading ให้กับบล็อก (by cartoonst)
กูเกิลเสิร์ชในบล็อกฉัน (by farsaiex)
ใส่ hotball ที่ชื่อเอนทรี่ (by farsaiex)
โค้ดใส่ icon บนบล็อก (by bbears) [อยู่ด้านล่างๆ นะ]
Script แทรกอีโมสำหรับชาวฟอนต์ใน exteen (by korstudio)
ทำภาพซูมด้วย jQuery lightBox (by itshee)
วิธีขยายบล็อกให้กว้างขึ้น (by oatato)
สลับลายให้ exteen comment (by talalan)
เว็บแต่งบล็อกที่ควรจะศึกษา
http://jennessa.exteen.com/ (ของเค้าดีจริงๆ)
http://bbears.exteen.com (อธิบายตั้งแต่หัวจรดเท้าเลยล่ะ เหมาะกับ advance)
http://jennessa.exteen.com/20071010/pages-exteen-1
Page คืออะไร และใช้อย่างไร
http://zedth.exteen.com/20071009/edit-by-exteen-v-4-0
วิธีแก้ไม่ให้มีคำว่า edit by.. เวลาแก้ไข entry
http://zedth.exteen.com/20071009/ems
วิธีใช้ ems (exteen message service)
http://zedth.exteen.com/20071009/comment-system-in-exteen-v-4-0
ระบบคอมเมนต์แบบใหม่ การตั้งค่าต่างๆ
http://zedth.exteen.com/20071010/entry
วิธีแก้ไข ไม่ให้หน้าบล็อกเจ๊ง ข้อมูลจัดกลางหน้า
http://board.exteen.com/help/read/91/page/1
วิธีแก้ไข ให้หน้าบล็อกโหลดเร็วขึ้น (โหลด content ก่อน sidebar)
http://board.exteen.com/help/read/86
ทำตัวหนาในหน้า entry แล้วไม่ยอมเป็นตัวหนา
http://board.exteen.com/help/read/87
ปัญหาที่ได้รับการแก้ไขแล้ว
http://board.exteen.com/help/read/78
session ในหน้า stat คืออะไร
http://tukkae.exteen.com/20071009/theme-css
โครงสร้าง theme แบบใหม่อย่างคร่าวๆ
เอาละไหนๆ เอนทรี่นี้เป็นเอนทรี่สุดท้ายของโครงการละยังไงก็ขอฝากไว้ด้วยนะครับ ขอบคุณครับ ^ ^
(1 ใน โปรเจกต์เอนทรี่ 7 Days 7 Entrys by cartoonst)
edit @ 13 Jun 2009 22:03:03 by cartoonst
(ซึ้ง~~)
/cstproject
เอนทรี่นี้สุดยอด !!
#1 By Prae on 2009-05-24 00:23