The Fourth Path

My Friendster Profile Page CSS

Posted in Internet, Programming by nmutiara on 2008/06/07

To customize your Friendster Profile Page using my CSS code…

  1. In your friendster profile, click Customize Page.
  2. Scroll down until you see Customize CSS.
  3. Copy and paste the code below, and then save it.

Before you copy paste this code, please note that:

  • I made this for fun, so don’t sell it!
  • the CSS template is downloaded from Friendster
  • I am the one who took the photo [and put it in my DeviantArt account]

/*page background*/
body {
background-image: url(http://fc01.deviantart.com/fs29/f/2008/157/3/5/lll_by_frexentryc.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: black;
}
/*global fonts*/
.usercontent {
font-family: "Times New Roman";
color: white;
text-transform: none;
}
/*global links*/
.usercontent a, .usercontent a:link {
text-decoration: none;
color: #FFFF99;
}
.usercontent a:active {
text-decoration: underline;
color: #FF6600;
text-transform: uppercase;
}
.usercontent a:hover {
text-decoration: none;
text-transform: uppercase;
color: white;
}
.usercontent a:visited {
text-decoration: none;
color: #CC9933;
}
.usercontent a:hover {
text-decoration: underline;
color: white;
}
/*modules*/
.commonbox { /*box*/
border-width: thin;
border-color: transparent;
border-style: groove;
background-color: transparent;
}
.commonbox h1, .commonbox h2 { /*header*/
font-family: "Arial" ;
color: white;
text-transform: none;
background-color: black;
}
.commonbox .viewall { /*viewall link*/
font-family: "Times New Roman";
color: white;
text-transform: none;
}
.commonbox .imgblock75, .ir { /*photo blocks*/
border-width: thin;
border-color: transparent;
border-style: groove;
background-color: transparent;
}
.commonbox .dr { /*name bars below photo blocks*/
font-family: "Times New Roman";
color: transparent;
text-transform: none;
background-color: transparent;
}
.commonbox .evenrow { /*even row*/
background-color: transparent;
}
/*specific module boxes*/
.controlpanel { /*box*/
border-width: thin;
border-color: transparent;
border-style: groove;
background-color: transparent;
}
.photos { /*box*/
border-width: thin;
border-color: transparent;
border-style: groove;
background-color: transparent;
}
.friends { /*box*/
border-width: thin;
border-color: white;
border-style: groove;
background-color: transparent;
}
.blogsreviews { /*box*/
border-width: thin;
border-color: white;
border-style: groove;
background-color: transparent;
}
.videos { /*box*/
border-width: thin;
border-color: white;
border-style: groove;
background-color: transparent;
}
.testimonialscomments { /*box*/
border-width: thick;
border-color: transparent;
border-style: groove;
background-color: #ffffcc;
}
.moreabout { /*box*/
border-width: thin;
border-color: transparent;
border-style: groove;
background-color: transparent;
}
.fanof { /*box*/
border-width: thin;
border-color: transparent;
border-style: none;
background-color: transparent;
}
.groups { /*box*/
border-width: thin;
border-color: white;
border-style: groove;
background-color: transparent;
}
.testimonials { /*box*/
border-width: thin;
border-color: transparent;
border-style: groove;
background-color: transparent;
}
.scrapbook { /*box*/
border-width: thin;
border-color: transparent;
border-style: none;
background-color: transparent;
}
.myfans { /*box*/
border-width: thin;
border-color: transparent;
border-style: none;
background-color: transparent;
}
.reviews { /*box*/
border-width: thin;
border-color: transparent;
border-style: none;
background-color: transparent;
}
.blogs { /*box*/
border-width: thin;
border-color: transparent;
border-style: none;
background-color: transparent;
}
/*control panel*/
.controlpanel .imgblock200 { /*primary photo border*/
border-color: transparent;
border-style: none;
}
.data { /*data answers*/
font-family: "Times New Roman";
color: white;
text-transform: none;
}
.controlpanel .q { /*data labels*/
font-family: "Times New Roman";
color: white;
text-transform: none;
}
.data a { /*data links*/
font-family: "Times New Roman";
color: white;
text-transform: none;
}
a.more { /*more about link*/
font-family: "Times New Roman";
color: white;
text-transform: none;
}
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited { /*buttons*/
color: #FFFF99;
border-color: transparent;
border-style: ridge;
background-color: transparent;
}
#controlPanelButtons a:hover { /*buttons hover*/
color: white;
border-color: white;
background-color: transparent;
}

Note:

  • Currently, I only have that main box (don’t know the name…), Friends box, Groups box, Photo Gallery box, More About Me box, and Testimonials box in my Friendster Profile.
  • I have tried the code in IE (Internet Explorer) 6.0, FF (FIrefox) 2.0.0.14-fc7, Konqueror, and IE4Linux. It worked best at IE 6.0 and FF.
  • Suggestions and comments are very welcomed :)
  • Personally, I prefer the Times New Roman to be Georgia and the Arial to be Arial Black. However, those only work at IE…