ก่อนอื่นต้องขอบอกว่า เราไม่มีความรู้ทางด้านนี้หรอกนะคะ
แต่อาศัยลอกเลียนแบบจาก blog ของคนอื่นๆมาอีกทีน่ะค่ะ
ก็เลยพอจะรู้เรื่องบ้าง แต่เวลาเปลี่ยน theme ทีก็ทำเป็นวันๆอ่ะค่ะ
เพราะมัวแต่คลำๆเอา แก้ไม่ถูกจุดซะที เหอๆๆๆ
สิ่ ง ที่ ค ว ร รู้ ก่ อ น จ ะ มึ น *
- /*___*/ = ถ้าพิมพ์อะไรลงไปตรงที่ เส้นแดงๆ จะไม่มีผลอะไรกะ theme
- .site{
margin:20px;
padding:0px;
text-align:center;
background-color:#FFFFFF;
}
= สีน้ำเงิน คือ หัวข้อ เป็นส่วนที่เราจะจัดการกับมัน เช่น entry(เนื้อเรื่อง) comment(ส่วนที่คนมา comment) sidebar(แถบที่เป็น link ข้างๆ)
= ปีกกาสีชมพูส้ม เอาไว้กั้นที่บรรจุลูกเล่นต่างๆที่เราจะกำหนด theme เรา
= สีเขียวน้ำทะเล คือ ลูกเล่นต่างๆที่เราจะต้องกำหนด theme เรา
= semicolon สีม่วง เอาไว้ปิดท้าย 1 คำสั่ง ต้องใส่ตลอดนะ ห้ามลืม ไม่งั้นมันจะไม่แสดงผล - display:none; = ทำให้หัวข้อ หรือ ส่วนนั้นใน theme ไม่แสดงผล
｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡❤｡
แกะมาจาก theme - line
/*scrollbar กะ mouse*/
<!--body{ cursor:crosshair; }--> « 2 บรรทัดนี้ กำหนดให้ mouse เป็นรูปบวก(+)
<!--a{ cursor:crosshair; }-->
<!--BODY « 10 บรรทัดนี้ กำหนดสี scrollbar
{
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #4a82a1;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}
/* สีของลิงค์ */
a:link, a:visited{
color:#4a82a1; « เปลี่ยนสีของ link หลัง# (เป็นเลขและตัวหนังสือ 6 ตัว)
text-decoration:none; « จะให้มีลูกเล่นกับ link ยังไง ก็ใส่ไป เช่น มีเส้นใต้ ไม่มีเส้นใต้ มีเส้นใต้แบบจุดๆ
}
a:hover{ « สีของ link ตอนที่เอา mouse วางบน link
color:#8aaac0;
/*border-bottom:1px solid #FF9999;*/« ลูกเล่นของ link ตอนเราเอา mouse วาง อันนี้คือ มีเส้นใต้ขนาด 1px สีชมพูส้ม *แต่มันไม่แสดงผลนะ เพราะเราใส่ /*___*/ เอาไว้
}
/* ทั้งหน้ามีลักษณะเป็นอย่างไร */
.site{
margin:20px;
padding:0px;
text-align:center;
background-color:#FFFFFF; «สี background
/*background:url() # repeat;*/ « ในวงเล็บใน URL ของรูปลงไปได้ *แต่ต้องเอา /*___*/ ออกด้วยนะ มันถึงจะแสดงผล
}
/* ความกว้างของหน้าบลอค */
#wrapper{
width:800px;
}
/* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */
#all{
width:800px;
float:left;
left:125px; «ให้ตัว blog อยู่ห่างจากด้านซ้ายของเว็บเท่าไหร่ ใส่ตัวเลขลงไป
overflow: auto;
position: absolute;
top:0px;
}
/* แถบบนสุด */
#uptab{
width:800px;
float:left;
height:30px;
background: url() right top no-repeat;
}
/*แถบกลาง หรือก็คือที่แสดงบลอค */
#midtab{
width:800px;
padding:0px;
border:0px solid #;
float:left;
}
/* แถบล่างสุด */
#downtab{
float:left;
width:800px;
height:30px;
}
/* รูปภาพด้านบน เซตความสูงและกว้างตามภาพ */
.picture{
background: url(/images/theme-line/.jpg) no-repeat;
height: 160px;
width: 800px;
}
.title{
display:none; «ใส่ไว้ ไม่ให้ screen name ของเรา ตรงทางขวาบน มันแสดงผล
font-family: "Tahoma", "Verdana";
font-size: 10pt;
font-weight: Bold;
color: #FFFFFF;
padding-right:10px;
vertical-align:bottom;
text-align:right;
}
.content{
width:800px;
font-family: "Tahoma", "Verdana";
font-size: 12px;
color:#808080;
text-align:center;
float:left;
background-color:#;
}
/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */
.leftcontent{ «ช่องเนื้อหา จะให้มันขนาดเท่าไหร่ใส่ความกว้างในบรรทัดต่อไปเลย
width:600px;
float:right;
text-align:left;
background-color:#FFFFFF;
}
/* พวกที่เป็นแถบลิงค์ต่างๆ */
.rightcontent{ «ช่อง sidebar หรือ แถบ linkๆ ต่างๆ จะให้มันขนาดเท่าไหร่ใส่ความกว้างในบรรทัดต่อไปเลย
width:200px;
float:left;
text-align:right;
padding:5px 15px 5px 10px;
background-color:#;
border-right:1px solid #a3a3a5;
}
.iday {
}
/* สีของหัวข้อพวก วันที่ ประเภท */
.iday h3 {
display:none;
background-repeat: no-repeat;
background-position: left top;
margin:10px 14px 0px 10px;
padding:3px 0px 3px 3px;
font-size: 14px;
color:#808080;
background-color:#e6e6e6;
}
/* เรื่องหนึ่งๆ */
.entry{
padding:5px 15px 5px 10px;
margin:5px 0px 5px 0px;
}
/* หัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */
.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{
background-image: url();
background-repeat: no-repeat;
background-position: left top;
padding:0px 10px 0px 16px;
font-size: 12px;
text-decoration:none;
font-weight:bold;
color:#808080;
border:0px;
}
/* ส่วนแสดงเนื้อหา entry */
.entrycontent{
padding:5px 10px 5px 16px;
color:#808080;
font-size:12px;
}
/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */
.entryfooter{
border:1px solid #a3a3a5;
background-color:#ebeaeb;
padding:2px 2px 2px 15px;
color:#808080;
font-size:9px;
}
/* ชื่อผู้โพส */
.entryposter{
padding:0px 5px 0px 0px;
}
/* ลิงค์ไปดู comment ของ entry */
.entrycomment a:link,.entrycomment a:visited,/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
background-image: url(/images/theme-line/comment.gif);
background-repeat: no-repeat;
color:#4a82a1;
text-decoration:none;
padding:0px 80px 0px 0px;
border:0px;
}
/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
color:#8aaac0;
border:0px;
}
/* แถบแสดงชื่อ */
.profile{
padding:5px; margin:0px 1px 0px 10px;
font-size:10px;
}
/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:2px 0px 2px 0px;
color:#808080;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
padding-left:10px;
}
.sidebar-item{
padding:0px 0px 0px 5px;
margin:5px 0px 10px 0px;
}
/*แต่ละไอเท็มของแถบด้านข้าง*/
.sidebar-item li{ «รูป list หรือ bullet หน้า link
background-repeat: no-repeat;
list-style-type: none;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-image: url();
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:#8aaac0;
border:0px;
}
/* ส่วนคอมเมนต์ */ «comment ของคนอื่นๆ
.comment{
padding:6px 5px 2px 5px;
margin:10px;
}
.commentcontent{
color: #808080;
padding:5px 5px 5px 16px;
font-size:11px;
line-height: 1.3em;
}
.commentfooter{
padding:2px 2px 2px 15px;
color:#808080;
font-size:9px;
border:1px solid #a3a3a5;
background-color:#ebeaeb;
}
.commentdetail{
padding:0px 5px 0px 0px;
}
.commentposter a:link,.commentposter a:visited,.commentposter a:hover{
text-decoration:none;
padding:0;
}
.commentposter a:hover{
border-bottom:0px;
}
/* ฟอร์มใส่คอมเมนต์ */
form{ «กล่อง ที่คนจะเขียน comment
padding:2px 5px 2px 20px;
margin:10px;
font:11px Tahoma,"Verdana";
border:1px solid #a3a3a5;
background-color:#ebeaeb;
}
input{«ช่องที่เอาไว้พิมพ์ ใส่ชื่อ, URL, e-mail สำหรับคนไม่ได้เป็นสมาชิกexteen หรือ คนที่ไม่ได้ log-in & กำหนดรูปแบบปุ่มได้ด้วย « thx: พี่นี*
font:11px Tahoma,"Verdana";
border:1px solid #a3a3a5;
background-color:#ebeaeb;
}
/* ส่วนใน text Area ช่องที่ใส่ คอมเม้น+ scroll bar ของ form ใส่ comment « thx: พี่นี*/
.textarea{ « ช่องใหญ่ๆที่เอาไว้พิมพ์ comment
width:400px;
height: 100px;
float:left top;
color: #808080;
text-align:left;
border:1px solid #a3a3a5;
background-color:#ffffff;
background-image:url();
SCROLLBAR-FACE-COLOR: #ffffff; « scrollbar ใน ช่องใหญ่ๆที่เอาไว้พิมพ์ comment
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #4a82a1;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}
* อันที่ไม่ได้อธิบาย คือ เราไม่รู้ หรือ มันไม่สำคัญนะคะ แหะๆ
