ชีช้ำกะหล่ำปลี

หลังจากที่ด๊องดองบล็อกไว้นานตั้งแต่ช่วงต้นปีี่่ที่ผ่านมา จนกระทั่งexteenอัพเดทตัวเองใหม่ เราจึงสะระติคิดได้ว่า ควรจะอัพบล็อกตัวเองใหม่ด้วย ปลุกปล้ำกะcssอยู่ตั้งนาน2นาน มึนแต็บๆสุดๆ ดีนะ ที่เรามีความสามารถในการมั่ว หึหึ

หากใครสนใจจะมั่วธีมตามแบบฉบับเกล้ากระผม เชิญตามมาทางนี่้เลย

/me คิดในใจ จะมีใครหลงผิดไหมนะ

...เอาเถอะ...

วันนี้เกล้ากระผมจะมานำเสนอวิธีมั่วในธีมของ

ซึ่ง ถ้าใช้ไฟร์ฟ็อกซ์ เราจะสามารถเปิดดูโค้ดพื้นหลังและรูปภาพในธีมได้ออกมาดังนี้

พอได้เค้าโครงคร่าวๆของurlรูปภาพแล้ว เราก็มาปรับเปลี่ยนกัน~

/*Normal Theme for the new exteen*/
/*Copyright by Etceto co,ltd. 2007*/

/*======================================================================*/
/* Simple Reset - Not Editable*/

/*ห้ามปรับเปลี่ยนอะไรในส่วนนี้*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight:normal;
}

/* General */
body {
background:#c7e1e9 url(http://g.exteen.com/t/darkapollo/bck.gif) repeat top left; /*เปลี่ยนurlตรงนี้เป็นรูปพื้นหลัง/สีที่ต้องการ*/
color:#333;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
}
/*แต่งลิ้งค์*/
a:link, a:visited{
color:#ac968f;
text-decoration:none;
}

a:hover, a:active{
color:#ebdbd7;
}

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

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

/*======================================================================*/
/* Header */

#header{
background:url(http://g.exteen.com/t/darkapollo/header.png) top left no-repeat;/*ตรงนี้คือพื้นหลังส่วนหัว*/
padding:32px 0px 0px 25px;
}

#header h1 a{
color:#666;
font-size:24px;
}

#header h1 a:hover{
color:#999;
}

#header h2{
font-size:12px;
margin:5px 0px 5px 0px;
}

#coverimage{
background:url(http://g.exteen.com/t/darkapollo/cover.jpg) no-repeat; /*รูปเฮดของบล็อก*/
height:180px; /*อย่าลืมปรับขนาดรูปให้ตรงกับที่จะเอามาใส่*/
width:730px;
margin-bottom:5px;
}

/*======================================================================*/
/* Neck Menu */

#neck{
background:url(http://g.exteen.com/t/darkapollo/belly.png) top left; /*ตรงนี้คือพื้นหลังบริเวณข้อความในเอนทรีและส่วนที่แสดงเมนูด้านบน*/

}

#neck .module{
background:#473e3c; /*เปลี่ยนจากสีน้ำตาลเป็นสีอื่นๆ*/
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;
}

#neck .module ul{
display:inline;
margin:0px;
padding:0px;
}

#neck .module h2{
display:none;
}

#neck .module li{
border-right:1px solid #CCC;
display:inline;
padding:0px 10px 0px 10px;
}

/*======================================================================*/
/* Content */
/*แก้รูปพื้นหลังบริเวณเอนทรี*/
#belly{
background:url(http://g.exteen.com/t/darkapollo/belly.png) repeat-y;
}

/*ตรงนี้คือส่วนที่ปรับแต่งฟ้อนและอื่นๆ */
#content{
display:inline;
float:left;
margin:10px 15px 0px 25px;
width:490px;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}

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

.entry .title{
display:block;
float:left;
margin-bottom:10px;
width:100%;
}

.entry .title h2{
border-bottom:1px solid #e4e4e4;
font-size:18px;
}

.entry .title h2 a{
color:#949494;
}

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

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

.entry .post{
float:left;
}

.entry .post p{
margin-bottom:10px;
}

.entry .info{
float:left;
width:100%;
}

.entry .info .tag{
float:left;
font-size:10px;
width:350px;
}

.entry .info .coms{
float:right;
}

/*แถบเมนูด้านข้าง*/

/*======================================================================*/
/* Sidebars */

#sidebar, #sidebar2{
background:#473e3c; /*สีของแถบเมนูด้านข้าง*/
display:inline;
float:right; /*ฝั่งซ้ายรึฝั่งขวา*/
margin:5px 25px 0px 0px; /*จะให้เว้นขอบข้างเท่าไหร่*/
width:225px; /*เอากว้างแค่ไหน*/
}

#sidebar2{
display:none;
}

#sidebar .module, #sidebar2 .module{
margin:5px 5px 15px 5px;
}

#sidebar .module ul, #sidebar2 .module ul{
margin:5px 0px 0px 5px;
padding:0;
list-style: none;
}

#sidebar .module h2, #sidebar2 .module h2{
text-indent:-9999px;
}

/* Sidebar Header image */
#sidebar #recommend h2, #sidebar2 #recommend h2{background:url(http://g.exteen.com/t/darkapollo/hd_recommend.png) no-repeat;width:131px;height:19px;} /*คำว่าrecommendตรงแถบข้าง*/
#sidebar #previous h2,#sidebar2 #previous h2{background:url(http://g.exteen.com/t/darkapollo/hd_previous.png) no-repeat;width:104px;height:23px;}/*คำว่าpreviousตรงแถบข้าง*/
#sidebar #commentalert h2,#sidebar2 #commentalert h2{background:url(http://g.exteen.com/t/darkapollo/hd_comments.png) no-repeat;width:181px;height:19px;}/*คำว่าcommentalertตรงแถบข้าง*/
#sidebar #favourites h2,#sidebar2 #favourites h2{background:url(http://g.exteen.com/t/darkapollo/hd_favourites.png) no-repeat;width:105px;height:19px;}/*คำว่าfavouritesตรงแถบข้าง*/
#sidebar #links h2,#sidebar2 #links h2{background:url(http://g.exteen.com/t/darkapollo/hd_links.png) no-repeat;width:52px;height:19px;}/*คำว่าlinksตรงแถบข้าง*/
#sidebar #categories h2,#sidebar2 #categories h2{background:url(http://g.exteen.com/t/darkapollo/hd_categories.png) no-repeat;width:112px;height:23px;}/*คำว่าcategoriesตรงแถบข้าง*/
#sidebar #archives h2,#sidebar2 #archives h2{background:url(http://g.exteen.com/t/darkapollo/hd_archives.png) no-repeat;width:89px;height:19px;}/*คำว่าarchivesตรงแถบข้าง*/
#sidebar #tags h2,#sidebar2 #tags h2{background:url(http://g.exteen.com/t/darkapollo/hd_tags.png) no-repeat;width:49px;height:23px;}/*คำว่าtagsตรงแถบข้าง*/
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{background:url(http://g.exteen.com/t/darkapollo/hd_pages.png) no-repeat;width:64px;height:23px;}/*คำว่าpagemenuตรงแถบข้าง*/

a.archive{
background:url(http://g.exteen.com/t/darkapollo/icon_archive.gif) no-repeat; /*รูปภาพนิวรึอะไรประมาณนี้*/
width:12px;
height:12px;
padding-left:15px;
margin-left:4px;
}
/*======================================================================*/
/* Configure each module */
/*ไม่แก้ (ฮา)*/
/* Profile */
#profile{
width:95%;
height:64px;
}

#profile img{
float:left;
margin-right:10px;
}

#profile span{
display:block;
}

#profile .info{
width:100% !important;
width:60%;
}

/* Tags */
#tags li{
display:inline;
margin-right:5px;
}

/*======================================================================*/
/* Comment Form */
/*กล่องพิมพ์คอมเม้นต์*/
#commentform{
width:100%; /*ล็อกขนาดไว้ใส่บีจี*/
background:#EEE; /*เปลี่ยนเป็นสีรึรูปตามต้องการ*/
float:left;
}

#commentform form{
margin:5px;
}

#commentform h3{
font-size:16px;
font-weight:bold;
}

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

#commentform label{
float:left;
width:150px;
}

#commentform input.textbox{
width:150px;
}

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

/*======================================================================*/
/* Comment (Showing Area) */
/*ส่วนที่แสดงคอมเ้มนต์ออกมา*/
.comment{
border-bottom:1px solid #DDD; /*เปลี่ยนสี?*/
float:left;
margin:5px 0px 5px 0px;
padding-bottom:5px;
width:100%;
}

.comment .post{
float:right;
width:330px;
}

.comment .post p{
margin-bottom:10px;
}

.comment .info{
float:left;
font-size:10px;
width:150px;
margin-right:10px;
}

.comment .info img{
width:32px;
}

*======================================================================*/
/* Leg Menu */
#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 .module ul{
display:inline;
margin:0px;
padding:0px;
}

#leg .module h2{
font-size:12px;
font-weight:bold;
display:inline;
}

#leg .module li{
border-right:1px solid #CCC;
display:inline;
padding:0px 10px 0px 10px;
}

/*======================================================================*/
/* 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;
}

/*======================================================================*/
.navbar{
float:left;
}

.commentmanage{
clear:both;
}

/*PNG support for IE*/
/*มันคืออะไรไม่รู้ หนูไม่ยุ่ง*/
#header, #neck, #belly, #leg, #footer { behavior: url(/global/iepngfix.htc) }
#sidebar .module h2, #sidebar2 .module h2{
behavior: url(/global/iepngfix.htc)
}

หวังว่าทุกๆท่านคงจะได้ประโยชน์จากการมั่วธีมครั้งนี้ของข้าพเจ้าไปบ้างเนอะ ~

ของแถม หากท่านใดอยากจะดูcssของคนอื่นมาใช้เป็นแนวทาง สามารถดูได้จาก http://???.exteen.com/style.css เน้อ