[align=center][i][b]Note:[/b] This tutorial was already posted but got deleted. So, I asked permission from Sir eehjhay if I could post it again, for the sake of those who needs it. Fortunately, he ap
You are viewing a post by ♥brains&beauty♥. View all 606 posts in [align=center][i][b]Note:[/b] This tutorial was already posted but got deleted. So, I asked permission from Sir eehjhay if I could post it again, for the sake of those who needs it. Fortunately, he ap.
2008-05-13 00:22:30
- ♥brains&beauty♥
- » FTalkManiac
626
0
1969-12-31
[align=center][i][b]Note:[/b] This tutorial was already posted but got deleted. So, I asked permission from Sir eehjhay if I could post it again, for the sake of those who needs it. Fortunately, he ap
[align=center][i][b]Note:[/b] This tutorial was already posted but got deleted. So, I asked permission from Sir eehjhay 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! 
Originally, these are called [b]Navigational CSS Layouts, not Cross-Over[/b]. But since many people call it that way, I decided to name it as it is. 
[/i]
[i][b]To the mods[/b]: You can move, edit and delete this thread at any time. [/i]
[b]Credits go to[/b]:
[i]Sir eehjhay [for allowing me to post this]
Ms. switpotato [I got the idea from her]
Friendster Master
Yahoo! Answers
Photobucket
Ripway & Stormpages
Friendster-Tutorials.com
ETC.
[/i]
[i] [b]FAQ[/b]:
[b]
[Click Spoiler][/i][/b]
[spoiler]Q: It doesn't work! Please, please help me!
A: It does work. Check your codes, or press F5/Refresh when it doesn't work. You can also check if the linker updated again.
Q: How did you make your banner?
A: I used Photoshop. Try downloading it on Google.
P.S.
By downloading it, I meant the FREE TRIAL, not the torrent. [b]NO TO PIRACY[/b] 
Q: Where is the Underground Section?
A: Click [url=http://theftalk.com/f5-Friendster-Underground.html/]here[/url].
Q: What is JS and what is CSS?
A: Refer [url=http://theftalk.com/t23618-Confusing-words-or-terms-for-Newbies..html/]here[/url].
Q: How do you make the boxes transparent?
A: Type in the boxes "transparent".
Q: The screenshots are too small, how can I make them bigger?
A: Right-Click on the image then choose "View Image" and you will see a bigger and better version of the screenshot.
Q: Can you make me a layout?
A: I'm busy right now. Maybe you can ask all the lay-makers out there.
Q: Ripway is down. What do I do?
A: Ripway is not the only site out there. You can use stormpages, geocities, etc.[/spoiler]
[i] [b]RULES[/b]:
[b]
[Click Spoiler][/i][/b]
[spoiler]1. No spamming/flaming on my thread.
2. Try to stay on-topic. If you have a question related to this, just post it here.
3. As much as possible, avoid double-posting. 
4. [b]You can't post this tutorial in another site without my permission[/b]. 
5. And, if you're a newbie, read the main rules. 
[/spoiler]
Before we start, I just wanted to let you know that you [b]don't need any knowledge about JS[/b] to make Cross-Overs, but you may [b]need to know a little bit about CSS[/b]. You [b]don't need to download[/b] any software, you can make all the Cross-Overs/Navigational CSS Lays you want just [b]being on the net[/b].
[b]
[i]What you need[/i][/b]:
An Internet Connection
Lots of imagination
OK, let's start:
First, click the link below. It will take you an External CSS Generator made by [b]Angel[/b].
[url]http://friendstertutorials.com/generators/external-css/[/url]
[quote][i][b]Note[/b]: 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, it will be back soon.[/i][/quote]
Once you've clicked on the link, you will see a page that looks like this. 
For your convenience, they updated it and put in options so you won't have to look for Hex Colors anymore.
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/Screenshot1.gif[/img]
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/Screenshot2.gif[/img]
[quote][i][b]Note[/b]: You can fill in all the fields but you can also leave some blank if you don't like that feature.[/i][/quote]
[i][b]
To the newbies, I'll explain what every field is and it's features:[/b][/i]
[b]
[i][Click Spoiler][/i][/b]
[spoiler][b]PAGE BACKGROUND[/b] This will be the background of your page.
[b]PAGE CURSOR[/b] This will be your page's cursor.
[b]PAGE SCROLLBARS[/b] Here, you can customize your scrollbars.
[b]PAGE BORDER[/b] This is the border of the page itself.
[b]GLOBAL TEXTS[/b] The font color, font size and design of your text.
[b]GLOBAL LINK[/b] You can customize the link and what it will look like.
[b]GLOBAL LINK: HOVER[/b] This is what your link will look like when you hover around it.
[b]MASTER BOXES
MASTER HEADERS
MASTER BOXES: BULLETS[/b] 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.
[b]CONTROL PANEL: BOX
CONTROL PANEL: USER PHOTO
CONTROL PANEL: DATA
CONTROL PANEL: BUTTONS
CONTROL PANEL: BUTTONS HOVER[/b] 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.)
[b]MISC: SMALL PHOTOS
MISC: SMALL PHOTO NAMES[/b] 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.
[b]PERSONALIZED BANNER/HEADER[/b] Your personalized banner will appear on top of your profile. Size of the banner is 810x310.
[b]NAVIGATION LINKS[/b] Your navigation is consists of Home, My profile, My Connection etc. This will change the color of your navigation links.
[b]SHOUT-OUT BOX[/b]
This will change the font color of your shoutbox. Background is set to transparent.
[b]RECENT UPDATE BOX[/b] Recent update box is located in your Control panel below your personal details.
[b]TITLE BAR
STATUS BAR[/b] Title Bar and Status Bar will be replaced with your own message. Do not use apostrophe ( ' ).[/spoiler]
Now, we make the banner. If you're a newbie, no prob! I've included a Newbie Guide on how to make banners the easy way.
[b]For the Newbies:[/b]
[spoiler]Go to MS Paint.
[img]http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot4.png[/img]
Design your banner anyway you want it. After that, save it and upload it to [url]http://www.tinypic.com[/url]
[img]http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot5.png[/img]
After uploading, get the direct link and paste it in the [b]PERSONALIZED BANNER/HEADER[/b] field.
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/Screenshot4.gif[/img][/spoiler]
[b]For Advanced Users:[/b]
[spoiler]You can use Photoshop, Photoscape or any other program like this. Set the width to 810px and the height to 310px. And the same with the Newbie Guide, upload it to Photobucket and get the direct link to put it in the PERSONALIZED BANNER/HEADER FIELD.[/spoiler]
After you've filled it all up, click "[b]Generate Layout Code![/b]"
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/Screenshot3.gif[/img]
It will redirect you to another page, showing the CSS codes of your layout.
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/Screenshot5.gif[/img]
Copy the CSS codes and paste it in [b]Notepad[/b] or any [b]other Simple Text Editor Program[/b]. Name it and put a "[b].css[/b]" on the end.
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot6.gif[/img]
Register at any free web hosting that supports CSS, JS or HTML
If you are already registered, just log in. [I use Ripway]
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot7.gif[/img]
Click on [b]"My Files[/b]" then "[b]Upload Files[/b]".
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot8.gif[/img]
Now, look for your file. Once you've found it, click "[b]Upload[/b]".
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot9.gif[/img]
Once the uploading is finished, click "[b]Return to My Files[/b]".
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot10.gif[/img]
Look for your file then Copy the Direct Link and paste it in the Latest Linker.
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot11.gif[/img]
[i][b]Note:[/b] There's a temporary linker that you could use. The permanent linkers are being thought of. Just go to the Underground Section and look for the sticky topic with the said title.[/i]
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... Or scroll up and check the FAQ.
If you still can't understand, PM me...
Comments and +Repu's are [u][b]highly appreciated[/b][/u]. Thanks for reading my Tutorial! [/align]
Originally, these are called [b]Navigational CSS Layouts, not Cross-Over[/b]. But since many people call it that way, I decided to name it as it is. [/i]
[i][b]To the mods[/b]: You can move, edit and delete this thread at any time. [/i]
[b]Credits go to[/b]:
[i]Sir eehjhay [for allowing me to post this]
Ms. switpotato [I got the idea from her]
Friendster Master
Yahoo! Answers
Photobucket
Ripway & Stormpages
Friendster-Tutorials.com
ETC.
[/i]
[i] [b]FAQ[/b]:
[b]
[Click Spoiler][/i][/b]
[spoiler]Q: It doesn't work! Please, please help me!
A: It does work. Check your codes, or press F5/Refresh when it doesn't work. You can also check if the linker updated again.
Q: How did you make your banner?
A: I used Photoshop. Try downloading it on Google.
P.S.
By downloading it, I meant the FREE TRIAL, not the torrent. [b]NO TO PIRACY[/b]
Q: Where is the Underground Section?
A: Click [url=http://theftalk.com/f5-Friendster-Underground.html/]here[/url].
Q: What is JS and what is CSS?
A: Refer [url=http://theftalk.com/t23618-Confusing-words-or-terms-for-Newbies..html/]here[/url].
Q: How do you make the boxes transparent?
A: Type in the boxes "transparent".
Q: The screenshots are too small, how can I make them bigger?
A: Right-Click on the image then choose "View Image" and you will see a bigger and better version of the screenshot.
Q: Can you make me a layout?
A: I'm busy right now. Maybe you can ask all the lay-makers out there.
Q: Ripway is down. What do I do?
A: Ripway is not the only site out there. You can use stormpages, geocities, etc.[/spoiler]
[i] [b]RULES[/b]:
[b]
[Click Spoiler][/i][/b]
[spoiler]1. No spamming/flaming on my thread.
2. Try to stay on-topic. If you have a question related to this, just post it here.
3. As much as possible, avoid double-posting.
4. [b]You can't post this tutorial in another site without my permission[/b].
5. And, if you're a newbie, read the main rules. [/spoiler]
Before we start, I just wanted to let you know that you [b]don't need any knowledge about JS[/b] to make Cross-Overs, but you may [b]need to know a little bit about CSS[/b]. You [b]don't need to download[/b] any software, you can make all the Cross-Overs/Navigational CSS Lays you want just [b]being on the net[/b].
[b]
[i]What you need[/i][/b]:
An Internet Connection
Lots of imagination
OK, let's start:
First, click the link below. It will take you an External CSS Generator made by [b]Angel[/b].
[url]http://friendstertutorials.com/generators/external-css/[/url]
[quote][i][b]Note[/b]: 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, it will be back soon.[/i][/quote]
Once you've clicked on the link, you will see a page that looks like this.
For your convenience, they updated it and put in options so you won't have to look for Hex Colors anymore.
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/Screenshot1.gif[/img]
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/Screenshot2.gif[/img]
[quote][i][b]Note[/b]: You can fill in all the fields but you can also leave some blank if you don't like that feature.[/i][/quote]
[i][b]
To the newbies, I'll explain what every field is and it's features:[/b][/i]
[b]
[i][Click Spoiler][/i][/b]
[spoiler][b]PAGE BACKGROUND[/b] This will be the background of your page.
[b]PAGE CURSOR[/b] This will be your page's cursor.
[b]PAGE SCROLLBARS[/b] Here, you can customize your scrollbars.
[b]PAGE BORDER[/b] This is the border of the page itself.
[b]GLOBAL TEXTS[/b] The font color, font size and design of your text.
[b]GLOBAL LINK[/b] You can customize the link and what it will look like.
[b]GLOBAL LINK: HOVER[/b] This is what your link will look like when you hover around it.
[b]MASTER BOXES
MASTER HEADERS
MASTER BOXES: BULLETS[/b] 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.
[b]CONTROL PANEL: BOX
CONTROL PANEL: USER PHOTO
CONTROL PANEL: DATA
CONTROL PANEL: BUTTONS
CONTROL PANEL: BUTTONS HOVER[/b] 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.)
[b]MISC: SMALL PHOTOS
MISC: SMALL PHOTO NAMES[/b] 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.
[b]PERSONALIZED BANNER/HEADER[/b] Your personalized banner will appear on top of your profile. Size of the banner is 810x310.
[b]NAVIGATION LINKS[/b] Your navigation is consists of Home, My profile, My Connection etc. This will change the color of your navigation links.
[b]SHOUT-OUT BOX[/b]
This will change the font color of your shoutbox. Background is set to transparent.
[b]RECENT UPDATE BOX[/b] Recent update box is located in your Control panel below your personal details.
[b]TITLE BAR
STATUS BAR[/b] Title Bar and Status Bar will be replaced with your own message. Do not use apostrophe ( ' ).[/spoiler]
Now, we make the banner. If you're a newbie, no prob! I've included a Newbie Guide on how to make banners the easy way.
[b]For the Newbies:[/b]
[spoiler]Go to MS Paint.
[img]http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot4.png[/img]
Design your banner anyway you want it. After that, save it and upload it to [url]http://www.tinypic.com[/url]
[img]http://i226.photobucket.com/albums/dd119/chanellejasmine1122/screenshot5.png[/img]
After uploading, get the direct link and paste it in the [b]PERSONALIZED BANNER/HEADER[/b] field.
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/Screenshot4.gif[/img][/spoiler]
[b]For Advanced Users:[/b]
[spoiler]You can use Photoshop, Photoscape or any other program like this. Set the width to 810px and the height to 310px. And the same with the Newbie Guide, upload it to Photobucket and get the direct link to put it in the PERSONALIZED BANNER/HEADER FIELD.[/spoiler]
After you've filled it all up, click "[b]Generate Layout Code![/b]"
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/Screenshot3.gif[/img]
It will redirect you to another page, showing the CSS codes of your layout.
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/Screenshot5.gif[/img]
Copy the CSS codes and paste it in [b]Notepad[/b] or any [b]other Simple Text Editor Program[/b]. Name it and put a "[b].css[/b]" on the end.
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot6.gif[/img]
Register at any free web hosting that supports CSS, JS or HTML
If you are already registered, just log in. [I use Ripway]
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot7.gif[/img]
Click on [b]"My Files[/b]" then "[b]Upload Files[/b]".
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot8.gif[/img]
Now, look for your file. Once you've found it, click "[b]Upload[/b]".
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot9.gif[/img]
Once the uploading is finished, click "[b]Return to My Files[/b]".
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot10.gif[/img]
Look for your file then Copy the Direct Link and paste it in the Latest Linker.
[img]http://i409.photobucket.com/albums/pp180/babyblue_04_13/screenshot11.gif[/img]
[i][b]Note:[/b] There's a temporary linker that you could use. The permanent linkers are being thought of. Just go to the Underground Section and look for the sticky topic with the said title.[/i]
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... Or scroll up and check the FAQ.
If you still can't understand, PM me...
Comments and +Repu's are [u][b]highly appreciated[/b][/u]. Thanks for reading my Tutorial! [/align]
Last edited by ♥brains&beauty♥ (2009-05-04 00:51:01)
 |