friendsterTalk - Friendster Forum

Certainly, the default templates of the Friendster Blogs layouts are becoming really boring. We see the same layout/style on everyone's blogs that the blog itself seems not so interesting at all.

So, wanna add some spice to your Friendster Blog? Wanna customize the images and text settings? Wanna Pimp-yo-Blog? Then read on...

This is tutorial is for those who are interested in knowing how to 'pimp' his/her Friendster Blog. This tutorial involves the manipulation of CSS Codes. For beginners (who only have a little background about CSS), dont worry, ill try my best to simplify the codes so it would be easier for you. For the experienced, this tut is a piece of cake, really.

-> First thing you have to do is to download this css file (CLICK HERE). It contains the 'hidden' Friendster Blog CSS codes that I had already modified and simplified.

-> You need to change your Blog Template Style to Beckett, since the codes i have is specially for that Template Style. This is to insure that the codes will work properly.
After you are done downloading the file, open it with Notepad. To further explain those codes, Ill just go through the codes one by one in here. Ikuze! let's start...

      Part 1 - Code Explaination

code: Global Text and Links Settings
- That code is for tweaking the default global texts and links settings of your blog. I only included the basic settings like font-styles, size, and color, but you can also include other options like text-align, text-weight, etc. Just experiment on the codes.

code: Custom Background Image And Color
- That code is used for putting up your own custom background image for your blog. You can also set the background color, background attachment, as well as repeat properties.

code: Top Banner Custom Background Image
- This block of code is used for putting up your own Blog Banner on the top of your page. My recommended width and height dimensions for the banner is 760 and 150 pixels, respectively. I suggest you dont go beyond those dimensions to avoid messing up the layout of the banner. You dont have to touch the padding settings.

code: Custom Foreground Image
- The foreground image is the one that serves as the 'container' for the blog's posts and modules. My recommended dimension for the width of the image is 780 pixels, and as for the height, its practically unlimited, since it wont mess up the layout anyway. Just dont touch the repeat-y property of the foreground image.

code: Post Title Text Settings
- Its used for setting up the title of your posts.

code: Hide User Photo from the Top Banner
- The little user photo on the banner can be quite annoying and isnt really necessary at all, so we might as well remove it there.

code: Hide the Top Banner Texts (Blog Name and Catchphrase)
- Ok, i strongly suggest we hide the name and the catchphrase texts on the banner as well, since it will look rather messy when it overlaps with your banner image.

code: Hide All Ads (Except Friendster Footer Nav)
- There you go.. Say goodbye to all Friendster Blog and Google Ads. But I decided not to remove the footer, to at least respect the Friendster Terms of Service. A little block of cute links on the bottom of your page wont hurt anyway.

code: Footer Nav Settings
- Used to tweak the settings of the cute Friendster related links on the bottom of your page.

code: Module Header Custom Background Image and Text Settings
- Some examples of Friendster Blog Modules are: Recent Posts, Recent Comments, Calendar, About, Categories, Archives, Etc.. You can set their text properties as well as the background image using this block of code. The recommended default dimension for the bg image for the module header is 800x150 pixels.

code: Module Content Text and Background Color Settings
- Used to tweak the default text and background colors of the module contents.

code: Module Content Custom Bullet Image
- You can also change the bullets used in lists on the module contents of your blog by using this code.

There are actually still a lot of Blog Tweak codes out there, like the custom scrollbar colors, custom cursor, etc. They arent that hard to find.

     Part 2 - Where to place the codes?

You actually have two ways on how to make the codes work:

-> For beginners: Select all the codes (ctrl+a), then copy and paste them into your Blog description/catchphrase box. Make sure you include the <style></style> tags before and after all the codes. For example:

<style>
// a block of code here
// blah blah blah

// another block of code here
// another blah blah blah

// another here
// blah
</style>

Save your settings. Republish your blog. That's it.

-> For Advance Users: You can save my text file as '.css' then upload it to a web host site (Recommended: FreeWebs.com). Then use this code below:

<link rel="stylesheet" type="text/css" href="URL_OF_THE_CSS_FILE_HERE">

and paste it into your Blog description/catchphrase box. Save your settings. Republish your Blog. Your Done.

There you have it. Congratulations on newly pimped Friendster Blog! Check out mine for a sample preview: CLICK

By the way, this is my own version of this tutorial. As you might have noticed, the codes I have are more or less similar to those of Sir Slasher-X's Blog Tweak Codes. Well, Of course they are quite similar, since we both got the CSS codes from the same sources:
- theme-beckett.css
- common.css

Please feel free to post some of your questions, cuz i might have forgotten something important or watever, so i could edit this tut. And uhm, pls dont remove the credits. Thanks.

Last edited by FoRsAkEnKiD (2007-04-25 08:06:44)