[Howto] เปลี่ยน Theme กับ Dark Apollo

posted on 11 Oct 2007 23:33 by glorfindel in Howto

จริง ๆ ก็ใช้ Theme เดิมมาหลายเดือนแล้วล่ะ ก็ตั้งใจจะเปลี่ยน เผอิญ Exteen อัพระบบใหม่ก็พอ เอ้า ได้ลองของใหม่ให้ปวดหัวเล่น เอิ๊กกกก


อืม .. ไม่เชิงเป็น Howto หรอกนะคะ เพราะไม่ใช่คนเก่ง css แต่มีของใหม่ เราต้องลอง และชาวบ้านเค้าก็อัพฉลองระบบใหม่ เปลี่ยนธีมเล่นกันหมดแล้ว บีจังจะดองบล็อคอีกก็กระไรอยู่

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

เอ้า มาลองกันดีกว่า ในที่นี้ ใช้ Dark Apollo ค่ะ ...

Note : ข้อแนะนำต่าง ๆ ค่า

- ขอบคุณ ข้อมูลทุกบล็อคใน Help ค่ะ
- ก่อนจะทำอะไรทุกอย่าง ... ทำ Backup ไว้ก่อนค่ะ กันพลาด ให้ก๊อปปี้โค๊ด css ธีมเดิมไว้สักที่ บีจังใช้ Notepad ค่ะ แล้วก็ Save ไว้ในเครื่อง ถ้าเกิดทำโค๊ดใหม่พัง เรายังมีสำรอง เอิ๊กกกก
- แล้วบีจังก็เซฟโ้ค๊ด Default ของ Dark Apollo เอาไว้อีกไฟล์ เอาไว้ใช้งานง่าย ๆ และเทียบโค๊ดเวลาเราเปลี่ยนไปแล้วด้วยน่ะค่ะ กันพลาดอีก จะได้ไม่พัง อิอิ


- ปกติ บีจังจะไม่ลบโค๊ดที่ไม่ต้องการ แต่จะทำ Comment เอาไว้แทนค่ะ ระบบจะไม่อ่าน Comment ค่ะ ไม่ต้องกลัว .. ทำ Comment ใช้แท็ค /* ปิดท้ายด้วย */ ... ... เอ่อ Comment ในที่นี้ไม่ใช้ Comment ที่คนอื่นมา Comment ในบล็อคนะคะ .. Comment มันคล้าย ๆ กับการเขียนรายละเอียดกำกับเอาไว้เตือนตัวเองน่ะ ว่าไอ้เจ้าโ้ค๊ดนี้มันคืออะไรน่ะ มีประโยชน์สำหรับ Programmer เวลาทำโปรแกรมร่วมกับคนอื่นค่ะ
- สังเกตสีค่ะ ... เปลี่ยนเป็น CSS Editor แบบนี้ดีค่ะ เพราะเราเห็น 'สี' ถ้าเกิดสีมันแปลก ๆ นั่นล่ะ พิมพ์ผิดชัวร์ค่ะ โค๊ดส่วนหน้าเป็นสีน้ำเงิน รายละเอียดการตั้งค่าของเราจะเป็นสีแดง ถ้าเป็น Comment จะเป็นสีเทาค่ะ
- โค๊ดสีต่าง ๆ เปิด Photoshop แล้วจิ้ม ๆ เอาค่ะ ... มันจะเป็นตัวเลขตัวอักษรหกตัว แต่เวลาลงโค๊ด อย่าลืมใส่ # ด้วยเน้อ


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

ส่วน General

body {
background: url(.......) repeat top left;
color:#22314F;
font:12px Tahoma, "MS Sans Serif";
line-height:1.7em;
text-align:center;
background-attachment: fixed;
}

- Body ก็หน้าตาของบล็อคนี่ล่ะค่ะ หลักของ CSS คือ เปิดด้วย { ... } แต่ละบรรทัด จะคั่นด้วย ; ...
- background : ... มันคือส่วนของพื้นหลังค่ะ .. ถ้าจะใส่เป็นรูป ก็ใส่ url ลงไป ตั้งค่าตามชอบว่าจะ repeat หรือ no-repeat ค่ะ ถ้าไม่เอารูป แค่สีพื้น ๆ ธรรมดา ก็ใส่โค๊ดสีแบบนี้ไปเลย background: #0D2F32
- background-attachment : เวลาใส่รูปแล้วไม่อยากให้รูปมันเลื่อนเวลาเราเลื่อนลง ให้ใส่ Fixed ค่ะ
- color: ในที่นี้ไม่ใช่สีพื้นหลังนะ แต่เป็นสี Font ของ Entry ต่าง ๆ ค่ะ ก็ใส่โค๊ดสีตามชอบเลยค่ะ
- line-height : คือขนาดความกว้างของแต่ละบรรทัดค่ะ เคยเห็นบางบล็อคเว้นน้อยมาก ตัวหนังสือติดกันหมด ยิ่งเป็นภาษาไทยแล้ว ยิ่งอ่านยากค่ะ เพิ่มตรงนี้เลยค่ะ

a:link, a:visited{
color:#3764B8;
text-decoration:none;
border-bottom:1px dotted;
}

a:hover, a:active{

color:#5F3374;
}

- ส่วนนี้ก็การเปลี่ยนสี Link ต่าง ๆ ค่ะ a:link, a:visited คือสี Link ส่วน a:hover คือสีเวลาเราเอาเม้าท์ไปวางค่ะ เลือกสีตามใจชอบเน้
- แต่งหน้าตา Link ได้ค่ะ border-bottom: 1px dotted #FFFFFF; .. เป็นการใส่จุด ๆ ๆ ใต้ลิงค์น่ะค่ะ



#page{
margin:auto;
padding-top:15px;
text-align:left;
width:770px;
}

#header, #neck, #belly, #leg, #footer{
float:left;
width:770px;
}

- ที่บีจังเปลี่ยนคือ width ค่ะ ให้สอดคล้องกับรูป Header และหน้าบล็อคค่ะ บีจังชอบบล็อคกว้าง ๆ เพราะเป็นคนช่างเขียน และหน้าจอบ้านบีจังใหญ่ค่ะ (แต่จออื่นดู ยิ่งจอที่ตั้งแค่ 800*600 อาจจะเต็มและกว้างไปนิด เอิ๊กกกก)
- ถ้าเล่นง่าย ไม่ต้องปวดหัว .. ใช้ width ตามเดิมเลยค่ะ แล้วก็ทำภาพหัวบล็อคตามขนาด Default (จะบอกอีกทีตรงโค๊ดหัวบล็อคค่ะ
- padding-top: ตรงนี้คือช่องว่างของขอบบล็อคด้านบน กับด้านบนน่ะค่ะ (อธิบายไม่ถูกวุ้ย) ถ้าจะเว้นช่อง ก็เพิ่มตรงนี้เลย

ส่วน Header

#header{
background:url(http://g.exteen.com/t/darkapollo/header.png) top left no-repeat;
padding:5px 0px 5px 0px;
}

- #้ำheader อันนี้ ไม่ใช่รูปหัวบล็อคนะคะ มันคือขอบรอบ ๆ หัวบล็อคน่ะ ถ้านึกภาพไม่ออก ลองก๊อป url ไปเปิดดู เห็นภาพแล้วจะเข้าใจ อิอิ ... ถ้าไม่เอารูป ก็ใช้สีเอา ของบีจังก็ใช้สีค่ะ ใช้โค๊ดสีแบบนี้เลย background: #9EB9BB

#header h1 a{
color:#666;
font-size:12px;
display:none;
}

- ตรงนี้ชื่อของบล็อคค่ะ .. .. ถ้าไม่ชอบก็ใส่ display:none ซะ


#coverimage{

background:url(...........) no-repeat top center;
height:320px;
width:750px;
border: 10px solid #9EB9BB;
border-bottom: none;
padding: 0 0 0 0;
}

- อันนี้สิ หัวบล็อค .. เอารูปสวย ๆ มาลงได้เลยค่ะ ระบุความกว้างความสูงด้วย จะได้ไม่เบี้ยว .. บีจังใส่ border ไปด้วย เพราะตอนใส่ padding แล้วมันเบี้ยว และกะไม่พอดี แต่พอใส่ border ไปแล้ว รูปหัวบล็อคมันลอยตรงกลางพอดี ก็เลยหยวน ๆ ค่ะ
- จุดนี้ละค่ะ ที่บอกไว้ตรงเรื่อง Width ถ้าไม่อยากปวดหัวแก้ Width (เพราะมันต้องแก้หลายที่) ให้ใช้ภาพหัวบล็อคความกว้าง 730 px ส่วนความสูงภาพตามใจชอบค่ะ
- ไว้ว่าง ๆ จะทำ Howto แต่งภาพจาก Photoshop โดยมือสมัครเล่นค่ะ มั่ว ๆ เอา ออกมาสวยถูกใจก็โอเคเน้

ส่วน Neck

#neck{
background: url(http://g.exteen.com/t/darkapollo/belly.png) top left;
}

#neck .module{
background:#9EB9BB;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;
font-size:12px;
}

- Neck คือคอค่ะ .. เอิ๊กกกก ... บอกไม่ถูกแฮะ มันคือลิงค์คำว่า Home (และอะไรอีกหลายอย่างที่บีจังยังไม่ได้ทำในส่วนของ Page) น่ะค่ะ
- ของบีจังเปลี่ยนเอา url ออก ใส่โค๊ดสีแทนเหมือน Header จะได้สีเดียวกัน เปลี่ยน width ปรับ padding เล็กน้อยค่ะ


ส่วน Content

#belly{
background:url(http://g.exteen.com/t/darkapollo/belly.png) repeat-y;
}

- Belly คล้าย ๆ Neck น่ะ แต่ตรงนี้คือช่วงท้อง เอิ๊กกก สรุปคือไม่รู้นั่นล่ะ บีจังตั้งค่าเหมือน Header คือใสโค๊ดสีแทน จะได้เป็นสีเดียวกัน

#content{
background:#78A5A9;
display:inline;
float:left;
margin:5px 15px 15px 15px;
width:535px;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}

- ตรงส่วนนี้คือช่วงส่วนเนื้อหาแล้วค่ะ บีจังใส่อีกสีนึงไป เพื่อให้มันดูเด่นขึ้นมาน่ะค่ะ แต่ยังเลือกโทนสีฟ้าเหมือนเดิม จริง ๆ ถ้าใครเก่ง ๆ สามารถใส่เป็นรูปก็ได้นะคะ ทำให้เป็นใส ๆ Transparent ก็น่าจะสวย แต่ต้องกะขนาดภาพดี ๆ ค่ะ
- width : อย่าลืมแก้ width ค่ะ มันคือส่วนของ Entry เนื้อหาบล็อค กะให้ดี ให้มันสัมพันธ์กับ width ท