FlexiFlame

FlexiFlame Layouts => Flexiflame Navigational CSS Layouts Using Mechanics => Topic started by: GodGurl25 on May 23, 2008, 12:44:12 am



Title: How to make Navigational CSS layouts (Updated!)
Post by: GodGurl25 on May 23, 2008, 12:44:12 am
Requested by: animeprincess_liya

What you need:
~ An internet connection
~ Imagination and creativity.

Credits to: friendstertalk.com

 :D Go to http://www.friendster-gens.com and choose Version 1.

 :D After clicking that page, you will redirect to other page. This is where you will fill up all the necessary URLs, etc.

 :D  Fill up all the features. If you don't want the feature, leave it blank.

Some feature informations:
(Used all caps for better look)

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 ( ' ).

 :D If you don't have a banner yet, make one in Paint or Lunapic or any image making programs and sites.

 :D Upload to Photobucket.

 :D Get the Direct link Code and paste it in Personalized banner or Header box.

 ;D Finished? Click Generate Friendster Code!

 ;D You're seeing the code, right? But we are not finished yet.

 ;D Open Notepad. Start button, all programs, accessories, NotePad.

 ;D Paste the code in the notepad.

 ;D Save filename.css
You can choose any filename you want, just make sure you'll add an extension .css

 ;D Create a Ripway acc., or if you already have one, log-in.

 ;D Then upload your file.

 ;D Copy the Direct Link Code found below the name of the file.

 ;D Then have this code. It needs editing.

Code:
<style type='text/css'>@\import url(CSS URL HERE);</style>

 ;D Then paste the CSS URL code you copied in below the downloaded filename in Ripway in the CSS URL HERE found in the code.
Code:
style type='text/css'>@\import url(CSS URL HERE);
You can see it inside the parenthesis.

 ;D You're done with the code! You can now paste it in your Media box section. You can now see your layout!

If there's something you can't understand just reply in this board.
Or simply reply for your comments.
If you want to submit a layout and you are not sure of it... to keep this thread alive, post it here with this form:
Name:
Layout Oreview:
Code:

That's it! Hope it helps.

Hope it helps.
~-=GodGurl25=-~