Basic Friendster Customisation

Picture Effects (hover etc)

Say for example you have a link that you want to give a background-image to.

<a href="home.html">Home</a>

You need to give it a class or ID so you can target it:

<a href="home.html" class="navlink">Home</a>

Then in your CSS you add the following:

a.navlink {
display: block;
height: 50px;
width: 150px;
}

This sets it up for a background-image. Obviously you set the width and height to that of your image.

Then you add the background-image code:

a.navlink {
display: block;
height: 50px;
width: 150px;
background: #fff url(path/to/image/image.gif) no-repeat;
}

this will add the image to it.

Then, once you have the hover image (created in something like Photoshop or the Gimp) you add the :hover rule:

a.navlink:hover {
background: #fff url(path/to/image/image_hover.gif) no-repeat;
}

and you're done!

Background Images

All of the following must be placed within the body section of your css, e.g.:

body {
background-image: url(your-image-here.jpg);
}

To tile backgrounds:

background-repeat: repeat; (this is the default behaviour for backgrounds).

To stop the background tiling:

background-repeat: no-repeat;

To stop tiling and place the background image in the center:

background-repeat: no-repeat;
background-position: center center;

To fix the background so it stays in place when scrolling:

background-attachment: fixed;

To resize the image

This cannot be done with CSS, it must be achieved with an image-editing application such as Paint Shop Pro, Photoshop or the Gimp.

Transparent Backgrounds

(Hugo)

If you wish all your backgrounds and box borders to be transparent on your profile then please follow these instructions:

N.B This code will remove all images and background colors plus box borders, only allowing for a background on the main body of the page. Uploaded photos should be unaffected by this code.

On your profile page click on >Edit Profile<

Now on your edit profile page click on >Customize< which is the second tab from the left at the top of the profile box.

Now on the customize page look for the second text box down which has the title "Advanced users: Personalize your profile with CSS"

In the text entry box you need to add these lines exactly as they are written here while being careful to ensure that any other code in that box is not disturbed.

This code gives transparent backgrounds to all boxes and borders.

  
body #container *  
{  
background-color:transparent;  
background-image:none;  
border:none;  
}

This code will give transparent boxes plus bold and coloured text and coloured borders:

body #container * {
font-weight: bold;
color:blue;
background-color:transparent;
border-color:green;
}

Substitute your choice of colour for the examples shown.

It is important that these bits of code are cut and pasted to your box exactly as seen.

If you have other code in that box these bits of code must start after one of these symbols } and before another bit of code starts.

It would probably be best to insert this code right at the end of any other bits of code in the box.

When finished click on save at the bottom and then you should be able to view your profile with backgrounds removed.

Please read these instructions along with the more detailed instructions that cover adding a body background to your profile in this topic

http://www.csscreator.com/css-forum/ftopic12532.html

If you are looking for backgrounds Please don't ask us as this is not a service we are able to provide, you will need to create those in a graphics programme such as Photoshop, Paint Shop Pro, Fireworks or similar.

However there are many sites on the internet that can provide web page backgrounds which are free to use. If you click on the link bellow you will find a listing of a few that should get you started.

http://www.google.co.uk/search?q=%22web+page+backgrounds%22

Contrary to popular belief perhaps, the members of this forum are not friendster members and we do not understand the finer detail of how this customization is set up with friendster. We exist to help with matters relating to the coding of web pages rather than a web sites proprietary site system which is unique to itself.

That having been said we are happy to help if asked a straightforward question and in this case we have endeavored to go one step further in helping you on this matter.

Please read my instructions carefully and have a go at doing this, it should work for you.

Bear in mind that the code I posted is a general bit of code that removes all the backgrounds and borders as well as the background images to the title bars, I have done it this way as I cannot know specifically what parts of a page someone might want to be transparent.

If you wish another part to be transparent rather than all of it you will need to identify which part by it's name in the code of the page.

This will involve right clicking on the page and selecting view source and looking for the right section which will have a name something similar to this:

this name then needs to substituted for my code thusly:

body #container .left_column {background:transparent;}

This wont be easy I realise but it's a matter of you identifying the section of code that refers to the box you want made transparent and inserting it's name in the code I've demonstrated you may have to go through a process of trial and error to find the right section name.

Sadly this is not really something we can do for you given the closed nature of the friendster site.

test

test 2

how can i set the image to fit the whole page? even if i change my pixels....

http://img247.imageshack.us/img247/1229/malmsteen1iv5.png

Cool pic of Yngwie but ... uhh, was there a questions somewhere in there? :?

Sweet mother of Jesus, I though putting all the tutorials in one place would mean people would read them.

Like I already wrote UP THERE,

This cannot be done with CSS, it must be achieved with an image-editing application such as Paint Shop Pro, Photoshop or the Gimp.

Try actually engaging your brain before posting.