Friendster Editor Tutorial

Through this page I will explain step by step on how to use the profile editor.

We will begin with the profile background.

Through the editor you can change the color of your profile’s background or add a picture as your profile’s background. To add a picture, first you must upload a picture from your computer, so make sure you have a copy of the picture in your computer. To upload the picture, click on the link which is labeled as 1. You will be led to imageshack.us.

Read the instructions on that page on how to upload an image. When you have uploaded a picture, you will be led to another page which displays the links to your image.

Scroll down the page to find the “direct link to image” which is labeled as 1 in the above diagram. Copy the link provided and paste it in the url box which is labeled as 5 in first diagram. The item labeled 2 in the first diagram allows you to position your image whether in the center, top and so on. The repeat section gives you the option to repeat your image several times to fill your background and the attachment section gives you the option to fix your image to your background or to allow it to scroll.

Now we will move on to the Global fonts section:

This section allows you to customize the fonts on the section “more about you” in your profile. You can change the font’s color, the set and even the casing.

Global Links:

This section allows you to customize the links in your profile. U can choose different colors when your mouse hovers a link and when not. You can also choose your text decoration as underlined,over lined(a line on top your text) or stroked through.

Global Headers:

This section allows you to customize the headers in your profile

Example of an header in a profile:

Global Boxes:

This section allows you to customize the boxes behind your texts as shown by the red arrows in the diagram below. You can customize its background color and border color. If you do not want any background color, you can make the boxes transparent. The thickness and the style of the borders can be customized too. Besides that, you can choose the background color of your testimonials which are on even rows. The testimonials on the odd rows will automatically assume the color set for global boxes.

Control Panel:

This section helps you to customize your control panel as labeled in the diagram below.

Misc:

The above section allows you to customize other miscellaneous items in your profile.

After choosing all the preferred values, click the “generate Css code” button. Then click the “preview layout” to see how your profile would look. If you are satisfied, copy the generated code and paste it in the customize CSS in your friendster profile. If you are not satisfied, return back to the editor, change the values and then click ‘generate’ again.

Refer the diagrams below on what to copy and where to paste if you are not sure.

Click Customize

4. Scroll down the page to find “Customize CSS” and paste the copied code there.

Hopefully this tutorial serves its purpose. Enjoy using our editor and please feel free to drop in any comments or suggestions to improve this site. Please also help to promote this site to your friends. Thanks.