รูปตัวอย่าง
| Description |
|
โค้ดทั้งหมด ไม่ได้เป็นโค้ด skin แต่เป็นการจัดรูปแบบ layout อย่างง่ายในส่วนที่สำคัญ ส่วนรายละเอียดอื่นๆ คุณสามารถนำไปใช้ดัดแปลง กำหนดค่าต่างๆ เพื่อให้เป็นโปรไฟล์ในสไตล์ของคุณเอง โดยโค้ดชุดนี้ได้ลบส่วนที่ไม่จำเป็นออกบางส่วนออก ส่วนที่เห็นการเปลี่ยนแปลงได้ชัดเจน คือส่วนของ content ทั้งสองฝั่งนั้นสลับด้านกัน ซึ่งทางฝั่งเนื้อหาจะมีขนาดกว้าง 635px เหมาะสำหรับผู้ที่ต้องการใส่เนื้อหาให้โปรไฟล์จำนวนมากๆ และส่วนทางด้านคอมเม้นท์จะแคบลงเหลือเพียง 295px
คุณสามารถตกแต่งด้วยการใส่รูปภาพเข้าไปได้ในหลายๆส่วน ซึ่งผมได้เขียนคอมเม้นท์ไว้ในจุดที่สามารถใส่รูปภาพได้
คุณสามารถนำโค้ดทั้งหมดไปใช้ได้ทันที และสามารถตกแต่งส่วนอื่นๆ เพิ่มเติ่มได้จากโค้ดที่มีในเว็บ
|
Support: IE6-7-8, FireFox2-3, Chrome, Safari, Opera
Code
<style>
div#topic-noedit,div.info-box
{font-size:__px;font-family:__; color:__}
<!-- ขนาด รูปแบบตัวอักษรลิ้ง และสีข้อความ status -->
h4.box_profile_info_small_heading
{color:__; font-family:__; font-size:__}
<!-- ขนาด รูปแบบตัวอักษรลิ้ง และสีหัวข้อ info -->
a#hi5-logo-type div.logo
{background-image:url(__) !important;
width:__px !important; height:__px !important}
<!-- เปลี่ยนรูป Logo -->
#hi5-common-header {
background-image:none !important}
#profile-name {background:none; height:50px;
color:__; font-family:__; font-size:__}
<!-- ขนาด รูปแบบตัวอักษรลิ้ง และสีชื่อโปรไฟล์ -->
#profile-nav {background:transparent}
#profile-nav a {color:__}
#user-links a {color:__}
td a,td a:link,td a:visited
{color:__; font-family:__; font-size:__}
<!-- ขนาด รูปแบบตัวอักษรลิ้ง และสีของลิ้ง -->
.bg_content {direction:rtl}
#user-details {direction:ltr}
#content-left {direction:ltr;overflow:hidden}
#content-right {direction:ltr}
#content-left {width:650px}
#content-right {width:295px}
#interests .subsection ,
#lifestyle .subsection {width:640px}
#interests div.box_profile_info_small_content,
#lifestyle div.box_profile_info_small_content
{margin:0px; width:635px;
font-size:__px; font-family:__;
color:__ }
<!-- ขนาด รูปแบบตัวอักษรลิ้ง และสีของเนื้อหา -->
#friends h1,#lifestyle h1
{text-indent:-999px;overflow:hidden}
#friends h1 {height:30px;
background-image:url(__);
background-repeat:no-repeat;
background-position:__ __}
<!-- ใส่รูปแทนคำว่า เพื่อน -->
#lifestyle h1 {height:30px;
background-image:url(__);
background-repeat:no-repeat;
background-position:__ __}
<!-- ใส่รูปแทนคำว่า เกี่ยวกับฉัน -->
#friends .subsection div {display:none}
#friends .subsection div.friend,
#friends .subsection div.friend div.friend-picture,
#friends .subsection div.friend div.friend-picture div
{display:block !important}
#friends {width:285px}
.friend {width:50px}
.friend-picture div
{margin-left:0px !important;}
.friend-picture {
width:51px !important;
height:51px !important;
border:none; margin-left:0px}
.friend-picture a img {
height:50px;width:50px;
margin-left:-53px !important;
padding:0px}
#comments {
width:250px;padding:8px;
border:1px solid #D6D6D6;
color:#616161;font-size:10px}
#comments .content {width:250px}
#comments .subsection {width:240px;
padding-left:0px !important}
div.commentEditorNew form div
{text-align:right !important}
div.commentEditorNew form textarea.textbox
{width:248px;border:1px solid #D6D6D6}
.comment {width:240px}
.comment-text
{width:185px !important;
margin-top:0px !important;
font-size:10px}
.comment-picture
{height:40px !important;
width:40px;border:none}
.comment-picture a img
{width:40px; height:40px;}
.comment div {display:none}
.comment-picture,.comment-text
{display:block !important}
#comments .listitem-separator
{background:none !important;
border-top:solid 1px #eeeeee;
margin:2px auto !important;
width:250px}
.comment-text font {color:black!important}
#comments h3 {border:none}
#comments h3 a {font-size:11px;color:#616161}
#comments h1,#comments h2,
h2.editorTop {display:none}
#commentImage {display:none}
.comment-text img,.comment-text object,
.comment-text br,.comment-text div,
.comment-text a img,.comment-text embed,
.comment-text b,.comment-text u,
.comment-text s,.comment-text i,
.comment-text a {display:none}
#gifts,#recent-updates,#photoAlbums,
iframe,#friends .listitem-separator,
#friends .footer,#common-friends,
div#game_bar,#user-fives,
div#game_bar_padder,.emptyProfileInfo,
#content-right div.section-separator,
div a.sponsoredby,#gamesModule,#groups,
#journalDetail,#apps,#widgets,
div#picture-links,#interests h1
{display:none!important}
div#hi5-common-header-banner,
div#hi5-common-header-banner ins,
div.hi5-common-header-banner-ad
{display:none !important;border:none}
div#content-left iframe
{display:block !important}
#content-left h4 {display:none}
#content-right h2 {display:none}
#user-details,#info,#contact,
.section h1 {border:none}
#info-topmid {
filter:none !important;
background:none !important}
#info-topleft,#info-topright,
#info-botleft,#info-botmid,
#info-botright {display:none}
#xabout-right div {display:none}
#xabout-right iframe,
#xabout-right object,
#xabout-right img,
div a.sponsoredby
{display:none !important}
.content p {padding-left:5px !important}
div#info {min-height:100px !important}
#about-right {
background:url(__) center 25px no-repeat}
<!-- รูปภาพบนแถบสถิติ -->
#xabout-right {
height:120px;
overflow:hidden;
margin-top:250px}
.section h2
{background-color:transparent}
body {background:none}
#p_container {margin-top:180px !important}
<!-- ระยะห่างของแถบชื่อโปรไฟล์ กับเฮด -->
html {
background-image:url(___)
background-repeat:no-repeat;
background-position:top center;
background-color:#fcfcfc;
}
<!-- รูปภาพที่จะใส่เป็นเฮด (Header pic.) -->
</style>
Last update: 19 August 2009