Zone-IT โซนไอที : สังคมดีๆบนโลกออนไลน์

General Zone ! => ZoneFriend Fanclub => ข้อความที่เริ่มโดย: Mekz.net ที่ 3 พฤษภาคม พ.ศ. 2551, 16:28:12



หัวข้อ: [มาแต่ง ZFriend กัน] ตอน: เปลี่ยน Background กันดีกว่า
เริ่มหัวข้อโดย: Mekz.net ที่ 3 พฤษภาคม พ.ศ. 2551, 16:28:12

(http://www.zone-it.com/pic/logo/zfriendlogo.png)

แหม่ๆๆๆๆ เกิดอาการคันไม้คันมือมาซะงั้น วันนี้ผมขอ รับหน้าที่สอนเรื่องการแต่ง ZFriend ของเล่นสุดฮิตที่สุด (พูดจริงๆนะ ไม่ได้พูดยกยอเอา) ของชาว Zone-it นะครับ วันนี้จะมาแนะนำการทำ Background ให้กับ ZFriend ของเรากันเลยนะครับ ไม่รอช้า เริ่มทำกันเลยครับ.........  ;)

1.ก่อนอื่นต้องล็อกอิน และ เปิด ZFriend ของเราขึ้นมาก่อนเลย

2.คลิกที่ คำว่า แก้ไข ที่อยู่มุมล่างขวาสุด ของโมดูล เกี่ยวกับฉัน

(http://img237.imageshack.us/img237/1959/k0a7vhfc82dfog7.jpg)

3.จากนั้นจะมีกล่องเปล่าๆ ให้แก้ไข CSS ขึ้นมาละ

(http://img378.imageshack.us/img378/4755/k0a7x1fad129xe3.jpg)

4.จากนั้นถ้าเราต้องการใส่ CSS ต้องแทรกโค้ด
โค๊ด:
<style>.............</style>

5.เราจะมาใส่โค้ด CSS ที่จะเปลี่ยน background กัน โดยโค้ดนี้


โค๊ด:
html body {background: #fff;}
...... เปลี่ยนสีพื้นหลัง

โค๊ด:
html body {background: #fff url(URL ของรูปภาพ) repeat-x top left;}
....สำหรับใส่ Background แบบรูปภาพ


***โดยที่ repeat-x เปลี่ยนเป็นค่าอื่น ได้ดังนี้
repeat-x เรียงภาพซ้ำๆในแนวตั้ง
repeat-y เรียงภาพซ้ำๆในแนวนอน
repeat เรียงภาพซ้ำๆแบบทุกทิศทุกทาง
no-repeat ไม่ต้องทำการเรียงภาพซ้ำๆ

***ส่วน top เปลี่ยนเป็นค่าอื่น ได้ดังนี้
top ให้รูปภาพอยู่บนสุด
middle ให้รูปภาพอยู่ตรงกลาง
bottom ให้รูปภาพอยู่ข้างล่างสุด

***ส่วน left เปลี่ยนเป็นค่าอื่น ได้ดังนี้
left ให้รูปภาพอยู่ด้านซ้าย
center ให้รูปภาพอยู่กลาง
right ให้รูปภาพอยู้ด้านขวา


6. โค้ดสำหรับที่จะใส่ไปก็ต้องใส่แบบนี้....................... อันนี้เป็นตัวอย่างนะครับ

โค๊ด:
<style>

html body {background: #fff url(URL ของรูปภาพ) repeat-x top left;}

</style>

7. จากนั้นทำการคลิกปุ่ม แก้ไข เพื่อเวฟค่าต่างๆให้เรียบร้อย

8. ถ้าเราไม่ได้ใส่โค้ดผิดพลาดอะไร เราก็ได้เห็น Background สวยๆใน Zfriend ของเราแล้วละครับ




ขอบคุณกันสักนิด แทนน้ำใจดีๆที่มอบให้กันนะครับ

ปล. มีข้อสงสัยสอบถามกันได้นะครับผม


หัวข้อ: Re: [มาแต่ง ZFriend กัน] ตอน: เปลี่ยน Background กันดีกว่า
เริ่มหัวข้อโดย: กะโห้น้อย ที่ 3 พฤษภาคม พ.ศ. 2551, 21:51:46
ปลุกกระแสครับ สอนเบื้องต้นเลย หุหุ เยี่ยมจริงๆ


หัวข้อ: Re: [มาแต่ง ZFriend กัน] ตอน: เปลี่ยน Background กันดีกว่า
เริ่มหัวข้อโดย: I'm Cem ที่ 11 พฤษภาคม พ.ศ. 2551, 15:37:44
โอว ชักน่าเล่นแล้วหนะสิครับ  [$3$]


หัวข้อ: Re: [มาแต่ง ZFriend กัน] ตอน: เปลี่ยน Background กันดีกว่า
เริ่มหัวข้อโดย: ToXic It ME+! ที่ 17 พฤษภาคม พ.ศ. 2551, 21:34:48
ตอนนี้กำลัง งงกับ CSS อยู่นะครับ
แต่งยังไม่ค่อยเป็น ต้องไปหนังสืออ่านเพิ่มละครับ งิ [{-23-}]


หัวข้อ: Re: [มาแต่ง ZFriend กัน] ตอน: เปลี่ยน Background กันดีกว่า
เริ่มหัวข้อโดย: Mr.P ที่ 27 พฤษภาคม พ.ศ. 2551, 10:12:51
เอาพื้นหลัง "เย็นซ่าโซดาโซน" จาก http://www.zone-it.com/friend/5920 (Mr.P' ZF) มาให้ลองใช้กันครับ  [$01$]

ภาพตัวอย่าง

(http://uploads.screenshot-program.com/th00a00064003e80-1986128702.jpg) (http://uploads.screenshot-program.com/my.php?image=upl1986128702.jpg)


รูปภาพที่ใช้:

กรุณาคลิกที่นี่ เพื่อแสดงข้อมูลที่ซ่อนอยู่(http://i177.photobucket.com/albums/w214/sodsod/bub1.gif)


โค้ดที่ใช้

โค๊ด:
<style>
body
{
background-image: url(http://i177.photobucket.com/albums/w214/sodsod/bub1.gif);
background-repeat:repeat;
}
</style>

ปล. ท่านสามารถนำลิงค์ภาพพื้นหลังที่เป็นไฟล์ .gif มาใส่ในวงเล็บ url ได้เลยครับ สำหรับผมเองใส่โค้ดข้างบนนี้เอาไว้ที่ต้นบรรทัดของ ZF เพื่อสะดวกในการปรับแต่งในภายหลังน่ะครับ


หัวข้อ: Re: [มาแต่ง ZFriend กัน] ตอน: เปลี่ยน Background กันดีกว่า
เริ่มหัวข้อโดย: Ti-Zone(กาญจน์) ที่ 26 สิงหาคม พ.ศ. 2551, 20:27:07
เย้ แต่งเป็นแล้ว


หัวข้อ: Re: [มาแต่ง ZFriend กัน] ตอน: เปลี่ยน Background กันดีกว่า
เริ่มหัวข้อโดย: ปีศาจจากสวรรค์ ที่ 28 สิงหาคม พ.ศ. 2551, 09:28:38
แจ๋วเลยครับ ขอบคุณครับ