เด็กไอทีคลับ คลับซ่าฅนไอที

iT club | ไอทีคลับ คลับของคนไอที => Hi5 Club => ข้อความที่เริ่มโดย: เด็กไอทีคลับ ที่ 17, 06 2009, 03:14:29 PM



หัวข้อ: [Tip Hi5] โค๊ดแต่งสกิน แจ่มๆ เปลี่ยนภาพใน sub header
เริ่มหัวข้อโดย: เด็กไอทีคลับ ที่ 17, 06 2009, 03:14:29 PM
อ่านคำอธิบายก่อนแล้วค่อยไปดู code ข้างล่างนะครับ

code นี้จะให้เรามี Sub Header สวยๆ แบบที่แต่งเอาได้ ไม่ต้องซ้ำกับใครๆ โดยการทำงานของ code ก็คือ จะสร้างภาพพื้นหลัง ไว้ที่ส่วนของ sub header และซ่อนตัวหนังสือที่แสดงอยู่ ดูที่นี่เพื่อให้เห็นตัวอย่างนะครับ

http://dekitclub.hi5.com

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

ตัวอย่างภาพ
ภาพที่ใช้ควรจะมีขนาดกว้างไม่เกิน 456 pixel นะครับ ไม่งั้นจะล้นขอบ ตามตัวอย่างนี้
(http://www.dekitclub.com/upload/_temp/20081219170918a49552-bAbo.gif)

(http://www.dekitclub.com/upload/_temp/2008121917114831d96b-bInt.gif)

วิธีใช้
#recent-updates h1 {
text-indent:-5555px;
background:url(.....เปลี่ยนตรงนี้เป็น url ของรูปภาพที่เราต้องการ....);
background-position:right;
background-repeat:no-repeat;
}

ภาคผนวก
#recent-updates  หมายถึง กล่องที่แสดงอัพเดทโปรไฟล์ของเรา จะอยู่ทางด้านซ้าย
#lifestyle  หมายถึง หมายถึง เกี่ยวกับฉัน จะอยู่ทางด้านซ้าย
#photoAlbums หมายถึง อัลบั้มภาพ จะอยู่ทางด้านขวา
#groups  หมายถึง กลุ่มเพื่อน จะอยู่ทางด้านซ้าย
#common-friends  หมายถึง เพื่อนที่เกี่ยวของ อยู่ด้านขวาบน
#friends  หมายถึง เพื่อนของฉัน
#user-fives  หมายถึง ไฟว์จากเพื่อน
#interests  หมายถึง ความสนใจ
#journalDetail หมายถึง บันทึก บทความ
#comments  หมายถึง คอมเม้นต์จากเพื่อน

โค๊ด:
/* ------------ SUB HEADER  by dekitclub.com ------------*/

.section h1 {margin-top:12px;height:67px;width:456px}

#recent-updates h1 {
text-indent:-5555px;
background:url(http://www.dekitclub.com/upload/_temp/20081219170918a49552-bAbo.gif);
background-position:right;
background-repeat:no-repeat;
}
#lifestyle h1 {
text-indent:-5555px;
background:url(http://www.dekitclub.com/upload/_temp/20081219170918a49552-bAbo.gif);
background-position:right;
background-repeat:no-repeat;
}
#photoAlbums h1 {
text-indent:-5555px;
background:url(http://www.dekitclub.com/upload/_temp/20081219171148df4ff7-bHall.gif);
background-position:right;
background-repeat:no-repeat;
}
#groups h1 {
text-indent:-5555px;
background:url(http://www.dekitclub.com/upload/_temp/200812191709184fc609-bGrp.gif);
background-position:right;
background-repeat:no-repeat;
}
#common-friends  h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/20081219171148cd4470-bSo.gif);
background-position:right;
background-repeat:no-repeat;
}
#friends h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/20081219171148cd4470-bSo.gif);
background-position:right;
background-repeat:no-repeat;
}
#user-fives h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/20081219170918450226-bFive.gif);
background-position:right;
background-repeat:no-repeat;
}
#interests h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/2008121917114831d96b-bInt.gif);
background-position:right;
background-repeat:no-repeat;
}
#journalDetail h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/2008121917114893b49b-bWord.gif);
background-position:right;
background-repeat:no-repeat;
}
#comments h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/200812191709188e60c7-bCom.gif);
background-position:right;
background-repeat:no-repeat;
}
.section-separator {display:none; }


หัวข้อ: Re: [Tip Hi5] โค๊ดแต่งสกิน แจ่มๆ เปลี่ยนภาพใน sub header
เริ่มหัวข้อโดย: orange_pon@live.com ที่ 24, 10 2009, 02:00:17 PM
ไม่เคยเล่น hi5 ช่วยแนะนำวิธีแต่ง hi5 แบบระเอียดให้หน่อยงับ


หัวข้อ: Re: [Tip Hi5] โค๊ดแต่งสกิน แจ่มๆ เปลี่ยนภาพใน sub header
เริ่มหัวข้อโดย: CoolPha ที่ 27, 10 2009, 09:07:53 PM
  อิ ๆ ทำไม่เป็น มาทำให้เลย ใช้ อันที่ ๆรัก ทำให้

มา 5 เดือนแล้วนะค่ะ