How to get Header images in a Friendster Layout

Friendster Website Tutorials | Submited Apr 30, 2008

Written by: John

What you'll need

1. some good basic skills in css because I'm not going to show you how to code the layout there.. at least not now
2. a free host (or paid) that will allow you to host a .css file.. I believe google pages allows this, along with geocities.

you can use the Friendster Profile Generator here to get the basic customization down, and then heres the other CSS classes that you can modify and add to your stylesheet

To hide the language selector

#navLang {display:none!important;}

To customize the Shoutbox

#cpShoutoutBox {background:red; color:black;}

To customize the Recent Updates box

.user_tracker {background:red; color:black;}

Messages | Settings | Help | Log out above the nav in the right corner

#subnav a:link, #subnav a:active, #subnav a:visited {color:black;}
#subnav a:hover {color:red;}

To customize the Navigation Bar

What I've been doing is putting all of these selectors before the selectors for the contact links..

#mainnav, #mainnav ul li ul, #mainnav .left, #mainnav .right, #mainnav a,
#mainnav a:link, #mainnav a:visited, #mainnav a:active {background:red; color:black;}
#mainnav a:hover {background:black; color:red;}

To add the Header Image

Only edit the url to your image, and the padding-top number to the height plus 20 pixels of your image. So if your image is 200 pixels in height, make the padding top 220px

#navigation {height: 50px !important; position: relative !important; margin: 0; padding-top:220px !important; background-image:url("URL_TO_IMAGE") !important; background-repeat:no-repeat !important; background-position:center center !important; }

Once you get all of theses codes added to your style sheet (what goes between your Style Tags) you'll have to open up a test editor, notepad will work just fine and paste all your CSS codes in there, your style sheet. Save that file as friendsterLayout.css, and upload it to your hosting site, this is where geocities, or google pages comes into action. Once you have that file hosted, check to make sure its there, by going to its url in your browser. Once your stylesheet loads you know you got it there correctly, so copy the url to that CSS file, and put it in the code below. This code can then go into your about me, or media section on friendster to work.

<style type="text/css">@import"URL_TO_YOUR_STYLESHEET";</style>

I know a lot of people say this way was suppose to be done with javascript, and yes you can do it that way but its doing the same exact thing. Embeding an external stylesheet into the page. @import works just as good though, and actually should load faster then the javascript version.


If you liked this tutorial and it helped you, help support us by linking back to Skem9

<a href="http://www.skem9.com" title="Friendster Layouts"><img src="http://c.myspace.com/Groups/00011/26/79/11539762_l.gif" alt="Skem9.com Friendster Layouts" title="Friendster Layouts, and Generators" /></a>