กลับไปยังรายบอร์ด โพสต์ใหม่

[ระดับเซียน] Code Hi5 Beta Skin มาตรฐานที่นี่เลยจ้า [[ up 12 Dec 09 ]]

กระทู้นี้ รวบรวม Code ที่ใช้สำหรับทำ Hi5 Skin ซึ่งทางเวปจัดไว้เป็น Code มาตรฐาน สำหรับในการจัดประกวด Hi5 Skin ภายในเวป

และเพื่อนๆ สมาชิก ก็สามารถนำไปใช้เป็น Code Hi5 Skin ของตนเองได้นะค่ะ

หากส่วนไหนที่เพื่อนๆ ไม่ใช้จะทำการลบ Code ในส่วนนั้นออก หรือว่าไม่ใส่ URL ภาพ ก็ได้ค่ะ

อันดับแรก มาดู Code สี กันก่อน

Code สีสำหรับตัวหนังสือต่างๆ ภายใน Hi5 ของคุณ

<!--["่ie6+ ture"]><style>
.section,.subsection {color:โคทสี!important;}  ตรงนี้เป็นสีตัวหนังสือธรรมดา
body {color:#โคทสี!important;}  ตรงนี้ให้ใส่เหมือนกับด้านบน
a:link {color: #โคทสี!important; text-decoration: none; }  ตรงนี้เป็นสีของลิ้ง
a:active {color: #โคทสี!important; text-decoration: none; }  ตรงนี้เป็นสีลิ้งย่อย เฉพาะที่เราเห็น เช่น Edit
a:visited {color: #โคทสี!important; text-decoration: none; }  ตรงนี้เป็นลิ้งย่อย ที่คนอื่นเห็นด้วย
a:hover {color: #โคทสี!important; text-decoration: none; } อันนี้เป็นสีลิ้งตอนเอาเม้าไปชี้

#user-links a, .vanity-title a, #picture-links a {color:#โคทสี !important; }
#user-links a:hover, .vanity-title a:hover, #picture-links a:hover {color:#โคทสี !important;}
#userstuff{color:#โคทสี!important}
#userstuff a.account_link { color:#โคทสี; }
#userstuff a.search_link { color:#โคทสี; }
#userstuff a.search_link_active { color:#โคทสี; }
#userstuff span { color:#โคทสี!important; }
#primenu li a { color:#โคทสี; }
#primenu li.on a { color:#โคทสี; }
#primenu li.on { color:#โคทสี; }
</style><! [endif]-->

Code สำหรับ Profile



ซึ่งแบ่งออกเป็น 3 ส่วนดังนี้
H1 คือ ส่วนของ แถบลิ้งและช่องค้นหา
H2 คือ ส่วนของ ชื่อ Profile ขนาด กว้าง 956 X สูงแล้วแต่ความต้องการ
H3 คือ ส่วนของข้อมูลส่วนตัวของเจ้าของ Profile ขนาด กว้าง 956 x แนะนำสูง 400 ขึ้นไป

Code ที่ ใช้ในส่วนนี้


<!--["่ie6+ ture"]><style>
#headerNameBg {background-image:url(H2);width: 956px; height: ความสูงH2px;background-repeat:no-repeat;}
#headerName {color:#สีชื่อโปรไฟล์!important;}
#user-details .content {background: url(H3);height:ความสูงH3px}
#user-details{border:none !important;}.section .footer { display:block!important;}
#user-details .footer {background:none;height:5px;}
#user-details{position:relative;top:-5px}
#PageHeaderContainer li a {color: #โคทสีลิงค์ปัจจุบัน H1!important}
#PageHeaderContainer li a:hover {color: #โคทสีลิงค์ที่กำลังชี้อยู่ H1 !important}#PageHeaderContainer{background-color:transparent !important;border:none !important;}

</style><! [endif]-->

Code สำหรับเฮดย่อยต่างๆ แบบเฮดย่อยเหมือนกันหมด



ซึ่งแบ่งออกเป็น 4 ส่วน ดังนี้
M1 คือ ส่วนหัวของ Head ย่อย ขนาด กว้าง 470 x สูงแล้วแต่ความต้องการ
M2 คือ ส่วนของลิ้งใน Head ย่อย ขนาด กว้าง 470 x สูง 25
M3 คือ ส่วนของพื้นหลังข้อมูลใน Head ย่อย ขนาด กว้าง 470 x สูงแล้วแต่ความต้องการ
M4 คือ ส่วนท้ายของ Head ย่อย ขนาด กว้าง 470 x สูงแล้วแต่ความต้องการ แนะนำ 30

Code ที่ ใช้ในส่วนนี้


<!--["่ie6+ ture"]><style>
.section h1 {background-image: url(M1);height: ความสูงM1px;repeat: no-repeat;margin-top:7px!important;text-align: left;padding-left: 10px;border:none;}
.section h2 {background-image: url(M2);background-color: transparent;text-align: left;}
.section .content {background-image: url(M3);background-color: none;background-position: top;background-repeat: repeat-y;?text-align: left;}
.section .footer {background-image: url(M4);display: block;height: ความสูงM4px;}
</style><! [endif]-->

Code สำหรับ พื้นหลังของ Hi5 หรือ BG

<!--["่ie6+ ture"]><style>
body {background-image: url(BG);background-position: center;background-attachment: fixed;background-repeat: repeat;}
</style><! [endif]-->

Code สำหรับ ฟุตเตอร์ล่างสุดของ Hi5 หรือ ปิดท้าย Hi5

<!--["่ie6+ ture"]><style>
div#PageFooterContainer  { background: url(foot) no-repeat center center;border: none; display: block; height: ความสูงpx; }
#PageFooterAd,#PageFooter-SiteLinks,p#PageFooter-Copyright,ul#PageFooter-CompanyLinks{display:none;}
</style><! [endif]-->

Code สำหรับ สถิติ



A คือ ส่วนที่ สถิติเต็มช่อง (พื้นสีชมพูอ่อน)
B คือ ส่วนที่ สถิติไต่ตามระดับ (พื้นสีชมพูเข้ม)


<!--["่ie6+ ture"]><style>
.vanity-bar div img{display:none ;}
.vanity-bar div {background:url(สถิติที่เต็มช่อง A)!important ;border:solid #000000 1px}
.vanity-bar div div {background:url(สถิติตามระดับ  B)!important ;border:none}
</style><! [endif]-->


ขอให้เพื่อนๆ สนุกกับการทำ Hi5 Skin นะ

แล้วอย่าลืมนำมาแบ่งปันให้เพื่อนๆ สมาชิกด้วยนะค่ะ >.<
ไฟล์แนบ: คุณไม่สามารถดูไฟล์แนบได้ จำเป็นต้อง เข้าสู่ระบบ แต่ถ้ายังไม่ได้เป็นสมาชิกก็ สมัครสมาชิก Hi5 Thai ก่อนนะครับ แล้วเรามาร่วมแบ่งปันความสุขกัน
25

จำนวน

  • Black_Beat

  • origin1991

  • byenarisara

  • kenzaa35

  • [C4]_บอม

  • tanjen

เก่งจาง

สอนเค้าบ้างจิ

อยากทามบ้างงะ

น่ารักที่สุดเรย

ตอบกลับโพสของ 1# llPinkyll

จะลองทำดูค่ะ
ขอบคุณมากๆเลย
ดีจังเลยอะ
ขอบคุณมากค่ะโค้ดเยอะมากมายมึนกัว
อ่ะครับ
ดีครับเข้ามาเล่นใหม่อ่ะ
ฝากเนื้อฝากตัวด้วยน่ะครับ
ขอบคุณค่ะ ที่สอนเข้าใจขึ้นเยอะ แต่ไม่รู้จาทำไรอ่ะเปล่า

อิอิ  ^____^+
ขอบคุณมากๆๆ สำหรับคำแนะนำดีๆ

จะลองทำดู

^_^
ขอบคุณมากๆๆๆเน้อออ
จะเอาไปทำดูจ้า ^^

ช่วยบอกหน่อย

ว่าจะไปหารูปใส่ที่ h และ M ได้อย่างไง ช่วยสอนหน่อยน่ะ

ขอบคุณล่วงหน้า
โอ้โห งงๆๆๆๆๆๆๆๆๆๆๆๆๆเป็นไก่ตาแตก
1

จำนวน

  • littleopor

เก่งกานจาง

ทามไงหัวไม่ได้เลยคะ

ว่างๆจามาศึกษาใหม่ลากาน

คุงจร้าที่มาสอนกาน

สู้ๆ

ขอบคุณครับ

จะลองทำดูนะครับ




บางอันผมก้องงอ่ะครับ

ขอบคุณค่ะ

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









กลับไปยังรายบอร์ด