การแก้ CSS style

/* สีของลิงค์ */
a:link, a:visited{
color:#FF0000;
text-decoration:none; /*<<< ตรงนี้บอกว่าไม่ต้องขีดเส้นใต้เวลาเป็นลิงค์*/
}

a:hover{
color:#FFFF00;
}
/* สองอันข้างบนนี้ไม่น่ามีไร กล่าวคือก็เป็นสีของลิงค์ ต่างๆ ที่ไม่ได้กำหนดที่อื่น */

/* ทั้งหน้ามีลักษณะเป็นอย่างไร */
.site{
margin:10px;
padding:0px;
text-align:center;
background-color: #EEEEEE;
background-image: url(http://champcpe.exteen.com/images/bck.gif); /*<< เปลี่ยน background ทั้งหน้าที่นี่ */
background-attachment : fixed /*ถ้าอยากให้ background ไม่เลื่อน ใส่บรรทัดนี้ */
}

/* ความกว้างของหน้าบลอค */
#wrapper{
width:640px; /*<< แก้ความกว้างหน้าบลอคที่นี่เป็นตัวเลขที่มากขึ้น*/
}

/* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */
#all{
width:640px; /*<< แก้ตาม width ของ wrapper */
float:left;
background-color:#FFFFFF; /* สีของภายในบลอค */
border:1px solid #000000; /* ขอบมีลักษณะอย่างไร (ความหนา, ลักษณะเส้น, สี) */
}

/* แถบบนสุด */
#uptab{
background:#AAAAAA;
border-top:1px solid #EEEEEE;
border-bottom:1px solid #777777;
height:13px;font-size:0px;
}

/*แถบกลาง หรือก็คือที่แสดงบลอค */
#midtab{
width:640px; /*<< แก้ตาม width ของ all กับ wrapper */
padding:0px;
}

/* แถบล่างสุด */
#downtab{
background:#AAAAAA;
border-top:1px solid #EEEEEE;
border-bottom:1px solid #777777;
font-size:0px;width:640px;height:13px; /*<< แก้ width ตาม all กับ wrapper */
float:left;
}

/* รูปภาพด้านบน เซตความสูงและกว้างตามภาพ */
.picture{
background-image: url(http://champcpe.exteen.com/images/head.jpg); /* เซตรูปภาพด้านบนที่นี่ */
background-repeat: no-repeat;
background-position: left top;
height: 100px; /* เซตความสูงของรูปข้างบนที่นี่ */
width: 640px; /* เซตความกว่างของรูปข้างบนที่ีีนี่ */
border-bottom:1px solid #000000; /* เซตขอบของรูปข้างบนที่นี่ */
}

.title{
font-family: "Trebuchet MS", Tahoma;
font-size: 15px;
color: #FFFFFF;
text-align:right;
padding-right:5px;
padding-bottom:30px;
vertical-align:bottom;
display:none; /*<<< ถ้าไม่อยากให้แสดง ไตเติล ใส่บรรทัดนี้ , ถ้าอยากให้แสดง เอาบรรทัดนี้ออก */
}

/* ต้องมาเซตสีไตเติลตรงนี้ด้วย */
.title a:link, .title a:visited, .title a:hover{
color:#FFFFFF;
border-color:#FFFFFF;
}

.content{
width:640px; /* เซตความกว้างตาม all กับ wrapper*/
font-family: Tahoma, "MS Sans Serif";
font-size: 12px; /* เซตขนาดฟอนต์โดยรวมที่นี่ */
color: #FFFFFF;
text-align:center;
float:left;
}

/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */
.leftcontent{
width:450px; /* เซตความกว้างของที่แสดงเนื้อหาบลอค ซึ่งความกว้างของ leftcontent + rightcontent=all */
float:right; /* อยากให้แสดงเนื้อหาที่ซ้ายหรือขวา */
text-align:left;
}

/* พวกที่เป็นแถบลิงค์ต่างๆ */
.rightcontent{
width:180px; /* เซตความกว้างของแถบที่เป็นลิงค์ */
float:left; /* ไม่ต้องเซตตรงนี้ */
text-align:left;
background-color:#F9F9F9; /* อยากให้แบคกราวนด์ของแถบสีมีอะไร */
border-right:1px dotted #000000;
}
.iday {

}

/* สีของหัวข้อพวก วันที่ ประเภท */
.iday h3 {
background-image: url(/global/theme/predefined/creativity/title.gif); /* ไอคอนของไตเิติลวันที่ */
background-repeat: no-repeat;
background-position: left top;
border-bottom:1px solid #FB650A;
margin:3px 14px 0px 10px;
padding:0px 0px 4px 18px;
font-size: 14px;
color:#FB650A; /* สีของวันที่ */
}

/* เรื่องหนึ่งๆ */
.entry{
padding:5px 15px 5px 15px;
margin:5px 0px 5px 0px;
border-bottom:1px solid #CCCCCC;
}

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

/* ส่วนแสดงเนื้อหา entry */
.entrycontent{
color: #000000;
padding:5px 10px 5px 16px;
color:#000000;
font-size:12px;
line-height: 1.3em;
}

/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */
.entryfooter{
padding:2px 2px 2px 15px;
color:#666666;
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/creativity/entrycomment.gif); /* จะให้มีไอคอนอะไร */
background-repeat: no-repeat;
color:#43697C; /* สีของลิงค์ไปคอมเมนต์ */
text-decoration:none;
padding:0px 80px 0px 0px;
border-bottom:0px;
}

/* สีเวลาเอาเมาส์วางของลิงค์ที่ไปคอมเมนต์ */
.entrycomment a:hover{
color:#FF6C00;
border-bottom:0px;
}

/* แถบแสดงชื่อ */
.profile{
padding:5px; margin:0px 1px 0px 10px;
font-size:10px;
}

/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:2px 0px 2px 8px;
color:#FFFFFF; /* เซตสีที่นี่ */
font-family:Tahoma;
font-size:12px;
padding-left:10px;
margin-right:1px;
background-color:#CCCCCC; /* เซตแบรคกราวนด์ของหัวข้อ ของแถบลิงค์ ที่นี่ */
}

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

/*แต่ละไอเท็มของแถบด้านข้าง*/
.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/creativity/bul.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:12px; /* อยากให้แถบลิงค์มีฟอนต์ขนาดเท่าไหร่ */
border:0px;
color:#333333; /* อยากให้ลิงค์ในแถบลิงค์มีสีอะไร */
}

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

/* ส่วนคอมเมนต์ */
.comment{
padding:2px 5px 2px 5px;
margin:10px;
border:1px dotted #CCCCCC;
border-left:10px solid #CCCCCC;
}

.commentcontent{
color: #000000;
padding:5px 5px 5px 16px;
color:#000000;
font-size:11px;
line-height: 1.3em;
}

.commentfooter{
border-top:1px solid #EEEEEE;
padding:2px 2px 2px 15px;
color:#999999;
font-size:10px;
}

.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;
border:1px dotted #CCCCCC;
border-left:10px solid #CCCCCC;
font:11px Tahoma,"MS Sans Serif";
}

/* ตรง textbox ของคอมเมนต์ */
input{
font:11px Tahoma,"MS Sans Serif";
}

edit @ 2006/10/11 00:07:23