Howto

[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 ทั้งหลายด้านบนด้วย ไม่งั้นเบี้ยวชัวร์ ๆ

.entry{
float:left;
margin:10px 10px 10px 10px;
margin-bottom:10px;
}

- ใส่ margin เข้าไปหน่อยค่ะ ตัวหนังสือของบล็อคจะได้ไม่ติดกับขอบ



.entry .title h2{

border-bottom:1px solid #3B4B61;
font-size:18px;
}

- มันคือสีเส้นใต้ชื่อหัวข้อ Entry น่ะค่ะ .. เปลี่ยนสีตามใจชอบ

.entry .title h2 a{
color:#3F3A4F;
}

.entry .title h2 a:hover{
color:#CCCCCC;
}

- อันนี้คือชื่อหัวข้อ Entry ค่ะ เหมือนเดิม เปลี่ยนสีตามใจชอบ
- hover ก็คือเวลาเอาเมาท์ไปวางตรงหัวข้อ แล้วอยากให้เปลี่ยนสีเป็นสีอะไรน่ะค่ะ ก็เปลี่ยนสีอีกเหมือนเดิมค่ะ

.entry .title span{
color:#4E4F61;
font-size:10px;
}

- ตรงนี้คือส่วนใต้เส้นน่ะค่ะ ว่า Entry นี้โพสวันไหน เวลาเท่าไหร่ เปลี่ยนสีตามใจชอบค่ะ


ส่วน Sidebars

#sidebar, #sidebar2{
background:#78A5A9;
display:inline;
float:right;
margin:5px 10px 0px 0px;
width:195px;
}

- Sidebar คือฝั่งเมนูต่าง ๆ น่ะค่ะ เปลี่ยนสี และอย่าลืมเปลี่ยน width ให้สอดคล้องกับ Content ด้วยค่ะ ไม่งั้นบล็อคจะเบี้ยวค่ะ

ส่วน Sidebar Header image

#sidebar #recommend h2, #sidebar2 #recommend h2{background:url(...........) no-repeat; width:137px;height:34px}
#sidebar #previous h2,#sidebar2 #previous h2{background:url(...........) no-repeat;width:118px;height:34px}
#sidebar #commentalert h2,#sidebar2 #commentalert h2{background:url(...........) no-repeat;width:173px;height:34px}
#sidebar #favourites h2,#sidebar2 #favourites h2{background:url(...........) no-repeat;width:114px;height:34px}
#sidebar #links h2,#sidebar2 #links h2{background:url(...........) no-repeat;width:74px;height:34px}
#sidebar #categories h2,#sidebar2 #categories h2{background:url(...........) no-repeat;width:111px;height:34px}
#sidebar #archives h2,#sidebar2 #archives h2{background:url(...........) no-repeat;width:93px;height:34px}
#sidebar #tags h2,#sidebar2 #tags h2{background:url(...........) no-repeat;width:59px;height:34px}
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{background:url(...........) no-repeat;width:72px;height:34px}

- มันคือคำว่า Recommend, Previously, Links อะไรพวกนี้น่ะค่ะ ระบบใหม่ใช้เป็นไฟล์รูปภาพน่ะค่ะ เลยเป็นลิงค์ url ถ้าเล่นง่าย ๆ ก็เอาตามของเค้าเลยก็ได้ ไม่ต้องเปลี่ยน
- แต่ของบีจังเปลี่ยนค่ะ เอิ๊กกก ก็ไปทำใน Photoshop ให้พื้นหลังเป็น Transparent เซฟเป็น .png ทำทุกอันเลยค่ะ แล้วอัพขึ้นโฮส เอา url แต่ละภาพมาลงในแต่ละหัวข้อพร้อมกับใส่ค่า width กับ height ถ้าไม่ใส่มันจะซ้อนกันค่ะ


ส่วน Module

#profile{

width:95%;
height:100px;
}

- Profile ตรงนี้คือส่วนของรูปแทนตัวน่ะค่ะ (LiveJournal เรียกว่า Icon)
- ของ Default มัน 64px .. แต่ปกติ บีจังจะทำ Icon ไว้ที่ 100*100 px ดังนั้นขนาดมันจะไม่พอดี ก็เลยเปลี่ยนตรงนี้ด้วยค่ะ

ส่วน Comment Form

#commentform{
width:100%;
background:#446C70;
float:left;
}

#commentform .formrow{
border-top:1px solid #103D41;
padding:2px;
}

#commentform textarea{
width:310px;
height:150px;
}


- บีจังเปลี่ยนสีค่ะ ตรงนี้คือส่วนของกล่องพิมพ์ Comment สีที่เปลี่ยนคือพื้นด้านหลังค่ะ
- formrow คือเส้นในส่วน Comment ค่ะ เปลี่ยนสีให้เข้ากันกับโทนสีธีมค่ะ
- textarea คือส่วนช่องที่ให้คนอื่นพิมพ์ข้อความ Comment น่ะค่ะ ตั้งความกว้างความสูงได้ตามใจชอบค่ะ


ส่วนแสดง Comment

.comment{
border-bottom:1px solid #103D41;
float:left;
margin:5px 5px 5px 5px;
padding-bottom:5px;
width:100%;
}

- ตรงนี้คือหน้าตาของส่วนแสดง Comment ค่ะโดยรวมค่ะ รายละเอียดเหมือนบน ๆ

.comment .info{
float:left;
font-size:10px;
width:100px;
margin-right:10px;
line-height:1.5em;
}

- ตรงนี้เป็นส่วนรายละเอียด Comment ค่ะ อยากให้ Font ขนาดไหน Line-height แค่ไหน ปรับตรงนี้ค่ะ

ส่วน Leg

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

#leg .module{
background:#473e3c;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;
}

- Leg เป็นส่วนที่อยู่เหนือ Footer .. คล้าย ๆ กับ Neck นั่นล่ะค่ะ ปรับแต่งเหมือนกัน ของบล็อคบีจังใช้โค๊ดสีไปเลย (สีเดียวกับ Neck) แล้วก็ปรับ width ค่ะ


ส่วน Footer

#footer{
background:url(http://g.exteen.com/t/darkapollo/footer.png) bottom left no-repeat;
height:60px;
}

#footer p{
background:#EEE;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
font-size:10px;
text-align:center;
margin:5px 25px 0px 25px;
padding:5px;
}

- Footer เป็นส่วนแถบด้านล่างสุดค่ะ รายละเอียดเปลี่ยนเหมือนเดิมค่ะ เปลี่ยนสี หรือลิงค์รูปตามใจชอบ

แถม

strong {
font-weight:bold;
}

- ใส่โค๊ดที่ว่าไปท้ายสุดค่ะ เหมือนว่าตอนนี้โค๊ดตัวหนามีปัญหาน่ะ บีจังก็เจอ กดหนาแล้วมันไม่หนาแฮะ แต่ใส่โค๊ดนี้ไปมันก็หนาค่ะ ดังนั้น ตอนนี้ใส่ไปก่อนเน้อ

Note :
- จะว่าไป ทั้งหมดที่กล่าวมา มันก็แค่เปลี่ยนสี ปรับขนาดความกว้างและตกแต่งนิดเดียวเองค่ะ ไม่ได้มีโค๊ดเพิ่มจากเดิมเท่าไหร่เล้ย
- ถ้าคนที่งง ๆ จะเล่นง่าย ๆ .. ไม่ต้องไปยุ่งกับ CSS ให้ปวดหัว แนะนำให้ทำหัวบล็อคขนาดความกว้าง 730px ความสูง 180px แล้วอัพขึ้นตรง ๆ ผ่านเมนู Colors & Pictures แล้วก็เปลี่ยนสีต่าง ๆ ตรงนั้นไปเลยค่ะ
- เปลี่ยนตรงโน้น ตรงนี้ แล้วลองกด Preview ดูก่อนก็ได้ค่ะ จะได้เห็นหน้าตาว่าไอ้ที่เปลี่ยน ๆ น่ะ มันจะออกมาเบี้ยวแค่ไหน อิอิ
- ลองเปิด Test ดูทั้ง IE และ Firefox .. อย่าคิดว่าทุกคนจะต้องใช้ IE เพราะที่เห็น ๆ มา คนใน Exteen หลายคนใช้ Firefox บีจังก็ใช้ Firefox ค่ะ .. Test ดู ว่าหน้าตาบล็อคมันโอเคไหม บางที Browser คนละตัว บล็อคมันจะตรงจะเบี้ยวไม่เหมือนกันนะเออ


ปรับแต่งมั่วไปมั่วมา บล็อคบีจังก็ออกมาเป็นแบบนี้นั่นแล หุหุ ... ยังไม่ค่อยพอใจกับพื้นหลังค่ะ จะเอาสีพื้นเลย มันก็ธรรมดาไป จะแต่งมากไป องค์ศิลป์ก็ไม่ลง ทำออกมาก็ไม่สวย เลยเล่นง่าย แถบยาว เอิ๊กกก .... .... ส่วนหัวบล็อค ทำเอาไว้แล้วค่ะ ก็เลยเอามาใช้เลย ไว้จะทำ Howto ให้วันหลัง (ถ้าไม่ลืมนะ)

สรุป .. .. ที่ Exteen กลายเป็นธีมคล้าย ๆ Multiply ไปซะแระ เอิ๊กกกก นี่ถ้าเปลี่ยน LiveJournal กับ Bloggang ด้วยละก็ บรรเจิดค่ะ 555

เอ่อ ... ไม่ใช่คนเก่งเรื่อง css นะคะ ถามอะไรมา ถ้าตอบไม่ได้ ก็อย่าว่ากันเน้อ

ปล. รู้สึกภาพประกอบจะเร้าใจกว่าเนื้อหา 5555