How to Create Your Own Friendster Layouts?

If you are a bit techie, I know that you won’t be contented of just copying and pasting friendster layout css codes on several fs themes providers. For sure, you want to create your own and customize it according to your interest. However, hope you don’t mind to get the standard CSS code pattern provided by friendster. In the first place, it is designed to be compatible with their social networking platform. But don’t worry, it’s just a coding guide and the customization still depends on you.

Just be sure to change the background image url and other element attributes like font color, text-decoration and so on.

Here is the standard code on “How to Create Your Own Friendster Layouts“:

/*page background*/
body {
background-image: url(http://images.friendster.com/images/homebg.gif);
background-position: ;
background-repeat: ;
background-attachment: ;
background-color: ;
}
/*global fonts*/
.usercontent {
font-family: ;
color: ;
text-transform: ;
}
/*global links*/
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active {
text-decoration: ;
color: ;
}
.usercontent a:hover {
text-decoration: ;
color: ;
}
/*modules*/
.commonbox { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.commonbox h1, .commonbox h2 { /*header*/
font-family: ;
color: ;
text-transform: ;
background-color: #;
}
.commonbox .viewall { /*viewall link*/
font-family: ;
color: ;
text-transform: ;
}
.commonbox .imgblock75, .ir { /*photo blocks*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.commonbox .dr { /*name bars below photo blocks*/
font-family: ;
color: ;
text-transform: ;
background-color: ;
}
.commonbox .evenrow { /*even row*/
background-color: ;
}
/*specific module boxes*/
.controlpanel { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.photos { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.friends { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.blogsreviews { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.videos { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.testimonialscomments { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.moreabout { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.fanof { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.groups { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.testimonials { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.scrapbook { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.myfans { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.reviews { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
.blogs { /*box*/
border-width: ;
border-color: ;
border-style: ;
background-color: ;
}
/*control panel*/
.controlpanel .imgblock200 { /*primary photo border*/
border-color: ;
border-style: ;
}
.data { /*data answers*/
font-family: ;
color: ;
text-transform: ;
}
.controlpanel .q { /*data labels*/
font-family: ;
color: ;
text-transform: ;
}
.data a { /*data links*/
font-family: ;
color: ;
text-transform: ;
}
a.more { /*more about link*/
font-family: ;
color: ;
text-transform: ;
}
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited { /*buttons*/
color: ;
border-color: ;
border-style: ;
background-color: ;
}
#controlPanelButtons a:hover { /*buttons hover*/
color: ;
border-color: ;
background-color: ;
}

We hope that you will support our friendster layouts site. Hope to see you always.

Related Searches

• color your oen transfomr
• creat own layout bacground friendster