♡ How2 ´ ॐ ธีม exteen แบบใช้โค้ด css [2]

♡ How2 ´ ॐ ธีม exteen แบบใช้โค้ด css [2]
. อย่าลืมไปอ่านภาคหนึ่งก่อน ไม่งั้นงงแน่นอนนะคะ (:
http://www.siamzone.com/board/view.php?sid=1423994
กว่าจะมาเป็นธีมได้ ไม่ใช่ว่าทุกคนจะเก่งตั้งแต่เริ่ม
ต้องมีลองผิดลองถูกบ้างจริงมั้ย ?

. ถ้าเรตติ้งกระทู้ดี จขกท.จะทำธีมมาแจก แต่อาจนานหน่อย
หลังจขกท.สอบเสร็จจะมีมาแจกแน่นอนจ้ะ

เครดิต :  QUIXOTICizm
ไปแวะทักทายกันที่บล๊อก iquixotic.exteen.com
* เปิดเข้ามากระทู้นี้น่ะ . เม้นต์ด้วยนะ T T พลีสสส~


ถ้าอยากลดขนาดส่วนบล๊อก
ต้องมีการคำนวนให้แน่นอนนะคะไม่งั้นอาจจะเบี้ยวได้



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



/* General */

body {
background:#โค้ดสีพื้นหลังของบล๊อก url(urlบีจี) repeat-x top left;
color:#โค้ดสีตัวอักษรที่แสดงทั้งหน้า;
font:ขนาดตัวอักษรที่แสดงทั้งหน้าpx Tahoma, "MS Sans Serif";
line-height:1.5em;text-align:center;
}

a:link, a:visited{
color:#โค้ด สีของลิ้งค์ทั้งหมดเมื่อเคยไปมาแล้ว;
text-decoration:none;
}

a:hover, a:active{
color:#โค้ด สีของลิ้งค์ทั้งหมดเมื่อไม่มีการนำเม้าส์ไปวาง;
}

#page{
margin:auto;
padding-top:15px; ระยะห่างจากข้างบน
text-align:left; ตั้งว่าให้ตัวอักษรอยู่ด้านไหน
width:780px; ความกว้าง
}

#header, #neck, #belly, #leg, #footer{
float:left;
width:780px; (ควรเท่ากันกับส่วน #page )
}



/*=========

=========*/

/* Header */
#header{
background:url (urlส่วนพื้นหลังเฮด = มันจะอยู่ด้านหลังเฮดไม่ต้องใส่ก็ได้)
top left no-repeat;padding:32px 0px 0px 25px;
}

#header h1 a{
color:#โค้ดสี ตัวอักษรด้านบนเฮดบรรทัดแรก;
font-size:ขนาดตัวอักษร(ที่กำหนดมาคือ24แต่เปลี่ยนได้)px;
}

#header h1 a:hover{
color:#โค้ดสีตัวอักษรบนเฮดบรรทัดแรกเมื่อนำเม้าส์ไปวาง;
}

#header h2{
font-size:ขนาดตัวอักษรบรรทัดถัดต่อมาpx;
margin:5px 0px 5px 0px;
}

#coverimage{
background:url(url เฮดที่จะใส่) no-repeat;
height:ความสูง(ตามขนาดเฮด)px;
width:ความกว้าง(ควรเท่ากับ 730)px;margin-bottom:5px;

}



/*=========

=========*/

/* Neck Menu */
#neck{
background:url(url พื้นหลังเมนูใต้เฮด) top left;
}

#neck .module{
background:#โค้ดสีพื้นหลังเมนูใต้เฮด;
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(urlพื้นหลังเนื้อหา) 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:ขนาดเส้นใต้ชื่อหัวข้อที่อัพเดทpx  รูปแบบเส้น #โค้ดสีของเส้น;
font-size:ขนาดตัวอักษรหัวข้อที่อัพเดท(ที่กำหนดคือ16)px;
}

.entry .title h2 a{
color:#โค้ดสีลิ้งค์ใต้หัวข้อที่อัพเดท;
}

.entry .title h2 a:hover{
color:#โค้ดสีของลิ้งค์ตัวอักษรใต้หัวข้อที่อัพเดทเมื่อนำเม้าส์ไปวาง;
}

.entry .title span{
color:#โค้ดสีตัวอักษรใต้หัว ส่วนที่บอกว่าโพสโดยใคร;
font-size:ขนาดตัวอักษรpx;
}

.entry .post{
float:จริงๆแล้วมีคำว่า left แต่แนะนำให้ลบออกไปดีกว่านะ;
}

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

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

.entry .info .tag{
float:left;font-size:ขนาดตัวอักษรตรงtag px;
width:350px;
}

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



/*=========
=========*/

/* Sidebars */ เป็นแถบเมนูที่อยู่ด้านข้าง

#sidebar, #sidebar2{
background:#ecf4f7;กำหนดบีจี
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{ ใส่ภาพบีจีของ หัวข้อ recommend
background:url(url รูป) no-repeat;
width:131px;
height:19px;

}

#sidebar #previous h2,#sidebar2 #previous h2{ใส่ภาพบีจีของ หัวข้อ previous
background:url(url รูป) no-repeat;
width:104px;
height:23px;
}

#sidebar #commentalert h2,#sidebar2 #commentalert h2{ใส่ภาพบีจีของ หัวข้อ commentalert
background:url(url รูป) no-repeat;
width:181px;
height:19px;
}

#sidebar #favourites h2,#sidebar2 #favourites h2{ใส่ภาพบีจีของ หัวข้อ favourites
background:url(url รูป) no-repeat;
width:105px;
height:19px;
}

#sidebar #links h2,#sidebar2 #links h2{ ใส่ภาพบีจีของ หัวข้อ links
background:url(url รูป) no-repeat;
width:52px;
height:19px;
}

#sidebar #categories h2,#sidebar2 #categories h2{ ใส่ภาพบีจีของ หัวข้อ categories
background:url(url รูป) no-repeat;
width:112px;
height:23px;
}

#sidebar #archives h2,#sidebar2 #archives h2{ใส่ภาพบีจีของ หัวข้อ archives
background:url(url รูป) no-repeat;
width:89px;
height:19px;
}

#sidebar #tags h2,#sidebar2 #tags h2{ใส่ภาพบีจีของ หัวข้อ tags
background:url(url รูป) no-repeat;
width:49px;
height:23px;
}

#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{ใส่ภาพบีจีของ หัวข้อ pagemenu
background:url(url รูป) no-repeat;
width:64px;
height:23px;
}

 

a.archive{
background:url(urlไอคอนที่ปรากฎหลังหัวข้อใน categories และหน้า archives) no-repeat;
width: ความกว้าง px;
height: ความสูง px;
padding-left:15px;
margin-left:4px;

}

/*=========
=========*/

/* Configure each module */

/* Profile */
#profile{
width:95%;
height:xx;

#profile img{
float:left;
margin-right:ที่กำหนดคือ 10 แต่ถ้าอยากให้อยู่ตรงกลางลองสุ่มตัวเลขpx;
}

#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:#โค้ดสีพื้นหลัง ฟอร์มกรอกคอมเม้น;float:left;
}

#commentform form{
margin:5px;
}

#commentform h3{
font-size:ขนาดตัวอักษรตรงคำว่าcommentpx;
font-weight:bold;
}

#commentform .formrow{
border-top:ขนาดเส้นในฟอร์มกรอกคอมเม้นท์px  รูปแบบเส้น #โค้ดสีของเส้น;
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:ขนาดเส้นคั่น คอมเม้นท์ px  รูปแบบเส้น (solidหรือdashed)  #โค้ดสีของเส้น ;
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:ขนาดตัวอักษรคอมเม้นท์px;
width:150px;
margin-right:10px;
}

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

/*=========
=========*/
/* Leg Menu */

#leg{
background:url(url พื้นหลังเนื้อหา) top left;
}

#leg .module{
background:#โค้ดสีพื้นหลังส่วนท้าย (ที่เขียนว่า power by exteen blog..);
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{f
ont-size: ขนาดตัวอักษรตรง power by exteen blog.. px;
font-weight: ถ้าไม่อยากให่ เป็นตัวหนาก้อลบคำว่า bold ออกไป ;
display:inline;
}

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


/*=========
=========*/

/* Footer */

#footer{
background:url(url พื้นหลังส่วนท้าย )
bottom left no-repeat;
height:60px;
}

#footer p{
background:#โค้ดสี พื้นหลังส่วนท้าย ;
border-top: ขนาดเส้น (ที่กำหนดคือ 1) px  รูปแบบเส้น (solidหรือdashed)#โค้ดสีของเส้น ;
border-bottom:ขนาดเส้น (ที่กำหนดคือ 1) px รูปแบบเส้น (solidหรือdashed) #โค้ดสีของเส้น ;
font-size:ขนาดตัวอักษรส่วน นี้ px;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)

}