Last Update Aug 21, 2009

(Author : unknown)

welcome to my blog : http://doducluyen.blogspot.com/

D esigning with HTML is not that difficult but it has to be done one step at a time.
You make one change, then another and before long, your page changes completely. Start
by formatting the text or adding single images. I will be happy to answer your queries
and help you regarding HTML and how to customise and decorate your page, but please
Read the Help first before asking questions.

Facebook's POST script removes many tags, therefore there are limitations on what could
be included. Editing is done in the About ME section which you access by clicking on
the Edit Description.

• Do not post codes directly in a wall post for me to check as they can not be seen as
code.

• Applying Style
Facebook uses XHTML Strict and for better compatibility, XHTML tags should be used.
In XHTML all formatting is done in the style="".But, basic tags like <b>bold</b>,
<i>italic</i>, are allowed. Underline (<u>underlined</u>) is deprecated since it gets
confused with links.

You can add the style to msot tags like: <div></div> or paragraph <p></p>
• Start Here
This is the basic starting point that I usuaully use.

<div style="color: purple; font-size: 1.5em; padding: 10px; text-align: center;">

--- Everything goes here except images outside About Me ---

</div>
<br />

• Colour in HTML
Colours can be added as HTML Named Colours, or hex values preceded by #, for
example #000000 means black. There is also a shorthand version of it (that I like to use)
which is #000. Shorthand hex would duplicate each value, therefore #abc is the same as
#aabbcc. XHTML requires the use of lowercase characters although both will be
acceptable. Third method is to use RGB values (which I never use).

Reference for HTML Colours:

HTML Colors | HTML Color Names

To start, I am going to explain how to style the entire About Me. You can apply the
styling to sections of it too, once you understand the process.

First Step: Insert <div style=""> right at the start of your About Me and </div> right at
the end. It is VERY important that you don't forget the end part or else you may break the
HTML of the whole page. At this point, there is no change to the display until you add
the required style to the style="" part of the <div style="">

• Center Text and Images: text-align: center;

There is no need to use the <center></center> as everything will be centered.

• Change Font Size: font-size: 1.5em;

Size 1.5em basically means 1.5 times whatever it was.

• Change Text Color: color: blue;

The default color is black, so no need to use color: black; unless you have changed it and
want to revert back.

• Change Font: font-family: serif;

Changing font is a bit trickier, because if you use a font that the viewer does not have, it
will revert to standard font. It is usually not a good idea to specify fonts, in my view.
However, you can specify Generic font families (serif, sans-serif, cursive, fantasy,
monospace)
• Adding Padding: padding: 1em;
A little padding would prevent the text or images touching the edges of the container
which I think looks nicer. You can use pixels or 'em' values (meaning as much space as
letter 'm' occupies) for padding, like: padding 5px; or padding 1.5em;. This would add a
uniform padding inside the container. You may also introduce various padding to each
side i.e. top, right, bottom and left (in that order) buy using shorthand padding: 10px 5px
10px 5px;

• Adding Width: width: 200px;

Unless you want the container to be narrower than the About Me section, there is no point
in adding width parameter. Let the container fill the whole About me width.

• Adding border: border: 1px solid red;

You can also set borders separtely (border-top, border-right, border-bottom, border-left)
i.e. border-top: 1px solid black;

• Adding Background Colour: background-color: black;

• Adding Background Image: background-image: url(http://..................gif);

In this example, an image is assigned to the background. It is a good idea also to include
a background colour so if the image does not load for any reason, or if the image is not
repeated, there is a colour instead.

• Adding Shorthand Background:

background: black url(http://..................gif) no-repeat right bottom;

• Background Explanation:
background-color: This is the background colour which like previous section could be
name, hex, RGB, etc. It could also be set as transparent.
background-image: The location of the image on the Internet.
background-repeat: Sometimes you want the image to be repeated i.e. like tiles, or you
don't want to repeat it, or you only want to repeat it vertically or horizontally. Usual
values: repeat | repeat-x | repeat-y | no-repeat
background-attachment: This is to set if the background scrolls or not. Usual values:
scroll | fixed
background-position: This will set where the image is placed. It can be in percentage,
length or set words. Usual values (first the vertical and second the horizontal): top | center
| bottom & left | center | right

If any of these attributes are not set, the default value will be used which is: repeat top
left scroll

• Background for the whole Page:

Due to inconsistent support for the CSS properties (z-index), especially with Internet
Explorer, such coding should not be attempted. The page will become unusable for IE
users.
Example with some of above:
<div style="color: red; font-size: 2em; text-align: center; background-color: black;
background-image:
url(http://backgroundsarchive.com/images/pub/2/2102y5p4pc01vj.jpg);">

--- all your content ---

</div>

• Line Breaks
Use the line break tag so that your text/image etc would move to the next line. Use Two
break tags, one for break and the second for a line gap/space if you want it.

Break Tag: <br />

• Adding Links
Link Example:
<a href="Link to the page">Text that people can click</a>

• Adding Images
To add images, you simply use the image tag. If you wish to add a link also, you enclose
the image tag with the link tag. Depending on the browser you use, to find the location of
the image, just right click on the image, choose property and copy the address (or copy
image location in Firefox).

Note: It is a bad idea to upload images that are available on facebook to 3rd party image
sites. FB caches images and they load a lot faster. I have seen some pages that are a meter
long. In my view, any page that requires more than 3 scrolls, is too long.

Blank Image Example:

<img src="" alt="" />

Blank Image plus Link Example:

<a href=""><img src="" alt="" title="" /></a>

Explanation:
href= Link to the person's page
src= location (URL) of the image on the internet
alt= Text that will be displayed if image could not be loaded, could be left blank, or put
the name of the person
title= Text that would be displayed when people mouse their mouse over the image,
could be left out, or put the name of the person

• Removing Links/Junk from Images

Look at this example:
<a href="http://www.glitter-graphics.com"><img src="http://dl9.glitter-
graphics.net/pub/931/931169jw9yrqqaf6.jpg" width=307 height=432
border=0></a><br><a href="http://www.glitter-works.org" target=_blank>glitter-
graphics.com</a>

All you really need is the part in BOLD

Blank image code:
<img src="" alt="" />

Put it inside the code:

<img src="http://dl9.glitter-graphics.net/pub/931/931169jw9yrqqaf6.jpg" alt="" />

Finished............

• Adding Picture and Link to your FFS Friends

You can use a <div></div> tag or <p></p> tag to place the images and links inside.

I centre the contents inside it, but if you are going to have text inside, it is better to use a
paragraph tag and centre that too. I add a little padding so things don't get stock to the
edges which I think is ugly. Without the scrollbars, 7 images will line nicely, with them
maybe six. Therefore put a Line Break after every 7 sets.

I prefer to use the small thumbs, but you can use any image size that you wish. FB
images come in 4 usual formats: /n (200 x **), /s (100 x **), /t (50 x **) and /q (50 x 50).
I change the starting to /q which gives you a 50 x 50 images, so all images are the same
size. Can you see? /t changed to /q

For example:
http://profile.ak.facebook.com/v225/1615/26/t533757004_605.jpg

Change to:
http://profile.ak.facebook.com/v225/1615/26/q533757004_605.jpg

Filled Example:
<a href="http://apps.facebook.com/friendsforsale/users/show/100729935"><img
src="http://profile.ak.facebook.com/v229/625/56/t1457104438_6465.jpg" alt="Amir
Faryar Zahedi" title="Amir Faryar Zahedi" /></a>
• Resizing Images
The About Me is 488pixels wide. I usally set bigger images to width="440". You can give
a dimension which forces the browser to scale the image. Imagine original image is
500px × 300px which is too big to fit into the about Me section.

Example:
<img src="http://.............gif" width="250" alt="" />

The 250 forces the browser to scale the image by 250/500 or 50%.

• Placing Images Outside About Me Section

To place images outside, the Absolute Positioning of HTML/CSS is used. Absolute
positioning, is relative to the box container that it is placed in. The offset amount can be
adjusted to fix the position of the image relative to its container (which is the About Me
section). It does not really make any difference where inside the About Me section you
enter the code, unless if you place it inside another container, but it is best to put them
right at the start.

Blank Image Example:

<img src="" style="position: absolute; left: 515px; top: -80px;" alt="" />

Explanation:
left: This property specifies how far a box's left content edge is offset to the right of the
left edge of the box's containing block.

top: This property specifies how far a box's top content edge is offset below the top edge
of the box's containing block . A negative figure would mean higher than the edge.
right: This property specifies how far a box's right content edge is offset to the left of the
right edge of the box's containing block.
bottom: This property specifies how far a box's bottom content edge is offset above the
bottom of the box's containing block.

Now, if you increase the negative 'top'..it goes up; decrease it and it goes down, so top:
-400px is higher than top: -350px

If you increase the 'left' it goes right, if you decrease it, it goes left. So left: 300px will be
more to the right than left: 200px. Depending on the width of the image, value bigger
than left: 700px would put the image outside the page.

N.B.1 Absolute Positioning is best suited to positioning in a general area. Exact

pixel-perfect positioning should not be attempted. Internet Explorer shows the image
higher than Firefox and Opera.
 N.B.2 From Zach Mizrahi Levi (moderator) to another user: "Please note that
covering our sponsor ads and/or your pets with graphics is a violation of our TOS,
please remove the images that are covering the top banner and any images that
might be covering your pets."

Some Sources for Images:

Glitter Graphics | Glitterfy | Zwani | Jellymuffin | Backgrounds Archive | Mysapce
Comments | Gifanimations | Graphics for Myspace | Glitter Graphics Now | TextSpace
(for fancy text)

• Image Running over the Pet Pictures

Since a lot of people keep on asking how I made the image running over the pet section,
here is the blank code. Just put the location of the image in the url(....) part.

<div style="width: 100px; Height: 3000px; background-image: url(); position: absolute;

left: 515px; top: -140px;">&nbsp;</div>

• Running into Trouble: Edit Description is covered

Method 1: Pages often take time to load and images come after the text. While page is
loading and before the images have loaded, quickly click the Edit Description or hit
STOP.

Method 2: Go to your browser settings/options and disable the images.

For IE - Internet Explorer:

 • Menu → Tools → Internet Options
• click on Advanced Tab
• Halfway down you see the Multimedia section
• There is a tick next to Show Pictures
• Deselect it
• OK it

For Firefox:

• Menu → View → Page Style → No Style

• Edit your "About Me" and then Click Save Description
• Go back to: Menu → View → Page Style → Basic Page Style

Other browsers have similar options. Now the browser does not show any images, so the
troublesome image will not show. Go to your page, click Edit Descriptions and remove
or change the position of the image. You need to change the left and top settings, more
negative top, moves it higher, more positive left, moves it further to the left. Once saved,
go back and restore browser settings. Sometimes IE show a blank box for the missing
image, in that case, Hold Ctrl+F5 to force refresh the page and if the box is still there,
you need to try with another browser.

Method 3: Finally, if you are still unable to fix the problem, then you can:
a) Ask a Moderator to reset your About Me (everything will be deleted)
b) PM message me your user/pass and I fix it for you (New facebook security makes that
very difficult)

• Adding Scrollbars
There are times that the section is becoming too long. Like what you see on this page, I
have added scrollbars since the FFS Help and HTML Help sections are very long.

In order to have compatibility with older browser that do not support overflow-y which is
CSS3, I have added the overflow: auto; and made overflow-y !important;

On the examples on my page, I only set the height since I wanted the width to fill the
entire section. It is possible to set the width too, if desired.

Example:
<div style="height: 400px; overflow: auto; overflow-y: scroll !important;">
--- the scrolling section ---
</div>

In this example, the total height of the section is fixed at 400 pixels and since it contains
text which will automatically wrap, there would not be any horizontal scrolling. It is
possible to strings a set of images without spaces which would result in horizontal
scrolling. The use of horizontal scrolling is more limited and it is generally considered to
be ugly.

Scroll-bar Colours:
Scrollbar colours are not standard HTML/CSS and they are not fully supported by all
browsers. I personally don't use them.

• How to make a Table

Start a Table (centred): <table style="text-align: center; margin: auto;">

Start a Row: <tr>
Start/End a number of Cells: <td>....</td><td>....</td>.......
finish the first row: </tr>

Start a 2nd row: <tr>

Start/End a number of Cells: <td>....</td><td>....</td>.......
Finish the 2nd Row: </tr>
..
..
..
Start the last Row: <tr>
Start/End a number of Cells: <td>....</td><td>....</td>.......
Finish the last row: </tr>

Finish the Table: </table>

To set the width, add it as a style i.e. <td style="width: 100px;">. Remember that once
you set a width for a cell, all cells under it (the column) will have that width. So you only
have to set it for the <td> of the FIRST row.

• Gift Wall
Note: With so many gifts available now, the gift wall will soon become very bulky and
be affected by the About Me Bug.
It is not a good idea to copy and paste the source code from the gift section of the
FFS as they use floats to position items. Using floats on ONE item is fine, but using them
on multiple items are very complicated and if not closed properly, they would run out of
the About Me and over the minifeed section. The easiest way is to use a table and you can
easily get 5-6 in a row. Once you get more, you add another row. Don't forget that since
this table (for example) has 5 columns, for the next row, you need to have 5 columns too
and if you don't have enough roses, you must add blank cells <td>&nbsp;</td> to make
up for the missing ones. I have used an alternative image which has a transparent
background. Same principle can be followed for Hearts, Tiaras and anything else.
Here is an example of a Rose Wall that you can fill and carry on the next rows:

<table style="text-align: center; margin: auto;">

<tr>
<td style="text-align: center;"><img
src="http://img107.imageshack.us/img107/5510/roselz6.png" alt="" /><br />
<a href="">Name of the Person</a></td>

<td style="text-align: center;"><img src="" alt="" /><br />

<a href=""></a></td>

<td style="text-align: center;"><img src="" alt="" /><br />

<a href=""></a></td>

<td style="text-align: center;"><img src="" alt="" /><br />

<a href=""></a></td>

<td style="text-align: center;"><img src="" alt="" /><br />

<a href=""></a></td>
</tr>
</table>

• Combined Ring & Rose + Picture

Here is an example that you can fill and carry on the next rows. Replace my picture/link
with a /t version picture and my name with the name of the giver

<table style="margin: auto; text-align: center;">

<tr>
<td style="vertical-align: bottom;"><a
href="http://apps.facebook.com/friendsforsale/users/show/100729935"><img
src="http://profile.ak.facebook.com/v229/625/56/t1457104438_6465.jpg" alt="Amir
Faryar Zahedi" title="Amir Faryar Zahedi" /></a></td>
<td style="vertical-align: bottom; color: red; font-size: 1.5em; padding-right: 20px;">
<img src="http://67.228.233.11/images/gifts/engagement-ring.png" alt="" height="35" />
x1<br />
<img src="http://67.228.233.11/images/gifts/rose2.png" alt="" height="35" /> x5
</td>

<td style="vertical-align: bottom;"><a href=""><img src="" alt="" title="" /></a></td>

<td style="vertical-align: bottom; color: red; font-size: 1.5em; padding-right: 20px;">
<img src="http://67.228.233.11/images/gifts/engagement-ring.png" alt="" height="35" />
x2<br />
<img src="http://67.228.233.11/images/gifts/rose2.png" alt="" height="35" /> x10
</td>

<td style="vertical-align: bottom;"><a href=""><img src="" alt="" title="" /></a></td>

<td style="vertical-align: bottom; color: red; font-size: 1.5em; padding-right: 20px;">
<img src="http://67.228.233.11/images/gifts/engagement-ring.png" alt="" height="35" />
x3<br />
<img src="http://67.228.233.11/images/gifts/rose2.png" alt="" height="35" /> x20
</td>
</tr>

</table>

• Proper XHTML Embedding of Flash for FFS

Faebook replaces the object/embed code with its own JavaScript and ignores some
parameters. The code must be in a certain format for the FB script to understand.
Please note that from <object ....... to ... </object> must be on one line.

Example (from YouTube)(Note the bold sections):

<object width="425" height="344"><param name="movie"

value="http://www.youtube.com/v/9a72wLT91Xg&hl=en&fs=1"></param><param
name="allowFullScreen" value="true"></param><param name="allowscriptaccess"
value="always"></param><embed
src="http://www.youtube.com/v/9a72wLT91Xg&hl=en&fs=1" type="application/x-
shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425"
height="344"></embed></object>

Code to use:

<object type="application/x-shockwave-flash" width="425" height="344"

data="http://www.youtube.com/v/9a72wLT91Xg&hl=en&fs=1"><param
name="movie" value="http://www.youtube.com/v/9a72wLT91Xg&hl=en&fs=1"
/><param name="wmode" value="transparent" /></object>

• Marquee, Blink, JavaScript & <style></style>

These tags are not allowed and will be stripped by Facebook script.
Have fun and enjoy