Friendster Tips

How To Customize your Profile with CSS Editor... :)

Friendster was well known from its social networking sites that gives the member to associated with another member in the friendster, however you know it, or not...
In friendster itself many people can attract his friends or make a new friends in addition, they can stay connected, or to make business friends too!! woow.... :)

In Friendster, we can also customize our profile with CSS as easy as a beginner can and as free as the admin of a website can. So, we can change our background easily so we can show it to our friend or even your girl/boy friend, that we have good profile so they can come to our profile in a good mood as they can see with our good profile too... :)
But, many friendstar are acknowledge with the css code, and just choose to copy-paste the code that they get from the internet... Yeaahh.. many of them do that.... But, for you who wants an unique profile, made by your creativity, and absolutely original, but you can't customize your CSS code, how can you do that... ?? :t
Hohoho... i'm here to answer the question... ^^


But, before we step on the CSS code, let's see what we need to do for making a good profile layout.... :)

1. A good profile usually be meaned by a profile that is not-sucking eyes as we see the profile. So, be remember with what colors we put on our profile that is suit from the background image. . . Yeass... that is the main point to do that.. So, all we need is just to make the font colors are contrast with your background image,,for example, a white text colors for a black background. . . yeah just it... :) In that way, we can make our visitor to see our profile well, without eyeatche seeing our invisible font colors or even the running eyes because the text was so hard to be read.... :)

2. A good profile should loaded fast. Hmmm.. yeah it's true, so many my friends is complained with the-much media that've been put on the profile.. It's because not all people can touch the fast internet that can load it fastly or many people worry bout their limited bandwidth that will be loose because load your page.. So, the thing you must do is simple,, just make the background image size smaller, by converting it to smaller one by an application e.g. ACDSee... Or just make the resolution smaller,, smaller the resolution,smaller the size... :), next, don't put so many media, such as slide show photo in your profile, a video player, an flash video (swf.) or an plugin or widget to play your fave music.... the more you put it, the slower the visitor can open your page, and the poorer for the limited bandwidth user... :-p

3. As can u can, do not block the access for the visitor to open your page,, it just would make them to not too interested with your profile, and who can guess if there are a bunch of girl you interested in open your page or a business vendor wanna take you a job,, huh?? :)

Well... That is the first point to learn. . . let's see the main point . . :)

The CSS code was designed to cut the long code of the HTML code so it an be easily edited or viewed . . . CSS also can be use to show a style from a HTML content with cooler way. . . :) All web developer can use CSS to be written on their sites. . .
To put a CSS code in your html code just use the code . . . But in the Friendster customization page, there are a box that specially made to put the user's css code (go to customize profile --> customize page...)
Here are the code we get for the css example. . .


/* PROFILE BACKGROUND */ ------------> The css code itself had been made with a small description, so that, you can know what would you edit . . . :)
body { background-image:url(http://www.MyPhoto.com/myphoto.jpg); ----> this is the place u can put an image you have upload somewhere and get its url background
background-attachment:fixed; --> the style of your background, is it fixed (that mean your background wouldn't move as you scrolled down) or repeated (your background will follow the scrolling you've made)
background-position:center; ----------> the position of your background, an be enter, an be top right, an be right, or what else. . . .
background-repeat:repeat; -----------> the way your background repeated, choose repeat x to repeat right to left, or repeat y to repeat up t bottom
background-color:transparent; }-----------> the background's colors without the image.. . . started with # and followed with 6-character color codes e.g. #000000

/* GLOBAL FONTS */ ----> the fonts that mainly used in your profile
.usercontent { font-family:Arial, Geneva, Helvetica, sans-serif; --------> font type you can choose from Arial, Times New Roman, Verdana, and Trechebuchet
color:#ffffff; } -----> The font colors

/* GLOBAL LINKS */ -----> The text link that is shown in your profile
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:active { text-decoration:none; -----> Design of the text, you can choose underline,none,etc.
color:#ffffff; } - ------> links unmoused color
.data a, a.more, .commonbox .viewall { font-family:Verdana, Arial, Helvetica, sans-serif; color:#ffffff; text-transform:lowercase; }
.usercontent a:hover ------> the change when the mouse stop on the link spot
{ text-decoration:underline; color:#ffffff; }

/* GLOBAL HEADERS */ ----> the headers on your profile, e.g. "comments" header
.commonbox h1, .commonbox h2 { font-family:Georgia, Times New Roman, Times, serif; color:#ff0000;
background-color:transparent; }-----> The background colors of your header, can be colored, can be transparent.

/* GLOBAL BOXES */-----> the box above the comment box
.commonbox { border-width:2px; ---> the border width, can be filled from 2px-7px
border-color:#ff0000;
border-style:solid; -------> The style of the border that appears on the global box,, such us dotted,solid,etc.
background-color:transparent; } -----> bakground colors of the global boxes, if you want your bakgroun image to be shown, just filled it with transparent . . .

/* TESTIMONIALS EVEN ROW */------------->>Testimonial /comments box customization. We can fill the comment box the different colors from the global box here..
.commonbox .evenrow { background-color:#ff0000; }

/* PRIMARY PHOTO BORDER */
.controlpanel .imgblock200 { border-color:#424d61; }

/* DATA / LABELS */
.data, .controlpanel .q { color:#ffffff; }

/* BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited { font-family:Georgia, Times New Roman, Times, serif; color:#ffffff; border-color:#ff0000; background-color:transparent; }
#controlPanelButtons a:hover { border-color:#999999; background-color:transparent; }

/* FRIENDS NAME BG */
.commonbox .dr { background-color:#ffffff; }

Colors Code can be found Here

Okay... That's all of the description from me... There some not described well because it has been described....

Still confused??If you have Question, just post it in the comment box... :)