New Friendster Layout Style Tutorial

New Friendster Layout Style by xsabrina.chic of vixenart.net. Just want to remind you that this kind of Friendster Layout Style is just my own idea. If you want to use my whole code as your pattern please DO NOT remove my name as credit. Also, please DO NOT claim the style and code as yours.


Use this code for the upper left image header:
Note: The image to use as header must be 490px in width.
I just added the width property


/* FRIENDSTER MAGIC & VIXENART.NET */
#navigation {
background-image: url(URL OF IMAGE HERE);
height: 65px !important;
position: relative !important;
margin: -10px 0 0 0;
padding: 130px 0 0 0;
background-attachment:scroll;
background-repeat: no-repeat;
background-position: top left;
background-color: #000000;
width: 490px;
}


Use this code for the upper right image header:
Note: The image to use as header must be 340px in width and 400px in height (or in any size of height, just make sure it will fit the style).


/* VIXENART.NET - xsabrina.chic Right Image Header */
table#flo_wrapper {
margin: 0 auto 0 auto;
background: transparent url(URL OF IMAGE HERE);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: top right;
padding: 0;
border-width: 0px;
border: none;
}
/* VIXENART.NET - xsabrina.chic */


Use this code for the Navigation:
I just added the width property


/* FRIENDSTER MAGIC & VIXENART.NET */
#mainnav {
padding: 0 !important;
margin: 5px 0 0 0 !important;
width: 490px !important;
background: #830000 !important;
height: 20px !important;
position: relative !important;
text-align: left !important;
color: #f8d24e !important;
font-weight: bold !important;
font-size: 9px !important;
font-family: tahoma;
}
/* VIXENART.NET -xsabrina.chic hide Classifieds and Invite Links */
.secondary_links {
display: none !important;
}


Use this code to lower the position of How You’re Connected Box:
Note: The margin property will depends on the height of your right image header. Just estimate it.


.meettrail {
border: none;
background-position: center center;
background-repeat: repeat;
margin-top: 185px;
}


Questions?
* Why not to use just a single image at table#flo_wrapper?
I just used the image division for fast loading of image. The larger image at table#flo_wrapper, the slower image loading, it may also annoys the users. It’s up to you if you want to use one image at the table#flo_wrapper, we have the different tactics.
* How do I make use of rounded corner of boxes like yours?
Read this. This is working in Mozilla Firefox Only.
* How to change the Messaging OFF Icon Image?
Refer to this.


Questions not mentioned? Leave your questions as comment.


IF YOU FIND THIS TUTORIAL HELPFUL, YOU CAN TRACKBACK THIS POST AND PLEASE DO NOT RE-POST OR RE-DISTRIBUTE.