ตามคำเรียกร้องของใครหลาย ๆ คน ผมบอกไว้ก่อนนะว่าผมสอนทำธีมไม่เป็น
อันนี้ก็เอามาลงแค่เท่าที่รู้เท่าน้าน~
ถ้ามานผิดพลาดประการใดก็ขออภัยด้วยนะคร้าบบบบ
แล้วถ้าใครรู้มากกว่านี้แล้วช่วยเพิ่มเติมให้ก็จะดีมาก ๆ เลยก๊าบ
ขอบคุณก๊าบบบ~
/* สีของลิงค์ */
a:link, a:visited{
color:#990000;
border-bottom:1px dotted #990000;
text-decoration:none;
}
a:hover{
color:#990000;
border-bottom:1px solid #990000;
}
/* ทั้งหน้ามีลักษณะเป็นอย่างไร */
.site{
margin:20px;
อันนี้ก็คือตัวกำหนดระยะห่างตรงนี้อ่ะ (รูปด้านล่างฮับ)
padding:0px;
คำสั่งด้านบนนี้ถ้าเราต้องการให้เอนทรี่อยู่ฝั่งซ้ายหรือขวา ก็ให้เพิ่ม 0px ไปอีก 3 ตัว ก็จะเป็นแบบนี้ padding:0px 0px 0px 0px; จากนั้นก็ลองเพิ่มตับเลขจาก 0 ดู ผมก็มั่งตรงเพิ่มตัวเลขนี่แหละ บลอค blue-destiny ของผมปรับไว้ที่ 0px 0px 100px 338px อ่ะคับ
text-align:center;
background:url() #cccccc repeat;
ตรงนี้ถ้าต้องการให้พื้นหลังเป็นรูปล่ะก็นะ ให้ใส่ url ของรูปลงใน () แล้วก็ลบ #cccccc ซะ เพราะตรงนั้นจะเป็นการกำหนดสีพื้นหลัง ในเมื่อเรามีรูปเป็นพื้นหลังแล้วคำสั่งนี้ก็ไม่จำเป็นอีกต้องไป ถ้าไม่ลบตรงนี้ออกมันก็อาจจะมีส่วนทำให้ error ได้นะ
แล้วถ้าใครต้องการให้ BG อยู่กำบที่ต้องเพิ่มคำสั่งนี้เข้าไปด้วย
background-attachment : fixed;
เท่านี้ BG ก็ไม่ขยับไปไหนแล้วล่ะคับ
ส่วนใครที่ต้องการจะทำ theme แบบบลอคนี้
ส่วนใครที่ต้องการจะทำ theme แบบนี้
ไอ้การทำช่องด้านข้างอ่ะนะใช้คำสั่งนี้เพิ่มเติมเข้าไปนะฮะ
/* ส่วนนี้เป็นส่วนของ blogทั้งหมด*/
#all {
overflow: auto;
position: absolute;
top:69px;
left:367px;
width:570px;
height:461px;
}
ก๊อปฯไปลงเลยก็ได้ แล้วก็ไปปรับขนาดเอาเองนะฮะ การมั่งบ้างครั้งก็ทำให้เราเรียนรู้ได้ดีออกนะ
}
/* ความกว้างของหน้าบลอค */
#wrapper{
width:680px;
}
/* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */
#all{
width:680px;
float:left;
}
/* แถบบนสุด */
#uptab{
width:680px;
float:left;
height:29px;
background: url(/global/theme/predefined/easy/exteen.gif) right top no-repeat;
ส่วนข้อความในวงเล็บข้างบนก็คือ url ของไอคอน exteen ที่อยู่บนสุดของบลอคเรานั่นเอง
ถ้าต้องการจะใส่ไอคอนอื่นก็ลบออกแล้วใส่ url ของรูปที่ต้องการซะ
}
/*แถบกลาง หรือก็คือที่แสดงบลอค */
#midtab{
width:680px;
padding:0px;
border:3px solid #990000;
ถ้าไม่ต้องการเส้นขอบของเอนทรี่ก็ลบเลข 3 ถ้าต้องการเปลี่ยงสีก็เปลี่ยนรหัสตัวเลขหลัง #
float:left;
}
/* แถบล่างสุด */
#downtab{
float:left;
width:680px;
height:4px;
}
/* รูปภาพด้านบน เซตความสูงและกว้างตามภาพ */
.picture{
background: url(/images/easytheme_header_a740.jpg) no-repeat;
header น่ะนะท่านต้องการให้เป็นรูปอ่ะไรก็ใส่ url ของรูปนั่นไปเช่นเดียวกาน
height: 130px;
width: 680px;
กำหนดความสูงและความกว้างของช่อง header นะคับ
border-bottom:1px dotted #990000;
}
.title{
font-family: "Microsoft Sans Serif", "Sans Serif";
font-size: 10pt;
font-weight: Bold;
color: #660000;
padding-right:10px;
vertical-align:bottom;
text-align:right;
}
.content{
width:680px;
font-family: Tahoma, "MS Sans Serif";
font-size: 12px;
color:#660000;
text-align:center;
float:left;
background-color:#cccccc;
อันนี้คือสีพื้หลังของเอนทรี่นะ ถ้าเราต้องการจะเอารูปมาใส่เป็นพื้นหลังของเอนทรี่ ก็ไปก็อปฯเอาคำว่า background:url(); มาจากตรงไหนก็ได้ แล้วก็เอามาวางแทนที่อันเก่าเลยนะ
}
/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */
.leftcontent{
width:500px;
float:right;
text-align:left;
background-color:#FFFFFF;
border-left:1px #990000 dotted;
}
/* พวกที่เป็นแถบลิงค์ต่างๆ */
.rightcontent{
width:179px;
float:left;
text-align:left;
background-color:#e6e6e6;
border-bottom:1px #990000 dotted;
}
.iday {
}
/* สีของหัวข้อพวก วันที่ ประเภท */
.iday h3 {
background-repeat: no-repeat;
background-position: left top;
margin:10px 14px 0px 10px;
padding:3px 0px 3px 3px;
font-size: 14px;
color:#660000;
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(/global/theme/predefined/easy/bl.gif);
ถ้าเราต้องการเอาไอคอนน่ารัก ๆ มาใส่แทนไอคอนรูปสามเหลี่ยมอันเดิม ก็เปลี่ยน url เหมือนกาน แต่ก็ต้องไปปรับตรง padding ด้วยนะ เพื่อเป็นการกำหนดขนาดพื้นที่ที่ไว้โชว์รูป
background-repeat: no-repeat;
background-position: left top;
padding:0px 10px 0px 16px;
font-size: 12px;
text-decoration:none;
font-weight:bold;
color:#660000;
border:0px;
}
/* ส่วนแสดงเนื้อหา entry */
.entrycontent{
padding:5px 10px 5px 16px;
color:#660000;
font-size:12px;
ด้านบนเป็นการกำหนดขนาดตัวหนังสือ ส่วนถ้าต้องการให้ตัวหนังสือมาความหนาด้วยนั้นให้ใส่อันนี้เข้าไปด้วย
font-weight: Bold; อันนี้ผมก็ก็อปฯ มาจากแถว ๆ นี้แหละ
}
/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */
.entryfooter{
border-top:1px dotted #990000;
padding:2px 2px 2px 15px;
color:#660000;
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:#990000;
text-decoration:none;
padding:0px 80px 0px 0px;
border:0px;
}
/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
color:#660000;
border:0px;
}
/* แถบแสดงชื่อ */
.profile{
padding:5px; margin:0px 1px 0px 10px;
font-size:10px;
}
/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:2px 0px 2px 0px;
color:#660000;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
padding-left:10px;
background-color:#cccccc;
border-bottom:1px #990000 dotted;
border-top:1px #990000 dotted;
}
.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/easy/bl.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:11px;
border:0px;
}
.sidebar-item a:hover{
color:#990000;
border:0px;
}
/* ส่วนคอมเมนต์ */
.comment{
padding:6px 5px 2px 5px;
margin:10px;
background-color:#e6e6e6;
}
.commentcontent{
color: #660000;
padding:5px 5px 5px 16px;
font-size:11px;
line-height: 1.3em;
}
.commentfooter{
padding:2px 2px 2px 15px;
color:#660000;
font-size:9px;
}
.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;
font:11px Tahoma,"MS Sans Serif";
background-color:#cccccc;
อานนี้ก็เช่นเดียวกาน ถ้าจะใส่รูปก็ไปก็อปฯคำว่า background:url(); มาแล้วกด็ใส่ url ของรูปลงในวงเล็บ
แล้วอย่าลืมลบ BG color ออกด้วยล่ะ
}
input{
font:11px Tahoma,"MS Sans Serif";
}
อันนี้เพิ่มเติมนะก็ถ้าต้องการจะเปลี่ยนสี scrollbar ก็เอาคำสั่งนี้ไปใช้ แต่อะไรเป็นอะไรนี่ก็ลืมไปแล้วอ่ะ มั่วอีกเหมือนกาน
}
BODY{
scrollbar-3dlight-color:#FF0066;
scrollbar-arrow-color:#FF0066;
scrollbar-base-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-shadow-color:#FF0066;
}
จบแล้วคร้าบบบ~
ก็บลอคมานว่าไม่รู้จาทำอะไร
.GIF){kind=icon}