ก่งก๊งกับ CSS อยู่ 2 วัน

posted on 11 Oct 2007 14:00 by gin-no-ishi in Tips-Items

หลังจากที่ EXTEEN ปรับเปลี่ยนรูปโฉมใหม่ ให้ไฉไลยิ่งกว่าเดิม พร้อมทั้งฟีเจอร์ต่าง ๆ ที่มีประโยชน์สุด ๆ
เราก็ดำผุดดำว่าย และ ก่งก๊ง (ขอยืมคำนี้มาจาก คุณ Palermos นะคะ ก็มันฟังดูน่ารักอ่ะ) กับการตกแต่งโค้ดธีมใหม่ แบบไม่เป็นอันทำมาหากินซะงั้น
(แต่งธีมจนเพลิน บทสรุปที่ช้า ก็ยิ่งช้าขึ้นไปอีก ขอโทษค่า)

เอาล่ะ!! ด้วยความรู้ที่มีเท่าหางอึ่ง ก็สรุปได้ความประมาณนี้ค่ะ

ป.ล. ขออนุญาตเอามาแค่บางส่วน เท่าที่เราจมน้ำแล้วโผล่ขึ้นมาได้ (แต่ไปไม่ถึงฝั่ง) นะคะ

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

 


 

(1) บื้ออยู่นาน ว่าทำไมเส้นตารางไม่ยอมโผล่ออกมาให้เห็น ที่แท้ต้องใส่โค้ดในคำสั่งชุดแรกตรงหัวข้อ border แบบนี้ค่ะ

border: 1;

Tips=>>ถ้าใครมีตารางแสดงหน้าบล็อก ต้องเปลี่ยน 0 เป็น 1 (ขนาดของเส้นขอบ) ด้วยนะ ไม่งั้นจะมองไม่เห็นเส้นตารางจ้า

(2) ชุดคำสั่ง body ของธีม

background:#ffffff url(URL ของ Wallpaper ที่เราจะใส่ค่ะ) repeat-x bottom right fixed; Tips=>>สี BG ค่ะ แต่ถ้ามี Wallpaper สีส่วนนี้จะโดน Wallpaper ทับนะคะ - URL ของภาพค่ะ - คำสั่งที่จะให้ซ้ำภาพในแนวไหน (ถ้าไม่ใส่ x (แนวตั้ง) กับ y (แนวนอน) ก็เป็นคำสั่งซ้ำทั้ง 2 ด้าน แต่ถ้าไม่อยากให้ซ้ำ ก็ใส่ no-repeat ค่ะ) - ถ้าต้องการให้ BG ไม่เลื่อน ให้เติม fixed ต่อท้ายได้เลยค่ะ

color:#000000; Tips=>>สีตัวอักษร แนะนำว่าปรับให้เป็นสีดำไว้ก่อน เพราะตัวอักษรที่เราไม่ได้ตั้งสีเอาไว้ในหน้าเขียนเอ็นทรี่ จะแสดงด้วยสีนี้ค่ะ

(3) ก็ว่าทำไม เนื้อหาในเอ็นทรี่ถึงเข้ากั้นหน้าซ้ายไป เพราะมีคำสั่งนี้นี่เอง

.entry .post{
/*float:left;
}*/

Tips=>>ถ้าไม่อยากลบโค้ดออก ใช้ /**/ ครอบคำสั่งที่ต้องการปิด ตามตัวอย่างได้เลยค่ะ เผื่อภายภาคหน้าเปลี่ยนใจอยากให้มันกลับมา "ชิดซ้ายเลยเพ่" น่ะค่ะ

(4) ไม่ชอบรูปที่เป็นเหมือนกระดาษด้านข้าง หัวข้อของ Category ที่เอาไว้เข้าไปดู Link หัวข้อเอ็นทรี่ใน Cat นั้น ๆ

/*a.archive{
background:url(URL รูปเอกสารน่ะค่ะ) no-repeat;
width:12px;
height:12px;
padding-left:15px;
overflow:visible !important;
overflow:hidden;
margin-left:4px;
}*/

Tips=>>ถ้าไม่อยากลบโค้ดออก ใช้ /**/ ปิดตามตัวอย่างได้เช่นเดียวกัน หรือจะลบบรรทัด overflow:visible ออกก็ได้ค่ะ

(5) Side Bar Item (ก็ส่วนลิงก์ด้านข้างน่ะค่ะ) ทำไมหนอ มันชอบขึ้นมาเบียดส่วน Profile ให้ทำดังนี้ค่ะ

#profile{
width:170px;
height:170px;
}

Tips=>>ถ้าจะไม่ให้ส่วน Recommand หรือ Latest Comment ขึ้นมาเบียดรูปแสดงตัว เพราะแลดูไม่สวยงาม หลักการในการปรับแต่ง จะอยู่ตรงการตั้งค่าความสูง โดยต้องตั้งค่าความสูง เผื่อความสูงของรูปแสดงตัวและตัวอักษรที่จิ้มเข้าไปดูรายละเอียดของเจ้าของบล็อกด้วยนะคะ

(6) ตอนแรกนึกว่าใส่ภาพ BG ในส่วนพิมพ์ Comment ไม่ได้ ที่ไหนได้...

#commentform{
width:625px; Tips=>>ความกว้างของฟอร์มใส่คอมเมนท์ แนะนำว่าให้ใส่ค่ามากกว่าความกว้างของ Comment Wallpaper ที่นำมาใช้ แต่ต้องไม่เกินความกว้างของส่วนเนื้อหาด้านบน (เอ็นทรี่) นะคะ ไม่งั้นจะออกอาการโย้นะคะ
height:285px; Tips=>>ความสูงของฟอร์มใส่คอมเมนท์ แนะนำว่าให้ใส่มากกว่าความสูงของ Comment Wallpaper ที่นำมาใช้ค่ะ
/*background:none;*/ Tips=>>ถ้าไม่อยากให้มีสีด้านหลังก็ปิดอย่างนี้นะคะ หรือใส่โค้ด none อย่างเดียว ไม่ต้องใช้ /**/ ปิดก็ได้ค่ะ
float:right; padding:2px 2px 2px 2px;
color:#000000; Tips=>>สีตัวอักษรของฟอร์มใส่ Comment ค่ะ
margin:10px;
border:2px dotted #6495ED; Tips=>>เส้นขอบของฟอร์มใส่ Comment ที่ ถ้าไม่ต้องการให้เป็นกรอบสี่เหลี่ยมล้อมรอบ อยากใส่แค่ด้านใดด้านหนึ่ง ก็เติมพวก top, bottom, right, left หลัง border ได้ค่ะ (เช่น อยากมีเส้นแค่บนกับล่าง ก็จะเป็น border-top:2px dotted #6495ed; และอีกบรรทัด border-bottom;2px dotted #6495ed; ค่ะ)
font-family: "Verdana", Geneva;
font:12px;
background-image:url(URL ภาพที่จะใส่เป็น Wallpaper ของส่วน Comment ค่ะ);
background-position:center; Tips=>>0tวางตำแหน่งของ Comment Wallpaper จะชิดซ้าย (left) ชิดขวา (right) หรือตรงกลาง (center) ก็ตามสะดวกเลยค่ะ
background-repeat:no-repeat;
}

(7) ไม่ชอบเลยที่มีเส้นกั้นบรรทัดของฟอร์มใส่ Comment

#commentform .formrow{
border-top:0px dotted #6495ED;
padding:2px;
}

Tips=>>เปลี่ยนเป็นให้เป็น 0px ไปซะเลย เส้นแบ่งบรรทัดในฟอร์มใส่ Comment จะได้ไม่ต้องขึ้นมารบกวนสายตาค่ะ

(8) เกี่ยวกับส่วน Comment อีกนิด

อันนี้เป็นส่วนใส่ชื่อและเว็ปไซต์ของเพื่อน ๆ ที่มาโพสต์ (ในกรณีที่เพื่อนไม่ได้เป็นสมาชิก Exteen นะคะ)

commentform input.textbox{
width:200px;
}

และ

ช่องแสดงคอมเมนท์ที่กำลังพิมพ์อยู่

#commentform textarea{
filter: alpha(opacity=50); Tips=>>ในกรณีที่อยากให้แสดงส่วนนี้เป็นแบบโปร่งใส ให้ใส่คำสั่งนี้ค่ะ ยิ่งใส่ค่าน้อย ยิ่งใสมาก แต่จะแสดงผลเฉพาะ IE นะคะ Firefox มองไม่เห็นค่ะ
width:300px;
height:100px;
}

และ

ส่วนที่เพื่อน ๆ ที่แวะมาเยี่ยมโพสต์ทิ้งไว้ให้อ่านจ้า

.comment .post{
float:right; Tips=>>จะซ้ายหรือขวาก็ได้ค่ะ แต่ต้องอยู่ด้านตรงข้ามรายละเอียดของผู้ที่มาโพสต์นะคะ ไม่งั้นไม่สวยค่ะ
border-left:2px dotted #6495ED; Tips=>>ถ้าอยากให้มีเส้นกั้นระหว่างส่วนคอมเม้นท์ที่เพื่อน ๆ โพสต์ กับรายละเอียดของเพื่อน ๆ ที่มาโพสต์ ก็ใส่บรรทัดนี้เข้าไปได้เลยค่ะ
padding:2px 2px 2px 2px;
width:500px; Tips=>>ความกว้างของส่วนที่เพื่อน ๆ คอมเมนท์ทิ้งไว้ให้อ่านค่ะ
}

และ

รายละเอียดของเพื่อน ๆ ที่เข้ามาโพสต์ค่ะ

.comment .info{
float:left;
font-size:11px;
width:100px; Tips=>>ความกว้างอันนี้ กับความกว้างส่วนที่เพื่อน ๆ โพสต์ เมื่อรวมกันแล้ว อย่าให้เกินขนาดทั้งหมดของฟอร์มใส่ Comment นะคะ ไม่งั้นเกิดอาการโย้เช่นเดียวกัน อ้อ อย่าลืมเผื่อ ขนาดที่เราเว้นขอบ (padding) ไว้ด้วยนะคะ
padding:2px 2px 2px 2px;
/*margin-right:10px;*/
}

และ

ความกว้างของรูปประจำตัว ของเพื่อน ๆ ที่แวะมาโพสต์คอมเมนท์ค่ะ

.comment .info img{
width:32px;
}

ก็ประมาณนี้นะคะ จริง ๆ เราไม่ค่อยรู้เรื่องพวกนี้หรอกค่ะ
แต่อาศัยไปอ่าน ๆ ตามบล็อกของเพื่อน ๆ โดยเฉพาะของ คุณ เจนเนสซ่า น่ะค่ะ (เขาเก่งจริง ๆ นะ)
และก็ Search ส่วนเพิ่มต่าง ๆ จาก Google แล้วมามั่วเอาเองค่ะ

สุดท้ายนี้ ขอขอบคุณ คุณแชมป์ เว็ปมาสเตอร์คนเก่ง ที่ทำให้ชาว Exteen มีบล็อกสวย ๆ และทันสมัยใช้ด้วยนะคะ

 

Comment

Comment:

Tweet

cool

#103 By sthepakul on 2016-04-25 03:35

@gin-no-ishi ขอบคุณมากเลยนะคะ

#102 By CHICZZ on 2012-06-25 13:52

คุณ @numkhingzz 
หมายถึงเพิ่มจำนวน Link ในแต่ละหัวข้อที่อยู่ตรง Side Bar ใช่มั้ยคะ
ถ้าใช่..
ให้เข้าไปที่ manage > Theme > Widget > แล้วจิ้มไปตรงรูปดินสอ ของหัวข้อที่เราต้องการเพิ่มจำนวน Link ค่ะ
อย่างเช่นหัวข้อ Comments สามารถโชว์สูงสุดได้ 10 Linksurprised smile

#101 By sora no hime★空のひめ on 2012-06-25 13:49

อยากรู้วิธีที่ทำให้มี ลิ้งค์ ในสไลด์บาร์มากกว่านี้อะค่ะ พอจะรู้วิธีมั้ยคะ  Hot! Hot! Hot!

#100 By CHICZZ on 2012-06-19 12:42

ขอบคุณสำหรับข้อมูลดีๆนะคะ

#99 By ฺButterfly SumMer on 2012-03-24 12:25

iptoxbu

#98 By jffurim (91.232.96.4) on 2012-02-17 12:56

aqzeiuof

#97 By irrkmpi (94.100.25.50) on 2012-02-16 23:49

OK ต้องกลับไปทำดูบ้างแล้ว

#90 By ก. วันทะมาศ on 2011-05-30 00:22

บล็อกดูดี อะ *0*''

คืออ ตรงเนื้อหามันเปลี่ยน BG ยังไงหว่า ??


แล้ว วีดีโอนี่ เรากดตรง HTML แล้วใส่ <p>...</p>


ตามที่พอศึกษามา แล้วมัน ขึ้นเป็นกาบาทสีแดงมุมซ้ายอะ T^T''


*รบกวนช่วยตอบหน่อยค่ะถ้ามีเวลาว่าง -0- ''

confused smile confused smile

#89 By Muse '' on 2011-03-25 20:30

^^
ขอบคุณมากๆเลยครับ จะขอลองดู ^^

#88 By Estelle Bright on 2010-09-04 18:07

ขอบคุณที่เขียนบล็อกที่มีประโยชน์เช่นนี้มาให้ค่ะ =v=

#87 By matsuoaya on 2010-04-08 23:21

embarrassed

#86 By Untitled_666 on 2010-03-08 22:02

ขอบคุณนะคะ ช่วยได้เยอะเลยdouble wink

#85 By PaB Choc Bakery ~ on 2010-03-01 20:25

ขอบคุณค่ะ

#84 By Mool3ee on 2010-02-11 15:31

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

#82 By borisu on 2009-12-04 20:48

ขนาดไม่ค่อยเข้าใจ ยังงงๆ อยู่ 2 วัน
แล้วผมจะงงอยู่กี่เดือนเน๋อ?
ขอบคุณครับ เดี๋ยวแอบปีนเข้ามาใหม่
อย่าลืมเปิดหน้าต่างทิ้งไว้นะครับ

#81 By KNOWLEDGE OF MUSIC on 2009-11-09 02:27

Hot! มีประโยชน์มากมายเลยครับ
Hot!

#80 By Takzii-L.Clamp* on 2009-10-27 19:33

ว๊าว Thk มากคะ

#79 By ii-funnn on 2009-10-21 20:29

เข้าใจง่ายดีจัง สำหรับคนที่ไม่รู้จัก css เลยอย่างเรา

กำลังแต่งบล็อคอยู่ค่ะ เพิ่งจะหัดทำ

จะเอาไปลองหัดทำดูบ้างนะคะ

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

#78 By muxiangxiang on 2009-10-08 10:40

Hot! Hot! ขอบคุณมากเลยนะค้า เดี๋ยวมาดูสาระดีๆได้ที่นี่~!!!!http://kunnunutza.exteen.comconfused smile

#77 By kunnunutza on 2009-08-29 19:46

เข้ามาดูคำแนะนำคร้าบบบ

#76 By NuaM on 2009-08-04 17:21

TAT กล่องคอเม้น ลองลงโค้ดตามด้านบนแล้วอ่าฮับ

แต่ทำไมมานยังเหมือนเดิมไม่มีไรเปลียนเลยอ่า


T[]T อยากให้กล้องคอมเม้นมีรูปมากมาย

#75 By Moneki on 2009-07-30 17:19

แวะมาชม สวย งามดี จังเลยค่ะ ^^

#74 By googgai's on 2009-07-27 22:53

เย้ ! ทำได้แล้ว ขอบคุณ ครับ
งงจังแหะ.......sad smile
จาลองพยายามทำไปเรื่อยๆ ไม่เข้าใจตรงไหนจะมาถามเน้อ !!surprised smile

#72 By Nequioze on 2009-07-17 12:57

ขอบคุณมาก กำลังปวดเฮดเลยกับชิดซ้ายตลอดเนี่ย

#71 By Dr.Manaorana Fool on 2009-07-13 13:56

Hot! Hot! Hot! Hot! Hot! Y_Y งง มากๆๆๆๆเลย พอใส่แล้วก็ทำไม่ได้ภาพพื้นหลังตกส่วนที่ให้comment ก็ไม่ขึ้น อ่า...
sad smile

ปืนฉีดน้ำ ปืนฉีดน้ำ ปืนฉีดน้ำ ปืนฉีดน้ำ ปืนฉีดน้ำ ดอกมะลิ ดอกมะลิ ดอกมะลิ ดอกมะลิ ดอกมะลิ ขันน้ำ ขันน้ำ ขันน้ำ ขันน้ำ ขันน้ำ Hot! Hot! Hot! Hot! Hot!

#70 By mei on 2009-04-13 12:16

ช่วยหน่อยเราเปลี่ยนรูปโปรไฟล์ไม่ได้อ่ะค่ะ

บอกวิธีเปลี่ยนได้ไม๊

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

#69 By WE-R-SHOP on 2009-03-28 04:30

เอากล่องแชท และอะไรๆ มาไว้ตรงด้านซ้ายยังไงคะ
ด้านขวาก็ได้
thank you มากมายเลย แก้ css สำเร้จได้ก็คราวนี้แหละsurprised smile

#67 By cherried on 2009-03-20 22:06

ขอบตุณจริงๆนะคะ >///<

#66 By The-Maikung on 2009-03-19 21:55

แค่อ่านก็ก๊งซะแว้วววว question

#65 By vie-wi on 2009-01-18 01:42

ขอ บคุน มากคะ

#64 By G u i cl e * on 2009-01-06 19:59

ทำได้สวยมากเลยค่ะ
เด๋วขอยืมไปลองกะบลอคตัวเองมั้งน้า
ขอบคุณมากค่ะ cry
ขอบคุณมาก ๆ เลยคะสำหรับคำตอบ เพิ่งเห็นเหมือนกันว่ามี ems มา โก๊ะมาก ๆ เลย เลยลองกดเข้าไปดู เห็นคุณไปตอบไว้ ขอบคุณมาก ๆ เลยค่ะ

#62 By Crazyboysjr on 2008-11-27 18:58

^
^
ตอบไปทาง EMS แล้วนะคะconfused smile

#61 By sora no hime★空のひめ on 2008-11-27 16:26

ลองทำตามแล้ว เละไปหมดเลยค่ะ กู่ไม่กลับเลย อยากทำแบบเจ้าของบล๊อคค่ะ ที่ให้ส่วน content เป็นพื้นด้วยกับ BG ค่ะ ต้องเปลี่ยนตรงไหนค่ะ

#60 By Crazyboysjr on 2008-11-24 04:55

สั่ย โค๊ด วั้ย ตง ไหน อะ คะ


พึ่ง ทัม เรย มะ รุ อะ คะ

#59 By duaann. on 2008-11-14 21:44

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

เข้าไปเยี่ยมเราบ้างนะที่นี่นะ

http://laptopcomputer.exteen.com

#58 By Laptop Computer on 2008-11-10 23:46

โฮะๆๆ


ขอบคุณค่ะ


เพิ่งมาทำ


งงเลยทีเดียวbig smile

#57 By หกทับสี่ on 2008-11-02 18:18

เดี๋ยวลงงงมๆๆ ดูบ้างเเล้วกันนะคะ

แบบว่าความรู้เท่าหางอึ่งจริงๆ อิอิ

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

#56 By AmoKiHae~* on 2008-10-16 17:02

ขอบคุณค่ะสำหรับความรู้ดีๆๆ

#55 By CoolwAr on 2008-09-17 02:27

เข้ามาหาความรู้ทำบล๊อค ได้ประโยชน์มากๆเลยค่ะ ขอบคุณนะคะ

#54 By pika on 2008-09-08 19:17

ช่วยได้เยอะเลยค่ะ จริงๆ ช่วยได้มากอย่างดี เพราะเราก็ก๊งก่งอยู่นานแล้วเหมือนกัน

#53 By NiDA MAilO on 2008-07-31 19:41

ขอบคุณมากครับได้ความรู้ มากขึ้นเยอะเหอะๆ

#52 By Sketch J.O.B on 2008-06-27 09:28

^
ตอบไปทาง EMS แล้ว ลองเช็คดูนะคะ ได้ไม่ได้ยังไง โพสมาอีกทีได้เลยค่ะsurprised smile

#51 By sora no hime★空のひめ on 2008-06-25 15:24

Header picture
เอารูปลงแล้วทำไมมันไม่มีเลยคะ

#50 By pupink on 2008-06-24 23:54

อยากได้บลอกใสแบบนี้ต้องทำไงอ่ะคะ

#49 By yuyuhaku on 2008-05-28 13:38

ขอบคุณคร่า เดี่ยลองปรับๆดู ><

#48 By T I2 i p L € G i I2 L on 2008-05-01 21:50

ขอบคุณค่ะ สำหรับคำแนะนำ เรานั่งงมอ่านอยู่นานเพราะงงๆ-- ---"
เวลาตัวหนังสือเยอะๆจะอ่านไม่ค่อยรู้เรื่อง แต่นั่งทำเข้าใจก็แก้ไขบล็อกได้แล้วค่ะ ขอบคุณจริงๆ

#47 By hephaestion on 2008-05-01 21:31

sora no hime★空のひめ View my profile