กรุณาปิด AdBlock!

Cancel your adBlock please.

ขยายหน้าเว็บRegister Login
 โฆษณา
หน้า: [1]  ลงล่าง
  พิมพ์  
topic

[Tip Hi5] โค๊ดแต่งสกิน แจ่มๆ เปลี่ยนภาพใน sub header  (อ่าน 9683 ครั้ง)

ไอที
« เมื่อ: 17, 06 2009, 03:14:29 PM »
อ่านคำอธิบายก่อนแล้วค่อยไปดู code ข้างล่างนะครับ

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

http://dekitclub.hi5.com link

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

ตัวอย่างภาพ
ภาพที่ใช้ควรจะมีขนาดกว้างไม่เกิน 456 pixel นะครับ ไม่งั้นจะล้นขอบ ตามตัวอย่างนี้




วิธีใช้
#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; }
เด็กไอทีคลับ
เด็กไอทีตัวพ่อ
เด็กไอทีคลับชั้นเซียน
*
พลังความคิด 89
กระทู้: 3,536
บันทึกการเข้า
ไอที
« ตอบ #1 เมื่อ: 24, 10 2009, 02:00:17 PM »
ไม่เคยเล่น hi5 ช่วยแนะนำวิธีแต่ง hi5 แบบระเอียดให้หน่อยงับ
orange_pon@live.com
เด็กไอทีคลับหน้าใหม่
*
พลังความคิด 0
กระทู้: 1
บันทึกการเข้า
ไอที
« ตอบ #2 เมื่อ: 27, 10 2009, 09:07:53 PM »
  อิ ๆ ทำไม่เป็น มาทำให้เลย ใช้ อันที่ ๆรัก ทำให้

มา 5 เดือนแล้วนะค่ะ
CoolPha
RUK-YOM
ปรมาจารย์ด้านไอที
*
พลังความคิด 76
กระทู้: 5,261
เว็บไซต์
บันทึกการเข้า

หน้า: [1]  ขึ้นบน
  พิมพ์  
 
กระโดดไป: