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
จนสามารถช่วยเหลือคนอื่นๆได้



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


 
 
- รัก สวัสดี -

 

 

 
 
 
 
 
 
 

Comment

Comment:

Tweet

   thanks  mak ka

#110 By geegiee on 2013-08-05 16:43

Hot! Hot! Hot!  ขอบคุณมากๆค่า

#109 By Lycoris on 2013-07-21 02:55

Hot! Hot! Hot! Hot!   ขอบคุณค่ะเป็นประโยชน์ต่อการใช้สอยมาก

#108 By Mother tea on 2013-03-08 21:25

Hot! Hot! Hot! Hot!   ขอบคุณค่ะเป็นประโยชน์ต่อการใช้สอยมาก

#107 By Mother tea on 2013-03-08 21:25

#106 By Namalilly on 2013-03-05 20:44

สุดยอดเลยค่ะ ชาบู ชาบู T[]T
พออ่านแล้วเกิดความรู้สึกว่าการแต่งบล็อคมันง่ายขึ้นพิกลๆ
Hot! Hot! Hot! Hot!
#แต่ในความเป็นจริง มันยังยากเหมือนเดิม(?)

#105 By Akanso on 2012-11-12 21:47

ขอบคุณสหรับคำแนะนำค่า><
Hot! Hot! Hot!

#104 By หมีลี่ on 2012-11-07 17:40

ขอบคุณค่ะ

#103 By Ami's on 2012-08-27 21:49

ขอบคุณสำหรับคำแนะนำดีๆค่ะ surprised smile

#102 By Musaki on 2012-05-02 11:15

ทีวีถ้าว่างจริงเมื่อไหร่จะได้ลองเปลี่ยนthemeได้ถนัดๆซักที!ขอบคุณสำหรับคำเเนะนำนะคะ~ Hot! Hot! Hot!

ปล.themeคุณสวยดีเน่อ~

#101 By tomachi on 2012-03-21 16:16

เราเป็นคอมเม้นต์ที่100พอดีเลย เย้ๆ//โดนเตะ
ขอบคุณที่เอาความรู้ดีๆมาให้อ่านกันนะคะbig smile Hot! Hot!

#100 By iWater on 2012-02-05 20:34

เยี่ยมมากคะ เข้าใจง่ายมากมาย

#99 By MMyPhlox on 2012-02-04 01:31

Hot! Hot! thanks a lot
Hot! Hot! Hot! Hot!
มีประโยชน์มากครับ

#97 By badcompzero on 2011-12-11 13:09

Hot! Hot! Hot! Hot!
ขอบคุณมากๆนะคะ บล็อกคุณสวยมากๆ
Hot! Hot! Hot! Hot!

#96 By Moohun Design on 2011-10-12 20:05

ช่วยได้เยอะเลย ขอบคุนค่า Hot!

#95 By HITOMI ☀ on 2011-10-06 17:29

ยอมดมากๆเลยค่ะ กระจ่าง เข้าใจง่าย ละเอียดมากๆ > ___ < ชอบมากๆเลยค่ะ ปรับแต่งของตัวเองจนจะเสร็จแล้ว ขอบคุณมากๆเลยค่ะHot! Hot! Hot! Hot! Hot! Hot! Hot!

#94 By M_Black on 2011-07-30 22:22

ขอบคุณจริงๆนะคะHot!

#93 By Indy Condition on 2011-06-27 10:54

ขอบคุณมั่กๆๆค่า

ตอนนี้แต่งบล๊อกตัวเองได้แล้วว ^^
Hot! Hot! Hot! Hot!

#92 By SKULLZ ' WARRIOR on 2011-05-28 11:21

ขอบคุณมากๆๆๆ มีประโยชน์สุดๆ
แถมบล๊อกยังเท่โฮกอีกต่างหาก สุดยอด
Hot! Hot! Hot!

#91 By lotto on 2011-01-04 03:37

ขอบคุณมากเลยครับbig smile

#90 By ไม่พบข้อมูล on 2010-11-27 19:20

พี่คะ? หนูทำเสร็จแล้วเซฟแล้วแต่
ทำไมธีมมันถึงไม่ขึ้น
ต้องทำยังไงอ่ะคะ TT

#79 By 2PiM on 2010-10-07 10:39

Hot! thanks so much for your explanation ka! it really is useful!

#73 By 프레리 (manaanya) on 2010-05-06 14:28

ขอบคุณมากๆค่ะ กำลังงงอยู่พอดีเลย

#72 By ★minmincat★ on 2010-04-16 21:56

ละเอียดมาก

ขอบคุณหลายๆ

ไปอ่านให้ตาลายก่อน

Hot! Hot! Hot! Hot! Hot!

#71 By L u v - I U on 2010-03-22 19:48

ขอบคุณมากมายค่ะ

#70 By urban-story on 2010-02-02 19:18

ขอบคุณมากเลยค่ะbig smile

#69 By karnalone on 2010-01-18 23:33

อธิบายละเอียดมากๆ ช่วยได้เยอะเลยค่ะ ขอบคุณมากนะคะ

#68 By zestzero on 2009-09-30 06:33

ขอบคุณมากๆค่าาา
กำลังอยากทำอยู่พอดี
ได้ความรู้เพิ่มขึ้นอีก 5ล้านเท่า
(เหราะแต่ก่อนไม่เคยมี)
Hot! Hot! Hot!

#67 By BlueBell MooN ]~* on 2009-08-17 09:43

โห!!

ขอบคุณค่ะ

เด๋วจะกลับไปศึกษาต่อที่บ้านนะค่ะ

ตอนนี้อยู่โรงเรียน
แอบอาจารายเล่นอิๆ

เด๋วไม่เข้าใจ

ขอปรึกษาด้วยนะค่ะ

#66 By KajuiKajai" on 2009-08-17 08:55

ขบอคุนค่า big smile Hot!

#65 By ♣ a м ρ н ε on 2009-08-11 03:08

Hot! Hot! Hot! Hot!

สุดยอดมากพระเจ้า ขอบคุณค่าาาาาcry cry cry

#64 By I' am { YuriGirl } on 2009-08-08 21:58

จอมพลังมาก แม่นาง Hot!

#63 By DO! on 2009-07-27 22:47

Hot! Hot! Hot! Hot! Hot! แจ่ม
อธิบายขั้นเมพครับHot! Hot! Hot! ขอบคุณครับ

#61 By V.E.R.Y.W.E.R on 2009-07-27 12:52

ว้าว ทำไม่เป็นเหมือนกันพวกโคดเนี่ย โง่คอมมากมาย

พี่จบโทเดคเมื่อ.....เอ่อ มันนานแล้วน่ะช่างมันเถอะลืมปีไปแล้ว ฮ่าๆ

เอาเป็นว่าพี่เป็นพวกปอโทรุ่นแรกๆที่มาทำงานฝั่งนี้อ่ะ

ไว้วันหลังคึกๆจะบันทึกผีสนามจันทร์ให้อ่านกันซักตั้ง

#60 By k_i on 2009-07-27 08:09

ขอบคุณมาก ๆ นะจ๊ะ

#59 By in-we on 2009-07-27 04:42

Hot! Hot!

#58 By HineyHelsinki on 2009-07-27 01:29

ขอบคุณมากค่ะ จะพยายามทำให้ได้ *-*

#57 By blackwild on 2009-07-26 22:28

Hot!

#56 By ฟ้าใส on 2009-07-26 17:03

อาา ขอบคุณมากๆเลยนะคะ

ช่วยได้เยอะมากๆเลย :D
ละเอียดมากๆ Hot!

#55 By {mellow !.} on 2009-07-26 14:44

Hot! Hot! Hot! Hot! Hot!

ขอบคุณมากกกค่ะ ตอนนี้กำลังงงๆอยู่เลย

ขอบคุณนะคะ

#54 By khem on 2009-07-26 14:41

แหม ละเอียดโคตรๆเลยครับท่าน http://www.kingrpg.net

#53 By KINGRPG on 2009-07-26 13:13

ขอบคุณมากค่า big smile Hot!

#52 By ThatPinkHydrangea on 2009-07-26 11:25

โอโห อะไรเข้าสิง ถ้ามีปัญหา CSS กรุณาอ้างอิงจากที่นี่ครับ http://www.w3schools.com/css/default.asp

ชื่นชมมาก ขยัน + อึดสุดยอดsad smile Hot! Hot!

#50 By สปายชาเขียว on 2009-07-26 03:49

ขอบคุณมากๆๆเลยน้า

บล็อคเราสวยขึ้นเยอะเลย ><

#49 By ChoCoLateCake on 2009-07-26 00:38

ขอบคุณมากๆเลยครับ เป็นประโยชน์มากๆเลยครับ
ผมเป็นอีกหนึ่งคนที่ งม กับการทำ CSS มาก ๆ
big smile confused smile Hot! Hot! Hot!

#48 By j-di on 2009-07-26 00:23

ภาพพื้นหลัง ไม่ว่าจะใหญ่แค่ไหน ก็ไม่ยอมเต็มจอล่ะค่ะ
ใส่ no repeat ไปแล้ว ก็กลายเป็นรูปเล็ก อยู่แค่มุมจออยู่ดี

Hot! Hot! Hot! Hot! Hot!

#47 By gift-give-gift on 2009-07-25 23:44

ว๊ากกกกกกกกกกกกกกกกกกกกกกก

โค้ ซีเอสเอส TT______________TT

ในที่สุดก็มีคนสอนแล้ว TT^TT *กอดแน่น*


ขอบคุณหนาง๊าบบบบบบบบบบบบบบบ~!!

มีประโยชน์มากมายเลยพี่ติ๊ก!


Hot! Hot! Hot! Hot!


โฮะๆๆๆ เพื่อพี่สาว เราต้องยก Hot ให้

กรั่กๆๆๆๆๆๆ sad smile




ขอบคุณสำหรับกำลังใจหนาคะ TT^TT

รักมากมายยยยยยยยยย *พุ่งใส่*

55555+ พี่ติ๊กคงถีบกระเด็น - -"


บางทีมันเครียดๆ ไม่รู้จะระบายที่ไหน

นุ่นคงต้องสาดใส่กับบล๊อคเต็มที่

แหะๆ เลยพลอยทำให้คนอื่นเค้า

เครียดไปด้วยเลยแฮะ =__________=''




ขอบคุณอีกครั้งหนาค๊าาาาา ม๊วฟฟฟฟฟ

ฝันดีจ้า*

#46 By Nisa ,, on 2009-07-25 22:35