+ Rutledge +

/* สีของลิงค์ */
a:link, a:visited{
color:#000000;สีของลิงค์ธรรมดาๆ กับเวลาที่กดเข้าไปแล้ว
text-decoration:none;cursor:n-resize;เปลี่ยนเคอร์เซอร์เวลาเอาเมาส์วางที่ลิงค์ ถ้าไม่อยากให้เป็นรูปอะไรก็ใส่คำว่า none ลงไปแทน
}
a:hover{
color:#6A6A6A;สีของลิงค์เวลาเอาเมาส์วาง
text-decoration:none; cursor:n-resize;
}

/*แถบscrollbar ก๊อปไปแปะแล้วเปลี่ยนสีได้เลย*/
BODY{SCROLLBAR-FACE-COLOR:#ffffff; แท่งscrollbar
SCROLLBAR-HIGHLIGHT-COLOR:#FF9900; ส่วนขอบซ้ายด้านในของscrollbar
SCROLLBAR-SHADOW-COLOR:#669900; ส่วนขอบขวาด้านในของscrollbar
SCROLLBAR-3DLIGHT-COLOR:#AE2023; ขอบซ้ายด้านนอกของscrollbar
SCROLLBAR-DARKSHADOW-COLOR:#996600; ขอบขวาด้านนอกของscrollbar
SCROLLBAR-ARROW-COLOR:#000000; สีของหัวลูกศร
SCROLLBAR-TRACK-COLOR:#FF99FF;} สีของtrackที่เลื่อนขึ้นลง

/* ทั้งหน้ามีลักษณะเป็นอย่างไร */
.site{
margin:0px;
padding:0px;
text-align:center;
background-color: #D5D0CD; สีพื้นหลังของบลอค (แต่ถ้ากำหนดให้BGเป็นรูปภาพ สีพื้นหลังจะไม่ปรากฏ)
background-image:url(xxxxxxx);ใส่urlของรูปที่ต้องการให้เป็นBGลงไป
background-position: center; กำหนดให้รูปอยู่ตรงกลาง
background-attachment : fixed; ทำให้BGไม่เลื่อนไปไหน
}

1 /* ความกว้างของหน้าบลอค */
#wrapper{
width:700px; แล้วแต่เรากำหนด
}

/* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */
#all{
width:700px; ถ้ากำหนดข้างบนแล้ว อย่าลืมมาเปลี่ยนตรงนี้ให้เหมือนกับข้างบนด้วยล่ะ
float:left;
}

2/* แถบบนสุด */
#uptab{
width:720px; ความกว้างของแถบบนสุด (แถบที่อยู่เหนือรูปheadน่ะ)
float:right;
height:131px;
background: url(xxxxxx); ถ้าจะให้แถบบนสุดเป็นรูปภาพ ก็เอาurlรูปมาใส่
}

/*แถบกลาง หรือก็คือที่แสดงบลอค */
#midtab{
width:700px; ขนาดเท่าความกว้างของหน้าบลอคที่เรากำหนดไว้
padding:0px;
border:0px solid ; ถ้าจะให้มีส้นขอบ ก็เปลี่ยนตัวเลขเป็น 1 2 3 ตามความหนาของเส้นขอบที่เราต้องการ solidคือเส้นตรง dotted คือเส้นประ
float:left;
}

/* แถบล่างสุด */
#downtab{
float:left;
width:720px;ขนาดเท่าความกว้างของหน้าบลอคที่เรากำหนดไว้
height:100px; กำหนดความสูงตามรูป
background: url(xxxxxx); ถ้าจะให้แถบล่างสุดเป็นรูปภาพ ก็เอาurlรูปมาใส่
}

/* รูปภาพด้านบน เซตความสูงและกว้างตามภาพ */
.picture{
background: url(xxxxxx) no-repeat;เอาurlรูปมาใส่กำหนดขนาดให้เท่ากับความกว้างของหน้าบลอคด้วย
height: 10px;
width: 720px; กำหนดขนาดตามรูป
}

3/*กำหนดตัวอักษรของtitle blog*/ (ก็คือ ชื่อบลอคเรานั่นแหละ)
.title{
font-family: "Microsoft Sans Serif", "Sans Serif";
font-size: 10pt; ขนาดของฟอนต์ แล้วแต่เรากำหนด
color: #D5D0CD; สีของฟอนต์
padding-right:10px;
vertical-align:bottom;
text-align:right;
}

.content{
width:700px; กำหนดขนาดให้เท่ากับความกว้างของหน้าบลอค
font-family: Tahoma, "MS Sans Serif";
font-size: 12px;
text-align:center;
float:left;
}

4/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */
.leftcontent{
width:540px; ความกว้างของส่วนที่แสดงเนื้อหาบลอค กำหนดเอาเอง แล้วหักลบเอากับที่เรากำหนดไว้ด้วย เช่น กำหนดความกว้างของหน้าบลอคเป็น 700 ส่วนที่แสดงเนื้อหาเป็น540 เหลืออีก160ไว้เป็นที่แสดงลิงค์
float:right; ห้ส่วนที่แสดงเนื้อหาบลอคอยู่ทางขวา (ถ้าอยากให้อยู่ทางซ้ายก็แก้เป็น left แล้วอย่าลืมไปแก้ให้แถบลิงค์อยู่ขวาด้วยล่ะ)
text-align:left;
}

5/* พวกที่เป็นแถบลิงค์ต่างๆ */
.rightcontent{
width:160px;
float:left;ให้ส่วนที่แสดงเนื้อหาบลอคอยู่ทางซ้าย
text-align:left;
}
.iday {
}

6/* สีของหัวข้อพวก วันที่ ประเภท */
.iday h3 {
background-repeat: no-repeat;
background-position: left top;
margin:10px 14px 0px 10px;
padding:3px 0px 3px 3px;
font-size: 14px;

}

/* เรื่องหนึ่งๆ */ มาถึงส่วนentryมั่ง
.entry{
padding:5px 15px 5px 10px;
margin:5px 0px 5px 0px;
}

7/* รูปตรงหัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */
.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{
background-image: url(xxxxxx); urlของรูป
background-repeat: no-repeat;
background-position: left top;
padding:0px 10px 0px 16px;
font-size: 12px;
font-weight:bold;
border:0px;
}

8/* ส่วนแสดงเนื้อหา entry */
.entrycontent{
padding:5px 10px 5px 16px;
color:#3B3B3B; สีของตัวอักษรที่เขียนบลอคเป็นประจำ กำหนดเองได้
font-size:13px; ขนาดตัวอักษร
}

9/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */
.entryfooter{
border-top:1px dotted ;
padding:2px 2px 2px 15px;
color:#3B3B3B; สีของตัวอักษร
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);
background-repeat: no-repeat;
color:#000000;
text-decoration:none;
padding:0px 80px 0px 0px;
border:0px;
}

/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
color:#3B3B3B;
border:0px;
}

10/* แถบแสดงชื่อ */
.profile{
padding:5px; margin:0px 1px 0px 10px;
font-size:10px;
text-align:center; ถ้าอยากให้อยู่ตรงกลางก็ใช้ center หรือจะเปลี่ยนเป็น right , leftก็ได้ตามใจ
}

11/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:5px 0px 5px 8px;
color:#3B3B3B; สีของตัวอักษร
font-family:Tahoma;
font-size:12px; ขนาดของตัวอักษร
padding-left:10px;
}

.sidebar-item{
padding:0px 0px 0px 5px;
margin:0px 0px 10px 0px;
}

12/*แต่ละไอเท็มของแถบด้านข้าง*/
.sidebar-item li{
background-image: url(xxxxx); urlรูปตรงแถบลิงค์ด้านข้าง
background-repeat: no-repeat;
list-style-type: none;
margin:1px 5px 0px 5px;
padding:0px 0px 0px 10px;
background-position: 0px 5px;
}

.sidebar-item a:link, .sidebar-item a:visited, .sidebar-item a:hover{
font-family:"Trebuchet MS",Tahoma;
font-size:11px;
border:0px;
}

.sidebar-item a:hover{
border:0px;
}

13/* ส่วนคอมเมนต์ */
.comment{
padding:6px 5px 2px 5px;
margin:10px;
background-color:#cbc7c4; สีพื้นหลังตรงส่วนของคอมเมนต์
}

.commentcontent{
color: #3B3B3B; สีตัวอักษรของคอมเมนต์
padding:5px 5px 5px 16px;
font-size:11px; ขนาดตัวอักษร
line-height: 1.3em;
}
.commentfooter{
padding:2px 2px 2px 15px;
color:#3B3B3B;
font-size:9px;
}
.commentdetail{
padding:0px 5px 0px 0px;
}
.commentposter a:link,.commentposter a:visited,.commentposter a:hover{
padding:0;
border-bottom:0px;
}
.commentposter a:hover{
border-bottom:0px;
}

14/* ฟอร์มใส่คอมเมนต์ */
form{
padding:2px 5px 2px 20px;
margin:10px;
font:11px Tahoma,"MS Sans Serif";
background-color:#b4b1ae; สีพื้นหลังตรงฟอร์มกรอกคอมเมนต์
}
input{
font:11px Tahoma,"MS Sans Serif";
}