เมื่อวานได้อธิบายวิธีแทนลิงค์ด้วยภาพให้เืพื่อน ๆ ไปทดลองทำเล่นกันดูแล้วนะ (ใครไม่รู้จิ้มได้) วิธีทำง่ายมากคับไม่ยุ่งยาก รับรองว่าทำได้ทุกคน

หลังจากเปลี่ยน Theme ใหม่คราวนี้ เพื่อน ๆ หลายคนชมว่าสวย ก็ขอขอบคุณมาก ๆ เลยสำหรับคำชม ซึ่งวิธีทำ Theme ก็ไม่ยุ่งยากอะไรเลย ใช้เพียงภาพไม่กี่ภาพเท่านั้น (เป็น Theme สำเร็จรูปน่ะ จะมีในส่วนของ Header, Content และ Footer เท่านั้น) แต่ถ้าใครอยากทดลองเปลี่ยน Theme ใหม่ด้วยตัวเอง วันนี้มีคำอธิบายง่าย ๆ ในส่วนของตัว CSS มาฝากกัน รู้ไว้สักนิด รับประกันว่าจะสนุกกับการแ้ก้ไข Theme 

ก่อนอื่นเพื่อน ๆ ต้องทำความเข้าใจกับตัว CSS ที่ใช้ในการเขียน Code กันก่อน ถ้าใครไม่ถนัด CSS ก็ให้เลือกใช้ Theme ของ exteen แทน เค้าจะมี Theme สำเร็จรูปมาให้พร้อม เพื่อน ๆ สามารถเลือกใช้ได้ตามใจชอบ แต่ถ้าใครอยากจะลองเปลี่ยนหน้าตา Theme ของตัวเองดูบ้าง ลองมาดูกันว่าจะต้องเปลี่ยนตรงไหน

ตัวอย่างการแก้ไข Theme Apollo นะ...ส่วนไหนเขียน CSS เหมือนกันขอข้ามผ่านไม่อธิบาย เพราะใช้การกำหนดค่าเหมือนกัน

ส่วนประกอบหลัก ๆ ของ CSS ใน Theme ก็จะในส่วนของ
  1. /* General */
  2. /* Header */
  3. /* Neck Menu */
  4. /* Content */
  5. /* Sidebars */
  6. /* Configure each module */
  7. /* Comment Form */
  8. /* Comment (Showing Area) */
  9. /* Leg Menu */
  10. /* Footer */
 
ในส่วนแรก เป็นของ /*General*/  ประกอบไปด้วยการแก้ไขภาพพื้นหลัง, การเปลี่ยนสีลิงค์, ขนาดตัวอักษรตรงหัวบล็อค และการกำหนดขนาดความกว้างของ Theme จะอธิบายแบบง่าย ๆ ไม่ยุ่งยากนะ

/* General */
body
{
background:#c7e1e9 url(http://g.exteen.com/t/apollo/bck.gif) repeat-x top left;
> แก้ไขพื้นหลังของ Theme สามารถใช้ภาพหรือสีก็ได้ตามใจชอบ และสามารถกำหนดรูปแบบของพื้นหลังได้ด้วยนะคับ ด้วยการใส่ repeat-x, (ภาพอยู่ด้านบน), repeat-y (ภาพอยู่ด้านซ้ายมือ ขยายเต็มเท่าขนาดภาพ), top left (ภาพขยายเต็ม), top left no-repeat (ภาพจะอยู่มุมซ้ายด้านบน ไม่ขยายเต็ม)
color:#333;
> สีตัวอักษรที่ปรากฎในเอนทรี เลือกได้ตามใจ ขอแค่อย่ากลืนกับพื้นหลังจนอ่านไม่ออกก็พอ
font:12px Tahoma, "MS Sans Serif";
> ขนาดและรูปแบบตัวอักษร ปกติจะอยู่ที่ 12px (ใช้ 13.5 pxคับ)
line-height:1.5em;
> ระยะห่างของบรรทัด สามารถกำหนดได้ตามต้องการ (ใช้ 2em คับ)
text-align:center;
> การจัดตำแหน่งของตัวอักษร กำหนดให้อยู่ซ้าย กึ่งกลาง หรือขวา
}

a:link, a:visited
{
color:#3985a2;
> สีลิงค์ภายในบล็อคเมื่อนำเมาส์ไปชี้ สามารถเปลี่ยนได้ตามต้องการ โดยดูรหัสสีได้จากลิงค์ด้านล่าง
text-decoration:none;
> รูปแบบของตัวอักษร สามารถให้ขีดเส้นใต้หรือกระพริบ สามารถกำหนดได้แบบนี้นะ overline = มีเส้นใต้ขีดอยู่ด้านบนตัวอักษร, line-through = มีเส้นขีดทับตัวอักษร, underline = มีเส้นใต้ขีดอยู่ด้านล่างตัวอักษร และ blink = ทำให้ตัวอักษรกระพริบ แต่ถ้ากำหนดเป็น none จะไม่แสดงผลอะไร 
}

a:hover, a:active
{
color:#28a9d9;
> สีลิงค์ภายในบล็อค สามารถเปลี่ยนได้ตามต้องการ
}

#page
{
margin:auto:
> กำหนดระยะห่างภายในบล็อค ถ้าเป็น auto เว็บเบราเซอร์จะกำหนดให้โดยอัตโนมัติ
padding-top:15px;
> กำหนดระยะห่างจากหัวบล็อค ตัวเลขยิ่งมากระยะห่างยิ่งเพิ่ม
text-align:left;
> การจัดตำแหน่งของตัวอักษร กำหนดให้อยู่ซ้าย กึ่งกลาง หรือขวา
width:780px;
> กำหนดขนาดความกว้างของบล็อค ปกติจะอยู่ที่ 780px สามารถเพิ่มหรือลดได้ตามต้องการ จะเพิ่มเป็น 980 px, 1004px ก็ได้คับ (ใช้ 1004px คับ) 
}

#header, #neck, #belly, #leg, #footer
{
float:left;
> การจัดตำแหน่งภายในบล็อค สามารถกำหนดให้อยู่ซ้าย หรือขวา
width:780px;
> กำหนดขนาดความกว้างของบล็อค ปกติจะอยู่ที่ 780px สามารถเพิ่มหรือลดได้ตามต้องการ
}

** มีข้อควรระวังนิดนึงนะ ถ้าจะขยายขนาดบล็อคจะต้องกำหนดค่า width ในส่วนของ #page, #header, #neck, #belly, #leg, #footer ให้เหมือนกัน เพราะถ้ากำหนดค่า width ไม่เท่ากัน บล็อคของเพื่อน ๆ จะสั้น ๆ ยาว ๆ  ***

อ่ะ...จบในส่วนของ /*General*/ แล้วนะ ไปต่อกันในส่วนของ /*Header*/ กัน โดยส่วนของ Header นี่สามารถเปลี่ยนภาพของหัวบล็อค ขนาดและสีของตัวอักษรในหัวบล็อคได้ตามใจชอบ

/* Header */
#header
{
background:url(http://g.exteen.com/t/apollo/header.png) top left no-repeat;
> แก้ไขส่วนหัวของ Theme สามารถใช้ภาพหรือสีก็ได้ตามใจชอบ (ดูเพิ่มเติมในส่วนของ body background นะ)
padding:32px 0px 0px 25px;
> กำหนดระยะห่างของภาพในหัวบล็อค ตัวเลข 32px 0px 0px 25px เป็นการกำหนดระยะห่าง โดยเฉพาะตัวเลขสุดท้ายคือ 25px ตัวเลขยิ่งเยอะ ระยะห่างของภาพก็ยิ่งห่างมากขึ้น
}

#header h1 a
{
color:#666;
> สีของตัวอักษรในหัวบล็อค ส่วนนี้จะเป็นชื่อบล็อคคับเช่นชื่อ One Man's Dream
font-size:24px;
> ขนาดของตัว