tutorial on how to make crossover layouts=)

Note: This tutorial was already posted but got deleted. So, I asked permission from my ate if I could post it again, for the sake of those who needs it. Fortunately, he approved so I can post this again for the newbies!

To the mods: You can move, edit and delete this thread at any time.

Credits go to:
friendster master....
my teacher in comp mr. noel pastor


Before we start, I just wanted to let you know that you don't need any knowledge about JS to make Cross-Overs, but you may need to know a little bit about CSS. You don''t need to download any software, you can make all the Cross-Overs you want just being on the net.


What you need:

An Internet Connection
Lots of imagination

OK, let's start:

First, go to http://friendstertutorials.com/?page_id=48... Friendster-Gens.com has been moved here. Thanks to our commentors!

Note: Sometimes, a lot of people have been using this site so it gets really busy, that's why there are times that when you click the link, you experience an error. It's normal. Just wait for it, understood? Ahaha, I feel like a teacher...

500){this.width=500}" src="http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot1.jpg" width="500">

Choose the Crossover Gwnerator on the Navigation on the top of the page.
This is where the fun starts:

500){this.width=500}" src="http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot2.jpg" width="500">

You can fill in all the fields but you can also leave some blank if you don't like that feature.

To the newbies, I'll explain what every field is and it's features:

PAGE BACKGROUND This will be the background of your page.

PAGE CURSOR This will be your page's cursor.

PAGE SCROLLBARS Here, you can customize your scrollbars.

PAGE BORDER This is self-explanatory.

GLOBAL TEXTS The font color, font size and design of your text.

GLOBAL LINK You can customize the link and what it will look like.

GLOBAL LINK: HOVER This is what your link will look like when you hover around it.

MASTER BOXES
MASTER HEADERS
MASTER BOXES: BULLETS Here you can change all the content boxes & master headers (Name's Friends, name's Comments etc.) at the same time - whatever styles you choose below will be applied to every single module box on your Friendster profile like the Photo Gallery, More About Me, My Blogs, My Testimonials, etc. The master bullet is the tiny image beside your profile's details.

CONTROL PANEL: BOX
CONTROL PANEL: USER PHOTO
CONTROL PANEL: DATA
CONTROL PANEL: BUTTONS
CONTROL PANEL: BUTTONS HOVER This is the main box at the top of your profile - the one with the large photo of you, your data (Profile Views, Location, Hometown, Company, Your URL, etc) and the control panel buttons (Send Message, Send a Smile, Add Testimonial, etc.)

MISC: SMALL PHOTOS
MISC: SMALL PHOTO NAMES In the Misc section you'll find the styles for the small photo thumbnails (in 'My Friends' and 'My Testimonials'), the names below the small photo thumbnails and also for the global 'View All'-links.

PERSONALIZED BANNER/HEADER Your personalized banner will appear on top of your profile. Size of the banner is 810x310.

NAVIGATION LINKS Your navigation is consists of Home, My profile, My Connection etc. This will change the color of your navigation links.

SHOUT-OUT BOX
This will change the font color of your shoutbox. Background is set to transparent.

RECENT UPDATE BOX Recent update box is located in your Control panel below your personal details.

TITLE BAR
STATUS BAR Title Bar and Status Bar will be replaced with your own message. Do not use apostrophe ( ' ).

Before we proceed, you need to make a banner, right? Here's how:
Go to MS Paint.

500){this.width=500}" src="http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot4.png" width="500">

Design your banner anyway you want it. After that, save it and upload it to http://www.tinypic.com

500){this.width=500}" src="http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot5.png" width="500">

After uploading, get the direct link and paste it in the PERSONALIZED BANNER/HEADER field.

500){this.width=500}" src="http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot6.jpg" width="500">

After you've filled it all up, click "Generate Layout Code!"

500){this.width=500}" src="http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot3.jpg" width="500">

It will redirect you to another page, showing the CSS codes of your layout.

500){this.width=500}" src="http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot7.jpg" width="500">

But we are not done yet...

Copy the CSS codes and paste it in notepad or any other Simple Text Editor Program:

500){this.width=500}" src="http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot8.jpg" width="500">

Name it and put ".css" on the end.

500){this.width=500}" src="http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot9.jpg" width="500">

Register at any free web hosting that supports CSS, JS or HTML [Recommended: http://www.ripway.com] and upload your file. If you are already registered, just log in.

500){this.width=500}" src="http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot10.jpg" width="500">


EDIT: Here's the latest linker since a lot of people have been PMing me about this. Please, don't be too demanding, I'm kinda busy. Hope this helps.

Click the Spoiler to see the Latest CSS Linker:

Code:

Things you need to see:
No need to edit anything here. This is the Latest Linker as of June 6, 2008.
You see that 'URL OF CSS' part? Change it to, well, the Direct Link of your CSS file.

Note: Do not paste the direct link below the CSS codes where it says, "Paste CSS URL here". It does not work since it is not the latest linker.

After you have pasted the URL of your CSS in the linker, paste it in your Media Box, and you're done!

Hope this helped the newbies out there! I made it very clear for everyone to understand. If the layout is not working, FS probably updated again...
If you still can't understand, PM me... or just comment me at FS sweetfairy_baby09@yahoo.com =)
hope this helps