Favourites

/*Normal Theme for the new exteen*/

/*Copyright by Etceto co,ltd. 2007*/ 

/*======================================================================*//*

Simple Reset - Not Editable*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { 

               margin: 0;

                padding: 0;

                border: 0;

                outline: 0;

}

 

/* General */ ส่วนของหน้าบลอกทั้งหมด

body { ตั้งค่าเกี่ยวกับbackground

                background:#c7e1e9 url(http://g.exteen.com/t/apollo/bck.gif) repeat-x top left;

ใช้ในการเปลี่ยนพื้นหลังของบลอคสามารถเปลี่ยนได้ทั้งแบบสีธรรมดาและใส่ภาพ
แบบสี#000000 <<=เปลี่ยนรหัสสีหลัง#ซึ่งจะมีทั้งหมด6ตัวแบบรูปภาพurl(ลิงค์ภาพ) <<= ใส่ลิงค์ของภาพลงในวงเล็บ
Repeat-x จะเป็นการเซทค่าว่าให้ภาพขึ้นซ้ำๆกัน หากไม่ต้องการให้ขึ้นซ้ำก็ให้ลบทิ้งไม้ก็เปลี่ยนเป็น no-repeat
Top left เป็นการตั้งค่าว่าให้ภาพอยู่ที่ตำแหน่งไหนสามารถเปลี่ยนเป็น top/down/left/right ได้ตามต้องการ

                 color:#333;

ใช้ในการเปลี่ยนสีตัวอักษรภายในบลอค
*ในกรณีที่โค้ทสีเป็นเลขซ้ำกันทั้งหมด สามารถใช้แค่3ตัวแรกได้
ดังเช่นในตัวอย่าง จะให้ผลลัพธ์เดียวกับ
#3333

                  font:12px Tahoma, "MS Sans Serif";

ใช้ในการเปลี่ยนขนาดและfontของตัวอักษร12px <<= ขนาดของตัวอักษร ยิ่งเลขมากยิ่งตัวใหญ่Tahoma, "MS Sans Serif" <<= ฟอนท์ของตัวอักษร
*สามารถเปลี่ยนเป็นฟอนท์ใดก็ได้ แต่หากคอมของผู้ที่เปิดดูบลอคไม่มีฟอนท์นั้นจะเปลี่ยนเป็นฟอนท์มาตรฐานของคอมแทน *โดยปกติแล้วบลอคจะเลือกใช้ฟอนท์แรกก่อน เมื่อไม่มีตัวอักษรตัวใดแล้วจึงจะเลือกใช้ฟอนท์หลังเช่นฟอนท์แรกมีแต่ภาษาอังกฤษ แล้วเราพิมพ์ภาษาไทย บลอคจะเลือกใช้ฟอนท์ภาษาไทยจากฟอนท์ที่2แทน

                  line-height:1.5em;

                text-align:center; 

} 

a:link, a:visited{ ตั้งค่าเกี่ยวกับlink(สถานะปกติ)

                color:#3985a2;

ใช้ในการตั้งค่าสีของลิงค์ในสถานะปกติ

                  text-decoration:none;               

} 

a:hover, a:active{ ตั้งค่าเกี่ยวกับlink(สถานะเมื่อเมาท์ชี้ไปที่link)

                color:#28a9d9;

ใช้ในการตั้งค่าสีของลิงค์ในสถานะเมื่อเมาท์ชี้ไปที่link

 } 

#page{ ตั้งค่าของส่วนที่เป็นคอนเทนท์

                margin:auto;

                padding-top:15px;

ใช้ในการตั้งค่าพื้นที่ว่างด้านบน

                  text-align:left;

ใช้ในการตั้งค่าว่าตัวหนังสือจะอยู่ตำแหน่งไหนโดยปกติแล้วจะเซทให้อยู่ชิดด้านซ้ายมือ
*หากต้องการเปลี่ยนตำแหน่งให้เปลี่ยนจาก left เป็นRight <<= ตั้งให้ชิดด้านขวามือCenter <<= ตั้งให้อยู่ตรงกลาง

                  width:780px;

ใช้ในการตั้งค่าความกว้างของพื้นที่คอนเทนท์

 } 

#header, #neck, #belly, #leg, #footer{

                float:left;

                width:780px;

ใช้ในการตั้งค่าความกว้างของส่วนแสดงข้อมูลอื่นๆเช่นเฮด แถบเมนูใต้เฮด และอื่นๆโดยปกติแล้วผมเซทให้มันเท่ากับอันบนแหละครับ

 } 

/*======================================================================*/

/* Header */ ตามชื่อเลยครับ ใช้ตั้งค่าส่วนที่เป็นเฮดของคอนเทนท์

 

#header{

                background:url(http://g.exteen.com/t/apollo/header.png) top left no-repeat;

ใช้ในการเปลี่ยนกรอบของเฮดสามารถเปลี่ยนได้ทั้งแบบสีธรรมดาและใส่ภาพ
โค้ททั่วไปเหมือนกับการเปลี่ยนภาพของBGครับ

 

                padding:32px 0px 0px 25px;

การกำหนดช่องว่างรอบๆครับ
โดยทั่วไปจะเรียงแบบตามทิศ N E W Sหรือ เหนือ ใต้ ออก ตก(บน ล่าง ซ้าย ขวา)

 } 

#header h1 a{ เอาไว้ตั้งค่าคำอธิบายบลอคที่เราตั้งไว้(สถานะปกติ)

                color:#666;

ใช้ในการตั้งค่าสีของลิงค์ในสถานะปกติ

 

                font-size:24px;

ใช้ในการขนาดของตัวอักษร

} 

#header h1 a:hover{ เอาไว้ตั้งค่าคำอธิบายบลอคที่เราตั้งไว้(สถานะเมื่อเมาท์ชี้ไปที่link)

                color:#999;

ใช้ในการตั้งค่าสีของลิงค์ในสถานะเมื่อเมาท์ไปสัมผัส

} 

#header h2{

                font-size:12px;

                margin:5px 0px 5px 0px;

} 

#coverimage{

                background:url(http://g.exteen.com/t/apollo/cover.jpg) no-repeat;

ใช้ในการเปลี่ยนภาพของเฮด

 

                height:180px;

ขนาดความสูงของภาพ

                  width:730px;

ขนาดความกว้างของภาพ
*โดยปกติมันจะเล็กกว่าความกว้างบลอคด้านบนนะครับ แต่สามารถเซทให้ค่าใกล้เคียงกันได้  ของผมเซทให้ต่างกัน10pxไม่งั้นบลอคเบี้ยวครับ

                  margin-bottom:5px;

กำหนดขอบความกว้างใต้ภาพ

 

}

 /*======================================================================*/

/* Neck Menu */ คือส่วนที่เป็นแถบเมนูใต้ภาพครับ