Category: Hi5 Tips

Change Font Color in Top Header

Change Font Color in Top Header

17 May 2008

?เปลี่ยนสี Font ในส่วน Search Bar
หลังจากที่เราทำการเปลี่ยน ภาพพื้นหลังของแถบเมนูด้านบนสุดของ hi5 นะครับ จะเห็นได้ว่าตัวอักษรนั้นจะเป็นสีเทาทั้งหมด มองเห็นบ้างไม่เห็นบ้างกับ พื้นหลังบางอันนะครับ งั้นเรามาเปลี่ยนสีตัวอักษรตรงนี้กัน ไล่ใส่สีที่ต้องการด้วยโค๊ดชุดนี้ครับ
<style>
#top_header{color:#FFFFFF !important}
#top_header a.account_link { color: #FFFFFF; }
#top_header a.search_link { color: #FFFFFF; }
#top_header a.search_link_active { color: #FFFFFF; }
#top_header span { color: #FFFFFF !important; }
#p_nav_primary li#nav a { color: #FFFFFF; }
#p_nav_primary li#nav_select a { color: #FFFFFF; }
</style>
?
โดย [...]

Mosaic Comment Picture

Mosaic Comment Picture

17 May 2008

ทำรูปคน Comment ให้เป็นภาพ Mosaic
เป็นโค๊ดที่ทำรูปภาพคนคอมเม้นให้เป็นภาพ Mosaic หรือภาพที่คล้ายโดนเซ็นเซอร์นะครับ พอเอาเมาส์ไปวางก็จะเห็นเป็นภาพปกต
<style>
.comment-picture img{filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=5);}.comment-picture a:hover img{filter:();} </style>ิ.comment-picture img{filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=5);}
.comment-picture a:hover img{filter:();
}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

Space Between Us

Space Between Us

17 May 2008

ลบช่องว่างระหว่าง Search Bar กับ Profile Name
วันนี้เอา code ลบช่องว่างระหว่าง search bar กับ Profile Name นะครับ เผื่อใครจะเอาไป ทำ Head ใหญ่รวม Search Bar ไปด้วย
<style>
.box_profile_connections {display:none!important}
.profile-nav {margin: 0 0 10px 0; padding: 0px 0 0 0!important;}
</style>
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

Turn to gray

Turn to gray

17 May 2008

ทำ HI5 ให้เป้นขาว-ดำ?
อันนี้เป็นการปรับทั้งหน้าให้เป็นขาว – ดำนะครับ
เหมาะสำหรับ สำหรับ คิดไม่ออก 555+
เอาเป็นว่าทำให้ขาว-ดำหมดเลยก็แล้วกัน
<style>
body{filter:gray}
</style>
เห็นผลเฉพาะ Internet Explorer นะครับ
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

Big Comment Picture

Big Comment Picture

17 May 2008

สร้างรูป Profile ปลอมให้ใหญ่ดังใจนึก
ขยายรูปของคนที่มาคอมเม้นท์ให้ใหญ่
เป็นขนาด 100 x 100 px ครับ
.comment-picture {
height:100px!important;
width:100px;border:solid #000000 1px;
}
.comment-picture a img {width:100px;height:100px;
}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

Picture in Comment Textbox

Picture in Comment Textbox

17 May 2008

ใส่ภาพพื้นให้กล่องกรอก Comment?
โค๊ดการใส่ภาพลงในกล่องกรอกคอมเม้นท์นะครับ
คือส่วนที่เพื่อนเรากรอกข้อความคอมเม้นท์
เตรียมภาพขนาดเท่าไรก็ได้ครับ
แต่ไม่ควรกำหนดความกว้างเกิน 450px นะครับ
textarea {background-image:url(URL ของภาพ);
overflow:auto;height:ความสูงpx;width:ความกว้างpx;}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

Change Navigator Header

Change Navigator Header

17 May 2008

ใส่พื้นให้ Search Bar ด้านบน
เปลี่ยนรูปพื้นในส่วนของ Navigator Header หรือ Search Bar ด้านบนสุด นะครับ
เตรียมรูปขนาด 956 x 82 px ไว้นะครับ
#p_nav_header { background: url(URL ของภาพ)!important; background-repeat:no-repeat!important; border:none; width: 956px!important;
}
div#top_header { background:none;
}
#p_nav_primary { background: none; border:none;
}
#nav_select{background: none!important;
}
หรือถ้าจะซ่อนไปเลยก็
#p_nav_header {display:none}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

Big Comment Picture

Big Comment Picture

17 May 2008

ขยายรูปคนคอมเม้นท์ให้ใหญ่ขึ้น
ขยายรูปของคนที่มาคอมเม้นท์ให้ใหญ่
เป็นขนาด 100 x 100 px ครับ
.comment-picture {height:100px!important;
width:100px;border:solid #000000 1px;}
.comment-picture a img {width:100px;height:100px;}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

Topic Text is Not Enough

Topic Text is Not Enough

17 May 2008

เปลี่ยนหัวข้อต่างๆจากตัวหนังสือเป็นรูป
อันนี้เป็นการใส่ภาพ แทนที่ หัวข้อ ของส่วนต่างๆ
อย่าง Friend หรือ Five นะครับ
เราสามารถเปลี่ยนจากข้อความธรรมดา
เป็นรูปที่เราทำขึ้นมาได้ครับ ผมแยกมาให้ 9 ส่วนนะครับ ลองทำดู
เตรียมรูปที่จะทำหัวข้อไว้นะครับ จะเอาอันไหนก็ ลองเลือกๆ ดู

Change Vanity-bar Color

Change Vanity-bar Color

17 May 2008

เปลี่ยนแถบสีแสดงสถิต
ตอนแรกว่าจะเขียนภาษาอังกฤษ แต่เห็นเด็กๆ มาถามบ่อยเอาเป็นภาษาไทยละกัน
การเปลี่ยนสีแถบ สถิติ นะครับโค๊ดแยกเป็นสามส่วนนะครับ

Show Only Comment-picture

Show Only Comment-picture

17 May 2008

ซ่อนชื่อและเวลาคนคอมเม้นท์
โค๊ดแสดงเฉพาะรูปกับ ข้อความของคนคอมเม้นท์นะครับ
จะตัดส่วนชื่อและเวลาออกไป (ปุ่ม delete ก็หายไปด้วย)
.comment div {visibility: hidden}
.comment-picture {visibility: visible !important}
.comment-text {visibility: visible !important}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

The 4th Album

The 4th Album

17 May 2008

เพิ่มแถวอัลบั้มรูปเป็น 4 อัลบั้มต่อ 1 แถว?
โค๊ดเพิ่มจำนวนแถวของอัลบั้มจาก แถวละ 3 เป็น แถวละ 4 อัลบั้มนะครับ เราต้องเตรียมภาพพื้นหลังอัลบั้มใหม่นะครับ เป็นภาพขนาด 100×100
จากนั้นใส่ Code นี้ครับ
.albumWrapper {width: 100px !important;}
.album {background: url(ภาพพื้นหลังอัลบั้ม); height: 100px; width: 100px;}
.album img {width: 75px !important; height: 75px !important}
TIP : ภาพปกจะถูกย่อที่ขนาด 75px นะครับ ใครอยากให้ออกมาคนชัดก็ย่อรูปให้ได้ 75×75 px ทำเป็นปกนะครับ
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

Your Cool Skin With 1 Photo

Your Cool Skin With 1 Photo

17 May 2008

โง่อย่างผมทำไม่เป็นหรอกครับ?ต้องพี่ผมครับ?IaMMaI (พี่ใหม่) อย่าลืมไปเม้นให้พี่ผมน่ะครับผม
คราวนี้เรามาเจาะลึกการสร้างภาพพื้นต่อเนื่องกันตั้งแต่ head จนจบบน Profile โดยใช้รูปเดียวต่อเนื่องกันนะครับ
โดยที่วิธีการคือสร้างภาพขนาดกว้าง 956 x ความสูงที่ต้องการครับ แล้วตัดออกเป็น 4 ท่อน
โดยผมจะใช้ Skin ของผมเป็นหลักในการอธิบายนะครับ มือโปรสามารถดัดแปลงตามใจเลยครับ
ขั้นตอนการเตรียมรูป ก็มาดูว่าเราต้องเตรียมแบบไหนครับโดยรูปนั้น
จะมีความกว้าง 956px ทั้งหมดนะครับ
จะมีส่วนที่โดนกำหนดความสูงตายตัวอยู่ 3 ส่วนอธิบายแบบนี้คือ
1 ส่วน search จะสูงเท่ากับ 82 px
2 ส่วน Profile Name ส่วนนี้สามารถ ยืดได้ตามขนาดรูปที่ทำ
โดยจะมาสูตรคำนวน คือ ความสูงรูปทั้งหมด – (ส่วนที่ 1+3+4)
3.ส่วน Menu Profile สูง 35 px
4.ส่วนรายละเอียด Profile สูง 500 px
สมมุติว่าเราทำรูปออกมาได้ขนาด 956 x 1000 px
เราก็ทำการตัดก่อนครับ
1 ตัดส่วนที่ 1 วัดจากบนลงล่างไป 82 ครับ
2 ตัดส่วนที่ [...]

Big Friend Picture

Big Friend Picture

17 May 2008

ก็อีกเช่นเคยน่ะครับ กับ Tips ต่างๆ ของ IaMMaI (พี่ใหม่) ผมนำมาให้ชมครับ
Change Your Hi5 Friend-picture size to 85 x 100 px
Just Add CSS Code Below
<style>
.friend-picture{
height:100px !important;width:85px!important;
margin-left:0px;border:solid #000000 1px;
}
.friend-picture img {
height:100px !important;width:100px!important;
margin-left: 7px
}
</style>
ที่สำคัญถึงแม้ผมจะยืมพี่แกมาก็แวะมาเม้นให้ผมบ้างน่ะครับ iPalm และ BlogiPalm

Change Online Icon

Change Online Icon

17 May 2008

ของพี่เขาดีจริงๆ?ครับ?IaMMaI (พี่ใหม่)?อย่าลืมไปเม้นให้พี่แกนะครับ
การเปลี่ยนรูปการแสดงสถานะ ออนไลน์นะครับ
จากภาพ ไฟกลมๆ เป็นรูปอะไรก็ได้นะครับ
update!! ตรงนี้เราสามารถที่จะดันข้อความ Online Now ให้ตกลงมาเป็นบรรทัดใหม่ได้ เผื่อว่าบางคนไม่ชอบที่มันไปเกะกะไอคอนของเรา ทำได้โดยการเพิ่มโค๊ด display:block; ลงไปครับ จะได้โค๊ดเป็น
<style>
#online-now-icon {background:url(URL รูปไอคอน);
width:ความกว้างpx!important;
height:ความสูงpx!important;display:block}
</style>
ที่สำคัญถึงแม้ผมจะยืมพี่แกมาก็แวะมาเม้นให้ผมบ้างน่ะครับ iPalm และ BlogiPalm