Friendstertutorials.com » Smooth, Clean, Centered FS Layout

Smooth, Clean, Centered FS Layout

Contributed by gpudz on November 15th, 2008 Categories: Tricks and Tweaks

13,110 Views

(+62 rating, 34 votes)

Loading ...

This tutorial is very easy! Yes it is! Because all you need is to know about Basic HTML and simple Adobe Photoshop designing. This layout is a Crossover Layout where in all of the parts of your layout will be hide expect your media box, where you can input your html codes and images

1. Step one download this code.

Blank Layout CSS Code

After downloading it, open it in a notepad then save as it as yourfilename.css

2. Upload your .css file to your hosting site(www.freewebtown.com, www.freewebs.com, www.ripway.com). After uploading it, copy the code below:

<style />@import url( http://www.hostingsite.com/yourfilename.css);</style>

change the red text to your css file link.

After doing that go to your media box @ friendster and paste it there! Then SAVE!… As you preview your profile you wont see anything but a plain white page and text. But you can also change it! into different colors by modifying your css file. Here’s the code that you’ll need to modify.

body {
background-image: url();
background-attachment: fixed;
background-position: bottom center;
background-repeat: repeat-y;
background-color: #ffffff;
cursor: url(http://);
text-align: center;
}

Search it at your code, you can see it in the top part of it. Then see the background color the bold one, that would be the part where you’ll change the color. To change it find your decided color and get the hex code if it, make sure that the hex code are 6 combination of letters or numbers. If you already have it, just change the red text about then save it as .css then upload it again.

3. Building your own profile through basic html coding. Let me as you first one question. Do you have the knowledge of basic HTML? If yes this thing will be the work for you and if not, you need to go here (http://www.w3schools.com/html ) and read something about HTML Coding. So there time now to fill up the media box with your own code :).

I’ll give you a tutorial in building it. This simple html tutorial will be the layout of your profile as well as you design it.

1. centering your layout contents. Make sure to put this code <center> at the very top and this code </center> at the very bottom if you want to center your layout.

2. Setting up a banner. You can always make a good banner if you’re a photoshop user, or if you dont know on how to use it, ahmm.. I suggest for you to search some cool image generator site like glittertext and etc. As you have your own banner use this code to put it. <img src=”link of your banner” border=”0″/>.

3. As you end every part of your layout you put a break code <br>. You’ll put the after the code of your banner. You may also use this in breaking some lines in text, all you have to do is to put it in the part where you want it to cut/break.

4. Setting up a divider. You can use the underscore key at your keyboard continuously to make a simple line like this; _________________________________________ . ahmmm Or you can use the horizontal rule code <hr> . The width of the this code is continuous so you need to shorten it up by making the hr code like this; <hr width=”200px”>. The 200px or pixel will be the width of the hr line. Another way to create a divider is by making an image that will serve as your divider like this;. This image is an example of image divider from my layout. To put it, just use the image code and use the break code before and at the end of the image code.

5. Getting the links. To get the link of an text of image, all you have to do is right click it, copy link locations for text links and copy image location for images.

6. The Links,the code for setting up a link is

<a href=”address/link/url”>TEXTHERE</a>. you can also use images in making a link, all you have to do is to change the text here into image code, like this;

<a href=”address/link/url”><img src=”link of the image” border=”0″/></a>.

so easy ayt?? :).

7. The content. You can always use text and images for the content of your profile as well as you want to it to be design.

8. WIDGETS. What are widgets? widgets are those mp3 players, youtube’s and chatbox that you’ll put in your html pages. Mostly they’re flash based. ahmm..

9.Scripts? not now, but you can search for cool html scripts @ dynamicdrive.com

So there, that tutorials is for beginner I think. hahahaha.. If you still need to know more about this layout. ahmm You can go here to check it out in Live Preview: CLICK ME

So there ! thanks for reading..:)). comments are more appreciated.

Share This Tutorial:

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks