พอฤกษ์งามยามได้เวลา วันนี้เรามาแก้ธีมด้วย Cssกันเถอะ!!

เอนทรียาวยืด ทนอ่านกันหน่อยนะ (สีบลอคเราจ้าไปรึเปล่าหว่า

จอคอมเราสีมันเพี้ยนน่ะค่ะ มรดกตกทอดจากแม่ที่ซื้อเครื่องใหม่)

กว่าจะทำเสร็จเล่นเอาเกือบตายอีกรอบทำรูปมหาโหดนานมากๆ เข้าเรื่องๆ

เราจะไม่โยงเรื่อข้อดีและความหมายนะคะ เพราะเราก็ไม่รู้เรื่อง(รันทดตัวเอง)

เริ่มเลยดีกว่า (เรื่อง เส้นเรื่องหน้า Manage อ่านที่เอนทรี่ก่อนๆ)

เราจะแบ่งเป็นตอนๆเพื่อกันความงง(เรียกว่า"ลด"ดีกว่าเราว่ายังไงๆก็งง)

ถึงจะยังไงอย่าเพิ่งถอดใจ เพราะถ้ายิ่งพยายาม ก็จะได้บลอคสวยๆ(สู้ๆ)

ที่พูดงี้เพราะเคยเป็นมาก่อน - -* เศร้า

นี่เป็นรูปแบบโค้ดของธีม Easy นะ

รูปที่1

.

รูปที่2

.

รูปที่3

..................................

*เรื่อง เส้น นะคะถ้าไม่เอาก็ปรับจาก 1px เป็น 0px ก็พอ ไม่ต้องลบโค้ดก็ได้

**อย่าก๊อบโค้ดตรงพื้นที่อธิบายนะคะ ถ้าเอาไปใส่จริงเกรงโค้ดจะเสีย - -*

...................................

/* สีของลิงค์ */ <<สีของลิงค์ ตอนที่ยังไม่ได้เอาเม้าส์ชี้
a:link, a:visited{
color:#B8D9EC; <<โค้ดสีตรงนี้ ถ้าเปลี่ยนจะมีผลทั้งหน้า(รูปที่1 ตัวหนังสือสีเหลือง)
border-bottom:1px dotted #B8D9EC; <<เส้นใต้ตรงนี้จะไม่มีผลกับเมนูด้านซ้าย มีผลเช่นรูปที่2
text-decoration:none; <<ปล่อยมันไปไม่ต้องสนใจตอนนี้
}
a:hover{ <<อันนี้เป็นสีของลิงค์ตอนเอาเม้าส์วาง(รูปที่3)
color:#B8D9EC; <<สีตรงนี้มีผลเหมือนรูปที่2ค่ะ เป็นลิงค์ประปราย ที่ไม่ใช่แถบด้านซ้าย
border-bottom:1px solid #B8D9EC; <<เส้นใต้ก็เหมือนกันมีผล เหมือนรูปที่2

....................

*repeat ถ้าบีจีไม่เต็มหน้าจะให้มันมีต่อรึเปล่า เหมือนกับ Tile ตอนเราเปลี่ยนDesktopค่ะ

**ความกว้างหน้าบลอค ถ้าเปลี่ยนต้องเปลี่ยนส่วนอื่นๆด้วย ถ้าตรงไหนต้องเปลี่ยนความกว้างให้เหมือนกัน เราจะทำเครื่องหมาย " -*- "

...................

/* ทั้งหน้ามีลักษณะเป็นอย่างไร */ <<ส่วนนี้ให้ดูบีจีสีเหลืองในรูป
.site{
margin:20px;
padding:0px;
text-align:center;
background:url(ใส่ URLรูปสำหรับีจี) #024c77 repeat;<<repeat* ถ้าไม่เอาก็ใส่ no-repeat
background-attachment : fixed <<ใส่ส่วนนี้ กันบีจีไหล ให้มันตรึงอยุ่กับหน้าต่าง
}
/* ความกว้างของหน้าบลอค */
#wrapper{
width:680px; <<ให้ดูส่วนสีน้ำเงินในรูป คือความกว้างตรงนี้** "-*-"
}
/* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */
#all{
width:680px; << "-*-"
float:left;

/* แถบบนสุด */ << อันนี้ถ้าไม่เอาให้ลบออกก็ได้ แต่เอาไว้เป็นสัญญลักษณ์ก็ดี
#uptab{
width:680px; << "-*-"
float:left;
height:29px; << ความสูงของคำว่า "exteen.com"ตัวใหญ่ๆในรูป
background: url(/global/theme/predefined/easy/exteen.gif) right top no-repeat; <<ตรงนี้คือรูปคำว่า "exteen.com"ตัวใหญ่ๆ
}

}
/*แถบกลาง หรือก็คือที่แสดงบลอค */
#midtab{
width:680px; << "-*-"
padding:0px;
border:3px solid #FFFFFF; << เห็นกรอบสีขาวด้าในหน้าต่างไหม คือส่วนเส้นนี้แหละ
float:left;
}
/* แถบล่างสุด */ << อันนี้ ลบไปเหอะ ถ้าไม่ได้เอาใส่อะไร
#downtab{
float:left;
width:680px; << "-*-"
height:4px;
}

รูป1

/* รูปภาพด้านบน เซตความสูงและกว้างตามภาพ */
.picture{
background: url(/images/easytheme_header_c603.jpg) no-repeat; <<รูปเฮดดอกไม้น่ะค่ะ
height: 130px; << ความสูงของรูปดอกไม้เฮด ปรับให้สัมพันธ์กับรูปด้วย
width: 680px; << ความกว้างของรูปดอกไม้เฮด ปรับให้สัมพันธ์กับรูปและบลอค("-*-")ด้วย
border-bottom:1px dotted #FFFFFF; <<เส้นตรงเฮด สังเกตเส้นประด้านล่าง
}
.title{ <<ตรงที่เราล้อมกรอบสีเหลืองในรูป1
font-family: "Microsoft Sans Serif", "Sans Serif";
font-size: 10pt; <<ขนาดตัวหนังสือ
font-weight: Bold; <<สไตล์(ตัวหนา)
color: #FFFFFF; <<สี
padding-right:10px;
vertical-align:bottom;
text-align:right;
}

รูป1

.

รูป2

}
.content{ <<อันนี้ไม่ค่อยแน่ใจเท่าที่ควรแต่น่าจะใช่
width:680px; << "-*-"
font-family: Tahoma, "MS Sans Serif";
font-size: 12px; <<ตัวหนังสือรูปที่1 กรอบแดงๆ
color:#FFFFFF; <<สีตัวหนังสือรูปที่ 1 กรอบแดงๆ
text-align:center;
float:left;
background-color:#024c77; <<ส่วนสีขาวรูปที่2
}

*ถ้าตั้ง "-*-" ไว้ที่ 680 (1)+(2) ต้องไม่เกิน 680..ถ้าเกิน แถบเมนูซ้ายมือจะหล่นไปอยู่ข้างล่าง จะไม่งามเอามากๆ

/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */ <<ตรงที่เราแปะจุดๆๆไว้อะ
.leftcontent{
width:500px; <<ความกว้างของหน้า(1)
float:right;
text-align:left;
background-color:#025F95; <<สีบีจี
border-left:1px #FFFFFF dotted; <<เส้นทางด้านซ้าย
}

/* พวกที่เป็นแถบลิงค์ต่างๆ */ <<ส่วนที่แปะจุดๆ
.rightcontent{
width:179px; <<ความกว้างของส่วนที่แปะจุดๆ(2)
float:left;
text-align:left;
background-color:#025686; <<สีบีจี
border-bottom:1px #FFFFFF dotted; <<เส้นใต้

}
.iday {

}
/* สีของหัวข้อพวก วันที่ ประเภท */ <<ตรงที่สีเหลืองในรูป
.iday h3 {
background-repeat: no-repeat;
background-position: left top;
margin:10px 14px 0px 10px;
padding:3px 0px 3px 3px;
font-size: 14px; <<ตัวหนังสือในกรอบสีเหลือง
color:#FFFFFF; <<สีตัวหนังสือ
background-color:#025686; <<สีตรงสีเหลือง
}
/* เรื่องหนึ่งๆ */
.entry{
padding:5px 15px 5px 10px;
margin:5px 0px 5px 0px;
}

รูป1

.

รูป2

.

/* หัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */
.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{
background-image: url(/global/theme/predefined/easy/bl.gif); <<รูป2ที่กรอบชมพู
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; <<ขนาด
}


/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */
.entryfooter{
border-top:1px dotted #FFFFFF; <<เส้นประข้างบน ในรูป
padding:2px 2px 2px 15px;
color:#FFFFFF; <<ตรงที่เราปาดสีเหลืองในรูป
font-size:9px;
}
/* ชื่อผู้โพส */ <<แถบสีฟ้าในรูป ถ้าไม่มีอะไรอย่างนี้ จะตามโค้ดสีข้างบน
.entryposter{
padding:0px 5px 0px 0px;

}
/* ลิงค์ไปดู comment ของ entry */ <<ตรงที่เราปาดสีชมพูในรูปก่อนหน้านี้ และรูปข้างบน
entrycomment a:link,.entrycomment a:visited,/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
background-image: url(/global/theme/predefined/easy/comment.gif); <<รูปคำว่า"comments"
background-repeat: no-repeat;
color:#B8D9EC; <<สีลิงค์ไปดูคอมเม้นกรอบสีส้ม
text-decoration:none;
padding:0px 80px 0px 0px;
border:0px;
}
/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
color:#FFFFFF; <<สีลิงค์ไปดูคอมเม้นตอนเอาเม้าส์วาง
border:0px;
}
/* แถบแสดงชื่อ */ <<ช่างมันไปก่อน
.profile{
padding:5px; margin:0px 1px 0px 10px;
font-size:10px;
}

/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */ <<ในรูปที่ลูกศรชี้
.sidebar-title{
padding:2px 0px 2px 0px;
color:#FFFFFF; <<สีตัวหนังสือ
font-family:Tahoma; <<รูปแบบฟร้อน
font-size:12px; <<ขนาด
font-weight:bold; <<สไตล์(หนา)
padding-left:10px;
background-color:#024c77; <<สีพื้นหลัง
border-bottom:1px #FFFFFF dotted; <<เส้นจุดๆๆๆๆๆด้านล่าง
border-top:1px #FFFFFF dotted;<<เส้นจุดๆๆๆๆๆด้านบน
}

}
/*แต่ละไอเท็มของแถบด้านข้าง*/
.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image: url(/global/theme/predefined/easy/bl.gif); <<รูปลูกศรสามเหลี่ยม
background-position:0px 2px;
}

.sidebar-item a:link, .sidebar-item a:visited, .sidebar-item a:hover{
font-family:"Trebuchet MS",Tahoma;
text-decoration:none;
font-size:11px; <<ขนาดตัวหนังสือที่ชี้ในรูป
border:0px;
}
.sidebar-item a:hover{
color:#B8D9EC; <<เวลาเอาเม้าส์วาง จะให้เป็นสีอะไร(ส่วนที่ชี้ในรูป)
border:0px;
}

พักครึ่งค่ะ ทำส่วนแรกให้เสร็จก่อน ส่วนหลังเป็นคอมเม้นค่ะ

เอนทรี่นี่เอาโค้ดธรรมดาก่อน เดี๋ยวจะเอาโค้ดเสริมมาลงให้

อยากจะถามว่าเข้าใจไหมคะ เพราะเราอธิบายอะไรไม่ค่อยจะเข้าใจ

กลัวมาเลยขนรูปมาลงเป็นกระบุงเลย วันนี้ได้ดูอนิเมที่นั่งโหลดมาเกือบ 4วันแล้ว

กรี้ดกร้าดกะอาเบลมากๆ 55+ เอสเทลก็น่ารัก ที่ชอบที่สุดเป็นแคทรีน่าดูทรงอำนาจดี

อ่าบ่นมาพอละ ต่อๆๆๆ

}
/* ส่วนคอมเมนต์ */ <<เป็นส่วนที่คนมาโพสค่ะ
.comment{
padding:6px 5px 2px 5px;
margin:10px;
background-color:#025686;<<สีบีจี
}
.commentcontent{ <<ข้อความที่เราเขียนคอมเม้น แถบสีเหลืองในรูป
color: #FFFFFF; <<สีตัวหนังสือ
padding:5px 5px 5px 16px;
font-size:11px; <<ขนาดตัวหนังสือ
line-height: 1.3em;
}
.commentfooter{ <<ส่วนที่ปาดแถบชมพู
padding:2px 2px 2px 15px;
color:#FFFFFF; <<สีตัวหนังสือ
font-size:9px;<<ขนาดตัวหนังสือ
}
.commentdetail{
padding:0px 5px 0px 0px;
}
.commentposter a:link,.commentposter a:visited,.commentposter a:hover{<<คือแถบสีฟ้าค่ะบอกไว้เฉยๆไม่ต้องไปยุ่งมันหรอก
text-decoration:none;
padding:0;
border-bottom:0px;
}
.commentposter a:hover{<<อันนี้ก็ด้วย
border-bottom:0px;
}

}
/* ฟอร์มใส่คอมเมนต์ */ <<ที่กรอกคอมเม้น
form{
padding:2px 5px 2px 20px;
margin:10px;
font:11px Tahoma,"MS Sans Serif"; <<ตัวหนังสือที่แสดงข้อมูลคนเม้นตรงที่ปาดแถบขาว
background-color:#024c77; <<ตรงสีฟ้าจุดๆๆๆ ในรูป
}
input{ <<มันคือปุ่ม ไว้จะมีโค้ดเสริมทีหลังค่ะ
font:11px Tahoma,"MS Sans Serif";
}

เพิ่มเติม*: บางส่วนถ้าต้องการทำให้มัน