KeeChan

ก่อนอื่นต้องขออธิบายความแตกต่างของระบบ bg ที่เค้าเซ้ทอัตโนมัติไว้ให้ กับ bg ที่เราทำเองนะ มันคือ bg แบบดั้งเดิมที่มีให้เลือก จะมี bg สามอันซ้อนกัน แต่แบบที่เราทำ จะเหลือ bg หลังไว้อย่างเดียว เพราะฉะนั้นคำสั่งเหล่านี้ (เวลาหาคำสั่งใช้ ctrl+f ช่วยกดหาเอานะ ว่าจะไปเติมตรงไหน) ต้นแบบตัวโค้ดเรา มาจากแบบ artristry นะจ้ะ

/* แถบแสดงชื่อ */
.profile{
padding:5px; margin:0px 1px 0px 0px;
background-color:#CCC7B8; <<< ลบทิ้ง
font-size:10px;
border-bottom:1px solid #8AA29B; << ไม่รู้เรื่อง ลบทิ้ง

/*แต่ละไอเท็มของแถบด้านข้าง*/
.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 1px 0px 0px;
padding:0px 0px 0px 8px;
border-bottom:1px solid #CCC7B8; << ไอ้นี่ไม่รู้เรื่อง เราลบทิ้ง
border-top:1px solid #E9E6DB; << ไอ้นี่ไม่รู้เรื่อง เราลบทิ้ง
background-color:#DCD8CB; << ลบทิ้ง

ก็จะทำให้ bg หลังสุดเราทะลุออกมาได้วิธีทำ bg หลังสุด ให้มันเป็นใส ๆ บาง ๆ ก็ติดตามที่บล็อคออมนะจ้ะ ง่าย ๆ คือเราทำ bg สำเร็จรูปลวงโลกนะ 555
http://zeryu.exteen.com/20050410/how-to-make-a-bg<< บล็อคออม
bg แผ่นเดียวที่ทำ จะออกมาเป็นรูปแบบนี้

การทำ bg พื้นหลังอย่างเดียวให้พอดีกับขนาดบล็อคที่เราเขียน จะต้องเซ็ท

/* ทั้งหน้ามีลักษณะเป็นอย่างไร */
.site{
margin:0px;
padding:0px;
text-align:center;<< เซ้ทตำแหน่งหน้าบล็อคทั้งหมด ที่ในรูปก็คือตรงกลาง จริง ๆ จะเปลี่ยนให้ชิดซ้ายหรือขวาก็ได้ แต่ก็เห็นทำตรงกลางกันทุกคนนี่นะ
background-color: #CCCCCC; << สีbg ที่จะโดน bg ข้างล่างทับ (เอ่อ สีพื้นหลังตอนที่ bg ยังโหลดไม่เสร็จน่ะ)
background-image:url(/global/theme/predefined/artistry/bckpage.gif); << ใส่ bg ผืนใหญ่ที่เราทำ
background-attachment:fixed; << โค้ดที่ทำให้ bg fixed
}
/* ความกว้างของหน้าบลอค */
#wrapper{
width:640px; << ไอ้นี่กะข้างล่างก็ซ้ำกัน ไม่รู้ว่าจะมีไว้ทำไม เราโง่ แต่ก็เซ้ทให้เหมือน ๆ กันซะ
}

/* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */
#all{
width:640px; << ก็ความกว้างเหมือนเดิมอ่ะ
float:left;
background-image:url(/global/theme/predefined/artistry/bckall.gif); << เอ่อ เราใส่ bg รวมข้างบนแล้วก็ไม่ต้องใส่ ลบทิ้ง
background-repeat: repeat-y; << ลบทิ้ง
background-position: center; << ลบทิ้ง
border:1px solid #FFFFFF; << ขอบน่ะ ไม่รู้เรื่องเว้ย ลบทิ้ง
}
/* แถบบนสุด */ << ถ้าอยากให้มีขอบบนเป็นพื้นสี ก็ใส่ได้ แต่เราลบทิ้งทั้งดุ้น ขี้เกียจทำ
#uptab{
}
/*แถบกลาง หรือก็คือที่แสดงบลอค */
#midtab{
width:640px; << ให้เซ้ททำไมตั้งสามรอบ งงวุ้ย แต่ก็ทำให้มันเหมือน ๆกันไปเหอะ
padding:0px;
}
/* แถบล่างสุด */ << อยากให้มีขอบล่างก็ใส่ได้ เราก็ลบทิ้งทั้งดุ้นอีก ขี้เกียจ
#downtab{
background-image: url(/global/theme/predefined/artistry/defbck.jpg);
background-repeat: no-repeat;
background-position: left top;
font-size:0px;width:640px;height:20px;
float:left;

/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */
.leftcontent{
width:470px; << กำหนดความกว้าง
float:right;
text-align:left;

/* พวกที่เป็นแถบลิงค์ต่างๆ */
.rightcontent{
width:170px; << กำหนดความกว้าง
float:left;
text-align:left;
}

/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */ +
/* พวกที่เป็นแถบลิงค์ต่างๆ */ = /* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */ น้อ หรืออาจจะน้อยกว่าก็ได้ อย่างของเราจะเป็น

420 + 200 = 620 (แต่เราเซ้ทความกว้างจริง ๆ น่ะ 640 เพื่อไม่ให้ข้อความหลุดออกมาเกินงาม แบบว่าเผื่อ ๆ ไว้)

การกำหนดความกว้างขอบเหล่านี้ สำคัญมากเพราะจะสัมพันธ์กับเวลาเราสร้าง bg นะจ้ะ เวลาจะแบ่งสีใน bg ก็จะขึ้นอยู่กับความกว้างที่เรากำหนดไว้นี่แหละ ต้องให้มันรับกันพอดี ไม่งั้นมันจะเบี้ยวได้นะ

อ่า เรื่อง bg ก็จบแล้วมั้ง คราวนี้เหลือ กำหนดสีตัวอักษร คือคำสั่งเค้าดูซับซ้อน แล้วเยอะมากเลย (ไฮโซก็เงี้ย) เราลบทิ้งเยอะมาก 555 ลองไปดูคำสั่งที่เหลือกัน อันไหนที่เราไม่เขียนว่าง ๆ แปลว่าเราก็ไม่รู้เรื่องนะ ^^!!!

/* สีของลิงค์ */
a:link, a:visited{
color:#675B4D; << กำหนดสีลิ้งค์
border-bottom:1px dotted #675B4D; << ไอ้นี่ไม่รู้เรื่อง เราลบทิ้ง
text-decoration:none;
}
a:hover{
color:#FF6600; << สีเวลาเอาเม้าส์ไปวาง
border-bottom:1px solid #FF6600; << ไอ้นี่ไม่รู้เรื่อง เราลบทิ้ง
}

/* รูปภาพด้านบน เซตความสูงและกว้างตามภาพ */ << หัวบล็อค ทำกันเป็นหมดแล้วมั้ง
.picture{
background-image: url(/global/theme/predefined/artistry/defbck.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 80px; << กำหนดความสูง
width: 640px; << กำหนดความกว้าง
border-bottom:1px solid #FFFFFF; << เส้นกั้นระหว่างหัวบล็อคกับข้อความ ถ้าไม่อยากได้ก็ลบทิ้ง
}
.title{ << ข้อความหัวบล็อค (ของเราคือคำว่าKeeChan แต่ซ่อนไว้แล้ว)
font-family: Tahoma, "MS Sans Serif";
font-size: 24px; <<กำหนดขนาด (เรากำหนด 1px เพราะจะซ่อนมัน)
color: #FFFFFF; << กำหนดสี
text-align:left;
vertical-align:bottom;
padding:24px 0px 15px 70px; << เซ้ทตำแหน่งข้อความบนหัวบล็อค

paddingคือขอบ(ละมั้ง เรียกว่าไรดี) ตัวเลขที่ให้ใส่ 4 อย่างนี่คือ
0px (ด้านบน ถ้าใส่เลขลงไป สมมติ 20เหนือข้อความก็จะมีช่องว่าง 20px)
0px (ด้านขวา ถ้าใส่เลขลงไป สมมติ 20ด้านขวาข้อความก็จะมีช่องว่าง 20px)
0px (ด้านล่าง ถ้าใส่เลขลงไป สมมติ 20ล่างข้อความก็จะมีช่องว่าง 20px))
0px (ด้านซ้าย ถ้าใส่เลขลงไป สมมติ 20ด้านซ้ายข้อความก็จะมีช่องว่าง 20px)

}
/* ต้องมาเซตสีไตเติลตรงนี้ด้วย */ << ไอ้นี่ก็ไม่รู้เรื่อง เซ้ท ๆ สีให้เหมือนข้างบนแล้วกัน
.title a:link, .title a:visited, .title a:hover{
border-color:#FFFFFF;
color:#FFFFFF;
}
.content{
width:640px;
font-family: Tahoma, "MS Sans Serif";
font-size: 12px;
color: #666666; << สี default เวลาเขียนบล็อค
text-align:center;
float:left;
}
.iday {
}
/* สีของหัวข้อพวก วันที่ ประเภท */
.iday h3 {
background-repeat: no-repeat;
background-position: left top;
margin:5px 10px 0px 10px;
padding:0px 0px 0px 0px;
font-size: 14px;
color:#CD0202; << ใส่สี
border-bottom:1px dotted #DDDDDD;
}
/* เรื่องหนึ่งๆ */
.entry{
padding:5px 10px 5px 10px;
margin:5px 0px 5px 0px;
}
/* หัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */
.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{
background-image:url(ใส่ url); << ใส่bg ของหัวข้อแต่ละวัน
background-repeat: no-repeat;
background-position: left top;
padding:0px 0px 0px 16px;
font-size: 12px;
text-decoration:none;
font-weight:bold;
color:#69848C;
border:0px;
}
/* ส่วนแสดงเนื้อหา entry */
.entrycontent{
color: #000000;
padding:5px 5px 5px 16px;
color:#000000;
font-size:11px;
line-height: 1.3em;
}
/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */
.entryfooter{
border-top:1px solid #EEEEEE;
padding:2px 2px 2px 15px;
color:#CCCCCC;
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/artistry/entrycomment.gif);<< อันนี้คือไอคอนคำว่าcomment ถ้าไม่มีรูปอื่นมาใส่ ก็ไม่ต้องลบออกนะ เดี๋ยวจะหาที่เมนท์กันไม่เจอ
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;
}

/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:5px 0px 5px 8px;
color:#006666;<< สีของคำว่า Recommended
font-family:Tahoma;
font-size:12px;
letter-spacing: 0.2em;
text-transform: capitalize;
background-image:url(ใส่ url); << เติม bg ตรงคำว่า Recommended
}
.sidebar-item{
padding:0px 0px 0px 0px;
margin:0px;
}

.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 li:hover{
background-color:#B3AD9B; << ไอ้นี่ไม่รู้เรื่อง เราลบทิ้ง
color:#FFFFFF;
}
.sidebar-item a:hover{
color:#FFFFFF;
border:0px;
}
/* ส่วนคอมเมนต์ */ << เลือกได้เปลี่ยนได้ผสมได้ ทำเป็นแล้วเว้ย!
.comment{
padding:2px 5px 2px 5px;
margin:10px;
border:1px dotted #CCCCCC;
border-left:10px solid #CCCCCC;
background-image:url(ใส่ url); << เติม bg ตรงกล่องคอมเมนท์ที่คนอื่นเข้ามาอ่าน (รวมสองอันข้างล่างไว้อันเดียว)
}
.commentcontent{
color: #000000;
padding:5px 5px 5px 16px;
color:#000000;
font-size:11px;
line-height: 1.3em;
background-image:url(ใส่ url); << เติม bg ตรงกล่องคอมเมนท์ของคนอื่น ส่วนที่เป็นความเห็น
}
.commentfooter{
border-top:1px solid #EEEEEE;
padding:2px 2px 2px 15px;
color:#999999;
font-size:10px;
background-image:url(ใส่ url); << เติม bg ตรงกล่องคอมเมนท์ของคนอื่น ส่วนที่เป็นชื่อ + ลิ้งค์
}
.commentdetail{
padding:0px 5px 0px 0px;
}
.commentposter a:link,.commentposter a:visited,.commentposter a:hover{
text-decoration:none;
padding:0;
border-bottom:0px;
background-image:url(ใส่ url); << เติม bg ตรงชื่อคนที่มาคอมเมนท์
}
.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";
background-image:url(ใส่ url); << เติม bg ตรงกล่องใส่คอมเมนท์
}
input{
font:11px Tahoma,"MS Sans Serif";
}
textarea{
background-color:#FFFFFF;filter:Alpha(opacity=50) << ใส่ filter ตรงกล่องที่ให้คนพิมพ์ เพื่อให้เห็น bg ที่ใส่ไว้ข้างบนตัวเลขยิ่งมาก สีขาวยิ่งจางค่ะ

แถม ต้นตำรับจากบล็อคแพมของเก่า เปลี่ยนสี scroll bar ใช้โค้ดนี้

<style>
<!--
body{ scrollbar-3d-light-color: #FFFFFF;
{ scrollbar-arrow-color: #0033CC;
{ scrollbar-base-color: #FFFFFF;
{ scrollbar-dark-shadow-color: #0099FF;
{ scrollbar-face-color: #0033CC;
{ scrollbar-highlight-color: #FFFFFF;
{ scrollbar-shadow-color: #0099FF;</style>

ไปลองจิ้ม ๆ ใส่สีกันเองนะ เราก็มั่ว ๆ แหะ ๆ
เหนื่อยแล้วอ่า เราอธิบายมากกว่านี้ไม่ไหวแล้ว มึนนนน
(สังเกตว่าช่วงแรกจะขยัน ช่วงหลัง ๆ ตรงคอมเมนท์นี่ช่างหัวมันเลย ปล่อยไว้แบบเดิม เหอๆ)

ให้อธิบายหมด มันจะงง ๆ ซะเอง เอาเป็นว่า ถ้าสงสัยอะไรตรงไหน ก็ถามมาแล้วกันจ้ะ จะได้อธิบายเป็นจุด ๆ ไปนะ ถ้าช่วยได้ก็เต็มใจช่วยค่า

หรือถ้ามีข้อสงสัยอื่น ๆ ก็ถามเวบมาสเตอร์ได้นะคะ (อ่าว โบ้ยงานซะงั้น 5555)
http://champcpe.exteen.com/20050328/entry<< อธิบายวิธีทำธีมของคุณแชมป์ เวบมาสเตอร์ค่ะ