I know that some people s still having a hard time in making a Basic CSS Layout, so here, I made a tutorial for you on how to make a Basic CSS Layout. If you want to post this on other forums, sites, etc, please quote us in the name of Fantasies No More, with our URL - http://fantasiesnomore.blogspot.com or just post this URL to your post-http://fantasiesnomore.blogspot.com/2008/12/how-to-make-basic-css-layout-friendster.html which is recommended. All [+] are the screenshots for better understanding. Do not plagiarize this tutorial. If you caught one, contact me at yap_betina@yahoo.com
Thanks.

How to Make a Simple CSS Layout

1. Get a background from Photobucket, Tinypic or any image hosting sites. If you want you can upload your own. Then get the Direct Link code of it. (in Photobucket, it is called Direct Link Code)

2. Click for the editor of CSS Layout. This is where you can generate your layout.

Explanation:

Profile Background: (as what is stated. Backgrounds, etc.)
Color: Well, the color of your background.
Image:
URL: Well, paste the Direct Link Code here.
Position: The position of your background image.
Repeat: Tells if you want it to be repeated or not in the screen.
Attachment: Well, do you want your image to be fixed or scrolled? Fixed means it will not move while scrolling, scroll means the image will move while you are scrolling the profile.

Global Fonts: (like Favorite Music, Hometown, etc.)
Font Set: Well, the font to be used in your profile. Default- Arial.
Text: Where you can pick the color of your global fonts.
Text Transform: Where you can set whether you want it to be capitalized, etc.

Global Links: (appearance of all the links)
Font Set: Like in Global Fonts. The font to be used. default- Arial.
Link: Where you can pick the color of the links when not hovered.
Text Decoration: Where you can set whether you want it to be underlined, overlined, strikethrough, or nothing.
Text Transform: Where you can set whether you want it to be capitalized, etc.
Link Hover: The appearance of the link when hovered.
Text Decoration: Where you can set whether you want it to be underlined, etc. when hovered.

Global Headers: (appearance of the headers: like More About ____, Comments, etc.)
Font Set: The font to be used. Default- Arial.
Headers: Where you can pick the color of the text of the headers.
Text Transform: Where you can set whether you want it to be capitalized, etc.
BG Color: The color of the BG (background) of the headers.

Global Boxes: (appearance of the boxes)
BG Color: Background color of the boxes.
Border: The color of the border of the boxes.
Width: Where you can set the size of the border according to pixels. (set this or else your border will not be seen!)
Style: The style of the border. Can be solid, dotted, dashed, etc.
Testimonials Even Row BG Color: Where you can pick the color of the alternate comments.

Control Panel Buttons: (the color of the buttons like: Add as Friend, Add Comment, etc.)
Font Set: Where you can set the font. Default- Arial.
Buttons Text: The color of the link of the buttons when not hovered.
Buttons BG: The color of the background of the buttons when not hovered.
Buttons Border: The color of the border of the buttons when not hovered.
Style: Where you can set the style of the border like solid, dotted, dashed, etc.)
Buttons Text (Hover): The color of the text (link) when hovered.
Buttons BG (Hover): The color of the background of the buttons when hovered.
Buttons Border (Hover): The color of the border of the buttons when hovered.

Misc: (miscellaneous styles)
Primary Photo Border: Color of the border of your primary border.
Style: The style of the border like solid, dotted, dashed, etc.
Data Labels or Text: The color of the data labels or text.
Text Transform: Where you can set the text to capitalized, etc.
Photo Blocks BG Color: The color of the background of the photo blocks.
Photo Blocks Border: Color of the border of the photo blocks.
Width: The size of the border according to pixels. (do not forget to set this or else your border will not be seen!)
Style: Style of the border- dashed, solid, dotted, etc.
Friend's Name BG Color: The color of the background of the Friend's Name in Friend's box.

3. Click Generate CSS Code. A code will appear on the text area. [+]

4. Not sure about the appearance? Click Preview Layout to see the appearance of the layout. This can help to correct errors in your layout. [+]

5. If you are sure already, you can copy the CSS code found in the text area. [+]

6. Log in to your Friendster account (http://www.friendster.com). Then you'll see a drop-down list box, with text 'More' [+], right? Click the drop-down arrow then choose Customize Profile. [+]

7. Scroll down and you will see the text Customize CSS, right? [+] With the text area below. Now, paste the CSS Code there. [+]

8. Then click Save on the bottom of the page. [+]

9. When you waited it to load, and when you see the word Success!, then preview your profile by clicking 'View Your Profile Now'. [+]

10. And you're done! I hope you learned from my tutorial. =)

If there's a problem regarding this tutorial, just comment on this post. Thank you.

Labels: