วิธีแต่ง Hi5 ด้วย CSS code

การตกแต่ง Hi5 สามารถทำได้ 2 วิธีหลักๆ คือ
1. การตกแต่งโดยการ Add skin สำเร็จรูป
2. การตกแต่งโดยการใส่ css code

ซึ่งในที่นี้ ผมจะนำเสนอการตกแต่ง ในรูปแบบของการใช้ CSS code
เพราะเป็นการตกแต่งที่ละเอียดกว่าการตกแต่งแบบ Add skin สำเร็จ
คุณ สามารถนำ Css code ไปใช้ได้เลย โดยวางในช่อง HTML/CSS
โดยกดที่หัวข้อ Customize Profile คลิกเลย

แต่สำหรับใครที่ได้ Add skin ไปแล้ว ผมแนะนำให้ Remove skin เดิม
ออกก่อนนะครับ เพราะ skin เดิม จะมี code ค้างอยู่ ซึ่งอาจจะทำให้มัน
ซ้อนกับ Code ใหม่ที่เพิ่มเข้าไปในภายหลัง ซึ่งมีผลทำให้การแสดงผล
ผิดเพี้ยนไป หรืออาจจะไม่มีแสดงผลใดๆ เลย

การลบ ก็ให้เลือกที่ Remove skin ใต้รูปดิสเพลย์ จากนั้นก็เลือก
Customize Profile ได้เพื่อไปลบโค้ดเก่าในช่อง HTML/CSS
ดังรูปครับ . . .

รูปแบบของการวาง CSS code
code ทุกตัวจะต้องอยู่ภายใน tag style
ซึ่งก็สามารถรวม code ทั้งหมดไว้ภายใน <style> เดียวกันได้

<style type="text/css">
....code....
....code....
....code....
</style>

รูปแบบของการเขียน CSS code

Selector { Property : Value }

selector คือ ส่วนของ tag ,element หรือส่วนหนึ่งๆ ในเว็บเพจ
property คือ คุณสมบัติที่กำหนดให้ selector
Value คือ ค่าของคุณสมบัตินั้น

เราสามารถกำหนดได้หลายคุณสมบัติ ภายใน Selector เดียว
โดยใช้เครื่องหมาย semicolon ; คั้นระหว่าง คุณสมบัติ

Code ใส่พื้นหลังหน้า Hi5

การกำหนดค่า
background-attachment :
fixed ล็อกพื้นหลังอยู่กับที่
scroll พื้นหลังเลื่อนตามเนื้อหา

background-repeat :
repeat ทำซ้ำภาพพื้นหลัง จนเต็มจอ
no-repeat ไม่ทำซ้ำ แสดงตามขนาดของภาพ

background-color :
กำหนดพื้นหลังเป็นสี

background-position : x y
กำหนดตำแหน่งรูปพื้นหลัง
- เทียบตามแกน x แนวนอน ระยะห่างจากขอบ บนของ tag
- เทียบตามแกน y แนวตั้ง ระยะห่างจากขอบ ซ้าย ของ tag

รายละเอียดเพิ่มเติม...
<style type="text/css"> body { background-image: url(ใส่ url ของรูป); background-attachment: fixed; background-repeat: repeat; background-color: สี; background-position: ตำแหน่งของภาพพื้นหลัง; } </style>


Code ใส่รูปในกล่อง comment
<style type="text/css"> .commentEditor textarea { background-image:url(ใส่ URL ของรูปภาพ); color: สีของตัวอักษรเวลาที่พิมพ์; height: ความสูงของCommentBoxหน่วยเป็น px; width: ความกว้างไม่ควรเกิน450px; } </style>


Code ทำแถบ Header ให้ใสทุก box
<style type="text/css"> #profile-name {background: none} #profile-nav,.section h1,.section h2 {background: transparent; border: none} #user-details {border: none} </style>


Code ScrollBar
<style type="text/css"> html { scrollbar-arrow-color: โค้ดสี; scrollbar-face-color: โค้ดสี; scrollbar-highlight-color: โค้ดสี; scrollbar-3dlight-color: โค้ดสี; scrollbar-shadow-color: โค้ดสี; scrollbar-darkshadow-color: โค้ดสี; scrollbar-track-color: โค้ดสี; } </style>
เว็บรวม Code สี !!




Code ใส่กรอบให้หน้า Hi5
แบบของเส้นขอบ
<style type="text/css"> html { border-style: ใส่แบบของเส้นกรอบ; border-width: ใส่ความหนาของกรอบpx; border-color: ใส่สีของกรอบ; } </style>

Code ลิ้งรูปสลับด้าน

จะแสดงเมื่อใช้ mouse ชี้ไปยังลิ้งรูปภาพ
ซึ่งสามารถสลับได้ 2 แบบ คือ
Filter: FlipH คือ สลับในแนวนอน
Filter: FlipV คือ สลับในแนวตั้ง

<style type="text/css"> a:hover img {Filter:FlipH} </style>


Code เปลี่ยนรูปแถบสถิติ
Stat Bar
รูปที่ใช้จะมีขนาด กว้าง140px -- สูง12px
ตัวอย่างรูปที่ผมทำมาให้ ถ้าใครจะใช้
ก็คลิ้กขวาที่รูป เลือก Properties แล้วก้อบ URL ไปใช้ได้เลยนะครับ
ส่วนใครที่อยากได้สีอื่นๆ นอกเหนือจากนี้ ก็ไปทำเอาเองนะครับ












<style type="text/css"> .vanity-bar div {background:url(ใส่ URL ภาพแถบพื้น) !important;} .vanity-bar div div {background:url(ใส่ URL ภาพแถบบน) !important;} .vanity-bar div div img,.vanity-bar div img {display:none;} </style>


Code กรอบ+BG ของ Comment
<style type="text/css"> .comment {background: url(ใส่ URL รูปภาพ); border: solid 2px #000000; height: ความสูงของBoxหน่วยpx; overflow: auto !important;} </style>