HOW TO CSS ฉบับเบเบแต่ยิบๆ

posted on 24 Jul 2009 16:04 by myagd-vip  in ARTICLE
 
แค่อยากแนะนำให้คนที่ยังไม่รู้
จะพยายามเขียนให้เข้าใจง่ายที่สุด

 

    เป็นการทำบลอกด้วย CSS ฉบับเบสิค ง่ายๆ ไม่ได้มีอะไรแปลกๆให้ปวดตับ เนื่องจากมีคนมาขอคำแนะนำ อันตัวเราไม่ได้เชียวชาญ CSS แต่อย่างใด แค่พอดู Code ออกเล็กน้อย เพราะมีประสบการณ์ดู Code ต่างๆมาตั้งแต่แต่งไดอารี่ที่ Storythai ทำ Hi5 ให้แปลกกว่าชาวบ้าน และมี Webboard อยู่ 1 อัน

    ที่เขียนทั้งหมดนี่ห้ามนำไปแสดงที่อื่น โดยไม่ได้รับอนุญาต ใครอ้างอิงโดยไม่มีเครดิต มันคนนั้น ต้องตายยยย หึหึ (เค้าเหนื่อยยนะ กว่าจะอธิบายจบ -*-) 

เริ่มเลยดีกว่า

ก่อนอื่นสิ่งที่ต้องระลึกถึงอยู่เสมอ

  1. สำหรับมือใหม่ ต้องอดทน ใจเย็น ค่อยเป็นค่อยไปทีละส่วนอย่าข้ามขั้น แก้ไขแล้ว Refresh ดูไปทีละอัน
  2. เมื่อมั่นใจแล้ว อยาก Save กรุณาก็อปโค้ดส่วนนั้นไว้ด้วย อาจจะใส่ใน Notepad ป้องกันเนทเสื่อมกระทันหัน อัพไม่ขึ้น จะได้มีที่ทำแล้วเก็บไว้ ไม่ต้องมานั่งจิตหลุดกันอีกหลายวัน -*-)
  3. คน Theme สวยไม่ได้เก่ง CSS เสมอไป แต่รู้จักปรับใช้กับรูปภาพค่ะ หรือใช้ภาพและการจับคู่สีเป็นจุดดึงดูดแทนการทำ Theme แปลกๆ ซึ่งทำให้มันดูมีอะไรนอกเหนือจากการทำแบบธรรมดา ^^) เพราะฉะนั้นอย่าคิดมากว่าไม่เก่ง CSS แล้วทำไม่ได้
  4. ถ้า Theme เน่า ให้ลบ Theme นั้นออก แล้วเลือก Theme ใหม่ ไม่ใช่สร้างบลอกใหม่ เปลืองพื้นที่ Exteen ค่ะ เห็นใจผู้ใหญ่บ้านแชมป์หน่อยนะ

เลือกส่วนที่จะแสดงก่อนทำ Theme

  1. ถ้าไม่ต้องการให้หน้าบลอกแสดงเอนทรี่ 3 อัน ตามที่ถูกกำหนดไว้ ให้ไปที่ Setting > Number of entries showed เลือกตัวเลข (มี 1-10) แล้ว Save
  2. เลือกหรือกำหนดให้ Sidebars (แถบที่แสดงพวก Links, Fav) แสดงหัวข้ออะไรบ้างไปที่ Theme > Widgets เมื่อเข้ามา ตรง Sidebar#1 จะเห็นหัวข้อต่างๆเรียงกัน ถ้าไม่ต้องการอะไรให้ติ๊กวงกลมสีแดงมันจะหายไปอยู่ใน Available Widgets ถ้าจะสับเปลี่ยนตำแหน่งบนล่าง คลิกค้างที่หัวข้อนั้นแล้วเอาเมาส์ลากได้ตามต้องการเลยค่ะ

เพิ่มเติมเกี่ยวกับการใช้ Custom code ใน Widgets
จะนำ Code ไปใช้ต้องเอาตัวออกก่อนนะ และ สีเขียวคือส่วนที่ต้องแก้ไข

  1. Custom code มีไว้สำหรับคนอยากวางรูปตกแต่งเล็กๆ เขียนข้อความ หรือ วางเพลง หรือ อื่นๆ จะแสดงอยู่ในส่วนของ Sidebars หรือ Top menu ซึ่ง Code ต่างๆที่จำเป็นจะมีดังนี้

    ๐ ใส่รูป <img src="ยูอารแอลรูป"</a>

    ใส่ข้อความ <font color="#รหัสสี" face="รูปแบบฟอนต์" size="ขนาดตัวอักษร">ข้อความ</font> เช่น <font color="#ff0000" face="verdana" size="3">ข้อความ</font>
    เพิ่มเติมการใส่ข้อความ
    * ถ้าจะทำตัวอักษรหนา ใช้    <b>ข้อความ</b> เช่น <font color="#ff0000" face="verdana" size="3"><b>ข้อความ</b></font>
    * ถ้าจะทำตัวอีกษรเอียง ใช้    <em>ข้อความ</em> เช่น <font color="#ff0000" face="verdana" size="3"><em>ข้อความ</em></font>
    * ถ้าจะให้หนา+เอียง ใช้ <b><em>ข้อความ</em></b>

    การทำให้ข้อความหรือรูปอยู่ตรงกลาง ใช้ <center>ส่วนของ Code ทั้งหมด</center> เช่น <center><font color="#ff0000" face="verdana" size="3"><b>ข้อความ</b></center>

    การทำ Links รูปภาพ <a href=ลิงค์ที่จะไป><img src=ยูอารแอลรูป border=0></a>

    การทำ Links ข้อความ <a href="ลิงค์ที่จะไป">ข้อความ</a>

    การเว้นวรรคบรรทัด ใส่ <br>

  2. Custom code ไม่รองรับภาษาอื่นนอกจาก ภาษาไทย และ อังกฤษ ไม่รองรับตัวอักขระพิเศษ พวก รูปดาว รูปหัวใจ อะไรแบบนั้น ถ้าใส่ภาษาแปลกๆมา Code ที่ใส่ไว้ทั้งหมดใน Custom code จะหายไป  อย่าลองดีนะจ๊ะ ฮ่าๆ

 
หน้าตาหลักๆของ Exteen ดูประกอบการอธิบาย Code CSS จะได้ง่ายขึ้น

 

อธิบายก่อน Theme ที่ Exteen มีให้ 3 แบบ คือ Apollo, Dark Apollo, Simple แล้วมันต่างกันยังไง ?     

     ตามความเข้าใจของเรา Apollo, Dark Apollo  ต่างกันที่สี และ 2 ตัวนี้แตกต่างกับ Simple ตรงที่ Apollo, Dark Apollo ใช้ภาพแทนการใส่สีและใส่ Text ก็แล้วแต่คนจะเลือกนะคะ แต่เราเอา Simple มาเป็นตัวอย่างนะ

 

SIMPLE THEME : Code ที่จะเห็นเมื่อเลือก Theme นี้
สีเขียว คือ ส่วนที่จะแก้ไข  สีม่วง คือ คำอธิบาย เลื่อน scrollbar ในเอนทรี่เพื่อดู Code  เรื่อยๆ


/* General */

 

body { คือส่วนทั้งหมด ภาพรวมของบลอกเรา

background:#รหัสสีพื้นหลังบลอก url(ยูอารแอลรูปพื้นหลัง) repeat top left; ตรงนี้รูปพื้นหลังจะแสดงซ้ำๆกันโดยเริ่มจากมุมซ้ายบน
(เพิ่มเติม ถ้าไม่ใส่รูปพื้นหลังหรือไม่ใส่สีพื้นหลังให้ใส่ None ลงไปแทนรหัสสีหรือยูอารเเอลรูป , ถ้าใช้รูปพื้นหลังรูปใหญ่และไม่ต้องการให้ภาพซ้ำ ใช้ no-repeat แทน repeat , ถ้าต้องการให้พื้นหลังอยู่กับที่ไม่เลื่อน ใส่ background-attachment: fixed; ลงไปเพิ่มเติม)

color:#รหัสสี; สีตัวอักษรโดยรวม
font:
ขนาดตัวอักษรpx ขนาดตัวอักษรโดยรวม  Tahoma, "MS Sans Serif"; ตรงนี้รูปแบบตัวอักษรที่อยากใช้
(เพิ่มเติม การใส่ขนาดตัวอักษรที่เป็นมาตราฐานคือ 12 , ควรใช้รูปแบบตัวอักษรที่มีกันทุกเครื่อง เช่น Tahoma, Verdana, Geogia, Arial, MS Sans Serif)

line-height:1.5em;
text-align:center;

}

a:link, a:visited{ คือการแสดงสีของลิงค์โดยรวมที่มีในบลอก

color:#รหัสสี;
text-decoration:
none; ลิงค์มีเส้นใต้ ถ้าจะให้มีเส้นใต้ ใส่ inline แทนที่ none

}

a:hover, a:active{ คือการแสดงของลิงค์เวลาเอาเมาส์ไปโดน

color:#รหัสสี;

}

#page{ ส่วนทั้งหมดที่อยู่ในกรอบสีเหลือง

margin:auto;
padding-top:
15px; ระยะห่างของเพจกับแถบบาร์สีเทาของexteen ถ้าจะให้ติดขอบแถบเทาใส่ 0 หรือเว้นไว้ไม่ต้องใส่นะ ใส่แล้วลองรีเฟรชดูว่าถูกใจยัง
text-align:left;
width:
780px; ขนาดของเพจ แก้ไขแล้วรีเฟรชดู อยากได้กว้างๆก็เพิ่มเอา
(เพิ่มเติม อยากให้บลอกชิดซ้าย ใส่ float:left; ลงไปเพิ่ม อยากให้ชิดขวาใส่ float:right; ถ้าบลอกชิดซ้ายจนติดเกินขอบจอเกินไป ให้ใส่ padding-left:กำหนดระยะห่างด้วยตัวเลขpx; ถ้าชิดขวาใส่ padding-right:กำหนดระยะห่างด้วยตัวเลขpx; เช่น padding-left:15px;)

}

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

float:left;
width:
780px; ขนาดต้องเท่ากับขนาดเพจ

}

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

/* Header */

#header{ คือส่วนของเฮดบลอก

background:#รหัสสี; สีพื้นหลังของเฮดบลอก
padding:
20px 0px 0px 0px; ระยะห่างบนล่างซ้ายขวาของเฮดบลอก(ไม่ได้เรียงตามที่บอกนะ) ต้องลองปรับแล้วรีเฟรชดู
text-align:
center; ตำแหน่งของชื่อบลอก ถ้าจะซ้ายใส่ left ขวาใส่ right
position:relative;

}

#header h1 a{

color:#รหัสสี; สีของชื่อหัวบลอก
font-size:
ขนาดตัวอักษรpx; ขนาดของชื่อหัวบลอก
(เพิ่มเติม อยากให้ตัวอักษรเป็นตัวใหญ่ทั้งหมดใส่ text-transform: uppercase; หรืออยากให้ตัวอักษรเป็นตัวหนาใส่ font-weight:bold;)

}

#header h1 a:hover{

color:#รหัสสี; สีเมื่อเอาเมาส์ไปโดนชื่อหัวบลอก

}

#header h2{

font-size:ขนาดตัวอักษรpx; ขนาดตัวอักษรของคำอธิบายชื่อบลอก
margin:
5px 0px 5px 0px; ระยะห่างบนล่างซ้ายขวาของคำอธิบาย(ไม่ได้เรียงตามที่บอกนะ) ต้องลองปรับแล้วรีเฟรชดู
(เพิ่มเติม อยากเปลี่ยนสีเอา color:#รหัสสี; มาใส่ อยากให้ตัวอักษรเป็นตัวใหญ่ทั้งหมดใส่ text-transform: uppercase; หรืออยากให้ตัวอักษรเป็นตัวหนาใส่ font-weight:bold; เพิ่ม)

}

#coverimage{

background:url(ยูอารแอลรูปเฮดบลอก) no-repeat;
height:
กว้างpx; ขนาดของรูปเฮดบลอก
width:
ยาวpx; ขนาดของรูปเฮดบลอก
margin-left:25px !important;
margin-left:0px; /*Fix IE Bug*/

}

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

/* Neck Menu */

#neck{ ส่วนที่มีคำว่า home

background:#รหัสสี; สีส่วนซ้ายขวา เลื่อนไปดูภาพประกอบนะ neck มันแยกเป็น 3 ส่วนดังภาพ
(
เพิ่มเติม ถ้าไม่อยากให้หน้าบลอกแสดงส่วนนี้ ใส่ display:none; หรือไปเอาส่วน Page ออกในหน้า Widgets ก็ได้ )

}

#neck .module{

background:#รหัสสี; สีส่วนกลาง เลื่อนไปดูภาพประกอบ
display:inline;
float:left;
margin:
0px 0px 0px 25px; ระยะห่างบนล่างซ้ายขวาของคำอธิบาย(ไม่ได้เรียงตามที่บอกนะ) ต้องลองปรับแล้วรีเฟรชดู
padding:
2px 0px 5px 0px; ระยะห่างบนล่างซ้ายขวาของคำอธิบาย(ไม่ได้เรียงตามที่บอกนะ) ต้องลองปรับแล้วรีเฟรชดู
width:
730px; ขนาดของเนค แก้ไขแล้วรีเฟรชดู ให้พอดีกับส่วนเพจที่ทำไว้

}

#neck .module ul{

display:inline;
margin:0px;
padding:0px;

}

#neck .module h2{

display:none;

}

#neck .module li{

border-right:1px ขนาดของเส้น1-3กำลังดี solid ลักษณะของเส้น #รหัสสี; สีของเส้น อันนี้คือเส้นคั่นตรงเนค เช่น เราสร้างเพจอื่นขึ้นมาจะมีเส้นคั่นระหว่างหัวข้อ แบบนี้ Home l About
display:inline;
padding:0px
10px 0px 10px; ระยะห่างหน้าหลังของหัวข้อจากเส้นคั่น เช่น Home<--l-->About<--l--> ที่ตั้งไว้ 10 นี่ดีแล้วนะไม่ต้องแก้หรอก
(เพิ่มเติม ลักษณะของเส้นแบบมาตราฐานมี 3 แบบคือ solid = เส้นตรง , dotted = แบบจุด , dashed = เส้นปะ แก้ไขตามใจชอบ)

}

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

/* Content */

#belly{ ส่วนเนื้อหา

background:#รหัสสี; สีของพื้นหลัง ดูจากภาพก็บริเวณที่เป็นสีดำ

}

#content{

display:inline;
float:left;
margin:
10px 15px 0px 25px; ระยะห่างบนล่างซ้ายขวาของส่วนเนื้อหา(ไม่ได้เรียงตามที่บอกนะ) ต้องลองปรับแล้วรีเฟรชดู
width:
490px; ความกว้างของส่วนที่เขียนเนื้อหา ปรับแล้วรีเฟรชดูว่าเป็นยังไง
(อดทนไว้ ใกล้เสร็จแล้ว -..-)

/*Fix too large image makes content drop problem in IE*/

overflow:visible !important;
overflow:hidden;

}

.entry{

float:left;
margin-bottom:
15px; ระยะห่างของ previous/next กับเส้นที่อยู่ใต้จำนวนคอมเมนท์
border-bottom:
1px ขนาดของเส้น1-3กำลังดี solid ลักษณะของเส้น #รหัสสี; แก้ไขลักษณะเส้นนั้น
(เพิ่มเติม ลักษณะของเส้นแบบมาตราฐานมี 3 แบบคือ solid = เส้นตรง , dotted = แบบจุด , dashed = เส้นปะ แก้ไขตามใจชอบ แต่ถ้าไม่อยากให้มีเส้น ใส่ none ลงไป แบบนี้ border-bottom:nonepx none #none; )

}

.entry .title{

display:block;
float:left;
margin-bottom:10px;
width:100%;

}

.entry .title h2{

font-size:ขนาดตัวอักษรpx; ขนาดตัวอักษรของชื่อเรื่อง
(เพิ่มเติม อยากให้ตัวอักษรเป็นตัวใหญ่ทั้งหมดใส่ text-transform: uppercase; หรืออยากให้ตัวอักษรเป็นตัวหนาใส่ font-weight:bold;)

}

.entry .title h2 a{

color:#รหัสสี; สีของชื่อเรื่อง

}

.entry .title h2 a:hover{

color:#รหัสสีสีเวลาโดนเมาส์ของชื่อเรื่อง

}

.entry .title span{

color:#รหัสสี; สีของส่วนที่เป็นข้อความบอกวันที่โพสใต้ชื่อเรื่อง
font-size:
ขนาดตัวอักษรpx;
(เพิ่มเติม อยากให้ตัวอักษรเป็นตัวใหญ่ทั้งหมดใส่ text-transform: uppercase; หรืออยากให้ตัวอักษรเป็นตัวหนาใส่ font-weight:bold;)

}

.entry .post{

float:left;

}

.entry .post p{

margin-bottom:10px;

}

.entry .info{

float:left;
width:100%;

}

.entry .info .tag{ ส่วนของ Tags

float:left; ตำแหน่งที่จะให้แสดง ถ้าอยากให้อยู่ขวาแก้เป็น right
font-size:
ขนาดตัวอักษรpx; 
width:
350px; ขอบเขตของการใส่ Tags ใส่เลขน้อยเกินไป เวลาใส่ Tags เยอะมันจะขึ้นบรรทัดใหม่ อาจจะแก้เป็นสัก 400-450 อย่าเกินนั้น
(เพิ่มเติม อยากให้ตัวอักษรเป็นตัวใหญ่ทั้งหมดใส่ text-transform: uppercase; หรืออยากให้ตัวอักษรเป็นตัวหนาใส่ font-weight:bold;)

}

.entry .info .coms{

float:right; ตำแหน่งของส่วนที่บอกจำนวนคอมเมนท์ อยากให้ไปซ้ายใส่ left ถ้าตรงกลางใส่ center แต่ right สวยกว่านะ ฮ่าๆ

}

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

/* Sidebars */

#sidebar, #sidebar2{ ส่วนที่เป็นสีน้ำตาล ที่มีพวก Links Fav Profile etc.

background:#รหัสสีสีของพื้นหลัง
display:inline;
float:
right; มันถูกกำหนดให้วางทางขวา ถ้าอยากให้อยู่ซ้ายก็เปลี่ยนเป็น left
margin:
5px 25px 0px 0px; ระยะห่างบนล่างซ้ายขวาของพื้นที่ส่วน Sidebars (ไม่ได้เรียงตามที่บอกนะ) ต้องลองปรับแล้วรีเฟรชดู
width:
225px; ความกว้างของ Sidebars
(เพิ่มเติม ถ้าอยากได้แค่เส้นกรอบก็เปลี่ยนสีพื้นหลังเป็น none แล้วใส่ border:ขนาดเส้นpx ลักษณะของเส้น #สีของเส้น; เช่น border:2px dotted #0053fb; หรือจะกำหนดเฉพาะด้าน ก็แก้แค่ตรง border โดยเพิ่มดังนี้ บน border-top , ล่าง border-bottom , ซ้าย border-left , ขวา border-right ส่วนลักษณะของเส้นแบบมาตราฐานมี 3 แบบคือ solid = เส้นตรง , dotted = แบบจุด , dashed = เส้นปะ )

}

#sidebar2{

display:none;

}

#sidebar .module, #sidebar2 .module{ ส่วนนี้มันจะย้ายทุกอย่างใน Sidebars ไปแบบยกแผง

margin:5px 6px 7px 8px; 5 คือระยะห่างของหัวข้ออันแรกกับขอบด้านบน 6 คือระยะห่างจากด้านซ้าย 7 คือระยะห่างของลิงค์อันสุดท้ายกับหัวข้อถัดไป 8 คือระยะห่างจากขอบด้านขวา ลองแก้แล้วรีเฟรชดูจะเข้าใจง่ายขึ้น

}

#sidebar .module ul, #sidebar2 .module ul{ ส่วนนี้จะย้ายเฉพาะลิงค์

margin:5px 0px 0px 10px; 5 คือระยะห่างของลิงค์กับชื่อหัวข้อ 10 คือระยะห่างของลิงค์จากขอบด้านซ้าย ลองแก้แล้วรีเฟรชดูจะเข้าใจง่ายขึ้น
padding:0;
list-style: none;

}

#sidebar .module h2, #sidebar2 .module h2{

border-bottom:1px ขนาดของเส้น1-3กำลังดี solid ลักษณะของเส้น #รหัสสี; แก้ไขลักษณะเส้นนั้น มันเป็นเส้นที่อยู่ข้างใต้หัวข้อต่างๆใน Sidebars จะเห็นแบบนี้ LINKS
font-size:
ขนาดตัวอักษรpx; ขนาดของตัวอักษรของหัวข้อต่างๆ
(เพิ่มเติม อยากเปลี่ยนสีเอา color:#รหัสสี; มาใส่ อยากให้ตัวอักษรเป็นตัวใหญ่ทั้งหมดใส่ text-transform: uppercase; หรืออยากให้ตัวอักษรเป็นตัวหนาใส่ font-weight:bold; เพิ่ม)

}

a.archive{

background:url(ยูอารแอลรูป) no-repeat;  รูปภาพที่อยู่ข้างๆลิงค์ใน Category ขนาดไม่ควรเกิน 15x15 pixel จะโอเค
width:
กว้างpx; ขนาดของรูป
height:
ยาวpx; ขนาดของรูป 
padding-left:
13px; ควรตั้งให้มากกว่าความกว้างของรูปทีใช้สัก1-2 เช่นรูปกว้าง 12 อาจจะตั้ง 13
margin-left:
4px; ระยะห่างของรูปจากลิงค์
(เพิ่มเติม ถ้าจะเอาออกให้เปลี่ยนสีเหลืองเป็น none ให้หมด)

}

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

/* Configure each module */

/* Profile */ 

ส่วนนี้ถ้าจะแก้เรื่อง View profile มันทับซ้อนกับรูปให้เข้าไปหาดูที่นี่นะ http://board.exteen.com/help ไม่ต้องตั้งกระทู้ใหม่นะ มันมีคนเคยถามเเล้วละ ลองหาดูค่ะ

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

/* Comment Form */  การทำตรงส่วนคอมเมนท์จะไม่สามารถรีเฟรชดูได้ต้องเซฟแล้วค่อยไปกด f5 ดู เพราะงั้นเก็บไว้ทำที่หลังก็ได้

#commentform{ ส่วนตรงที่เขียนคอมเมนท์ comment box
ส่วนนี้ถ้าอยากใส่ภาพในบอกซคอมเมนท์ไปหาที่ http://board.exteen.com/help ไม่ต้องตั้งกระทู้ใหม่นะ มันมีคนเคยถามเเล้วละ ลองหาดู

width:100%;
background:#
รหัสสี; สีพื้นหลัง comment box
float:left;
(เพิ่มเติม ถ้าจะใส่แค่เส้นขอบ หรือใส่เส้นขอบด้วย ก็ใส่ border:ขนาดเส้นpx ลักษณะของเส้น #สีของเส้น; เช่น border:2px dotted #0053fb; หรือจะกำหนดเฉพาะด้าน ก็แก้แค่ตรง border โดยเพิ่มดังนี้ บน border-top , ล่าง border-bottom , ซ้าย border-left , ขวา border-right ส่วนลักษณะของเส้นแบบมาตราฐานมี 3 แบบคือ solid = เส้นตรง , dotted = แบบจุด , dashed = เส้นปะ)

}

#commentform form{

margin:5px;

}

#commentform h3{

font-size:ขนาดตัวอักษรpx; ขนาดของตัวอักษรคำว่า Comment ที่อยู่บน Name ใน comment box
font-weight:bold; ตัวอักษร Comment มีความหนา ถ้าไม่ต้องการลบออกไปเลย
(เพิ่มเติม อยากเปลี่ยนสีเอา color:#รหัสสี; มาใส่ อยากให้ตัวอักษรเป็นตัวใหญ่ทั้งหมดใส่ text-transform: uppercase; เพิ่ม หรืออยากย้ายไปทางขวา ใส่ float:right; ลงไป)

}

#commentform .formrow{

border-top:1px ขนาดของเส้น1-3กำลังดี solid ลักษณะของเส้น #รหัสสี; แก้ไขลักษณะเส้นคั่นที่อยู่ในบอกซคอมเมนท์
padding:2px;
(เพิ่มเติม ลักษณะของเส้นแบบมาตราฐานมี 3 แบบคือ solid = เส้นตรง , dotted = แบบจุด , dashed = เส้นปะ แก้ไขตามใจชอบ)

}

#commentform label{

float:left;
width:150px;

}

#commentform input.textbox{

width:150px;

}

#commentform textarea{

width:310px;
height:150px;

}

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

/* Comment (Showing Area) */

.comment{

border-bottom:1px ขนาดของเส้น1-3กำลังดี solid ลักษณะของเส้น #รหัสสี; แก้ไขลักษณะเส้นคั่นแต่ละคอมเมนท์
float:left;
margin:5px 0px 5px 0px;
padding-bottom:5px;
width:100%;
(เพิ่มเติม ลักษณะของเส้นแบบมาตราฐานมี 3 แบบคือ solid = เส้นตรง , dotted = แบบจุด , dashed = เส้นปะ แก้ไขตามใจชอบ)

}

.comment .post{

float:right;
width:330px;

}

.comment .post p{

margin-bottom:10px;

}

.comment .info{

float:left; ถ้าจะย้ายไปขวาใส่ right แต่ต้องไปแก้ให้ float: ตรง .comment .post{ เป็นฝั่งตรงข้ามคือ left   ซึ่งมันจะสลับคอมเมนท์กับรายละเอียดคนที่มาเมนท์ 
font-size:
ขนาดตัวอักษรpx; ขนาดของตัวอักษรตรงรายละเอียดของคนที่มาคอมเมนท์เรา
width:150px;
margin-right:10px;

}

.comment .info img{

width:32px;

}

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

/* Leg Menu */ 
คอมเรามันไม่ขึ้นอะ ลองแล้วกับ firefox และ ie เพราะงั้นแก้สีแก้ขนาดแล้วลองรีเฟรชดูกันเองน่า -..-)/

#leg{

background:#รหัสสี;

}

#leg .module{

background:#รหัสสี;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:
730px;

}

#leg .module ul{

display:inline;
margin:0px;
padding:0px;

}

#leg .module h2{

font-size:ขนาดตัวอักษรpx;
font-weight:
bold;
display:inline;

}

#leg .module li{

border-right:1px ขนาดของเส้น1-3กำลังดี solid ลักษณะของเส้น #รหัสสี;
display:inline;
padding:0px 10px 0px 10px;
(เพิ่มเติม ลักษณะของเส้นแบบมาตราฐานมี 3 แบบคือ solid = เส้นตรง , dotted = แบบจุด , dashed = เส้นปะ แก้ไขตามใจชอบ)

}

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

/* Footer */   

#footer{ ส่วนที่มี Powered by exteen blog.....

background:#รหัสสี; พื้นหลังของfooter ลองใส่สี แล้วรีเฟรชดูจะรู้ว่าเป็นยังไง
height:
60px; แก้ความสูงตามใจชอบ

}

#footer p{

background:#รหัสสี; สีพื้นหลังของส่วนที่มี Powered by exteen blog..... ถ้ายังไม่แก้มันจะเป็นสีเทา
border-top:
1px ขนาดของเส้น1-3กำลังดี solid ลักษณะของเส้น #รหัสสี; ตรงนี้คือเส้นขอบบน
border-bottom:
1px ขนาดของเส้น1-3กำลังดี solid ลักษณะของเส้น #รหัสสี; ตรงนี้เส้นขอบล่าง
font-size:
ขนาดตัวอักษรpx; ขนาดของตัวอักษร Powered by exteen blog.....
text-align:center;
margin:5px 25px 0px 25px;
padding:5px;
(เพิ่มเติม ลักษณะของเส้นแบบมาตราฐานมี 3 แบบคือ solid = เส้นตรง , dotted = แบบจุด , dashed = เส้นปะ แก้ไขตามใจชอบ และถ้าไม่อยากให้แสดงส่วนนี้ก็ใส่ display:none; ลงไป)

}

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

 

เก็บตกก่อนจบ

  1. (เพิ่มเติม ถ้าจะใส่แค่เส้นขอบ หรือใส่เส้นขอบด้วย ก็ใส่ border:ขนาดเส้นpx ลักษณะของเส้น #สีของเส้น; เช่น border:2px dotted #0053fb; หรือจะกำหนดเฉพาะด้าน ก็แก้แค่ตรง border โดยเพิ่มดังนี้ บน border-top , ล่าง border-bottom , ซ้าย border-left , ขวา border-right ส่วนลักษณะของเส้นแบบมาตราฐานมี 3 แบบคือ solid = เส้นตรง , dotted = แบบจุด , dashed = เส้นปะ)  ส่วนนี้สามารถนำไปใช้ตกแต่งได้ทุกส่วน เช่น สร้างกรอบให้หน้าเพจ
  2. ส่วนของ /* Header */  ที่ใช้ข้างบนนั้น รูปเฮดกับชื่อเฮดจะอยู่แยกจากกัน ถ้าอยากให้ชื่อเฮดทับบนภาพเฮดไปเลยให้ใช้ Code แบบนี้
    /* Header */
    #header
    {
    background:url(
    ยูอารแอลรูป) top left no-repeat;
    height:
    ยาวpx; ขนาดของรูปเฮดบลอก
    width:
    กว้างpx; ขนาดของรูปเฮดบลอก
    padding:
    20px 0px 0px 0px; ระยะห่างบนล่างซ้ายขวาของเฮดบลอก(ไม่ได้เรียงตามที่บอกนะ) ต้องปรับแล้วรีเฟรชดู
    }

    #header h1 a
    {
    height:
    ยาวpx; ขนาดของรูปเฮดบลอก
    width:
    กว้างpx; ขนาดของรูปเฮดบลอก
    (เพิ่มเติม อยากให้ตัวอักษรเป็นตัวใหญ่ทั้งหมดใส่ text-transform: uppercase; หรืออยากให้ตัวอักษรเป็นตัวหนาใส่ font-weight:bold; เพิ่ม)

    }

    #header h1 a:hover
    {
    color:#
    รหัสสี; สีเมื่อเอาเมาส์ไปโดนชื่อหัวบลอก
    }

    #header h2{
    font-size:
    ขนาดตัวอักษรpx; ขนาดตัวอักษรของคำอธิบายชื่อบลอก
    margin:5px 0px 5px 0px ระยะห่างบนล่างซ้ายขวาของคำอธิบาย(ไม่ได้เรียงตามที่บอกนะ) ต้องลองปรับแล้วรีเฟรชดู
    (เพิ่มเติม อยากเปลี่ยนสีเอา color:#รหัสสี; มาใส่ อยากให้ตัวอักษรเป็นตัวใหญ่ทั้งหมดใส่ text-transform: uppercase; หรืออยากให้ตัวอักษรเป็นตัวหนาใส่ font-weight:bold; เพิ่ม)
    }

    #coverimage
    {
    ตรงนี้ก็อปไปวางแทนที่ให้หมด
    background:url(none) no-repeat;
    height:0px;
    width:0px;
    margin-bottom:0px;
    }

  3. อยากได้ลูกเล่นอื่นๆนอกเหนือจากที่บอกข้างบน เช่น การใส่รูปหน้าชื่อเรื่อง การใส่รูปหน้าลิงค์ตรง Sidebars การทำลิงค์แบบอื่น ฯ ก็เข้าไปดูได้ที่บลอกของ jennessa , bbears ค่ะ มีหลายสิ่ง
  4. http://board.exteen.com/help มีทุกสิ่งให้คุณเลือกสรร จะทำ Theme ใส หรือ ให้ทำบลอกเป็นกล่อง เข้าไปหาดูมีคนบอกไว้หมดเเล้ว
  5. Apollo, Dark Apollo ก็ทำภาพใส่แทนที่ของเดิมเอานะ นอกนั้นก็แก้เหมือนกัน
  6. อยากบอกว่า Code ที่เกี่ยวกับ Text (ตัวอักษร) มันโยกย้ายไปใช้ได้หมดทุกส่วนที่เกี่ยวกับตัวอักษรนะ
  7. นี่คือเว็ปตารางสี ถ้าไม่อยากเปิดโฟโต้ชอป มีรหัสเสร็จสรรพ http://sukumal.brinkster.net/
  8. ส่วนตรงนี้คือเว็ปเอาไว้ดูคู่สีแจ่มๆ ที่เคยลงไปเอนทรี่ก่อนโน้น http://www.colourlovers.com/


จบ

 

    โฮกกกกเสร็จแล้ววว กรี๊ดดดดด นั่งทำทั้งคืนจนเช้า ตาลาย @.@) จะอ้วกเป็น Code ไม่รู้มึนตรงไหนบ้าง มันยาวมวากกก หวังว่าจะเข้าใจง่าย รู้จัก Code กันมากขึ้น และช่วยอะไรได้บ้างในการทำ theme ด้วย CSS แบบเบเบ หุหุ จริงๆมันปรับแก้ไขได้เยอะมาก แต่เราต้องทำความเข้าใจ Code ในแต่ละอันก่อนว่ามันคืออะไร นั่นก็อาจจะยากขึ้นไปอีก เอาเป็นว่าแค่นี้พอเต๊อะ -..-)/ 

 

    อ่อ ลืมบอก การแสดง Code จะสมบูรณ์หรือไม่ ขึ้นอยู่กับโปรแกรมที่ใช้ดูเว็ปด้วยนะคะ

 

 

ขอบพระคุณท่านผู้รู้ทุกท่าน ที่ให้เราได้เรียนรู้เรื่อง Code
จนสามารถช่วยเหลือคนอื่นๆได้



มีปัญหาตรงไหนถามได้ ถ้ารู้ยินดีช่วยค่ะ


 
 
- รัก สวัสดี -