Html Helps To Customize Friend For Sale Page

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

right at the start of your About Me and

• Center Text and Images: text-align: center; There is no need to use the 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:

• 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:


• Adding Links Link Example: Text that people can click

• 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: Blank Image plus Link Example: 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:
glittergraphics.com All you really need is the part in BOLD Blank image code: Put it inside the code: Finished............

• Adding Picture and Link to your FFS Friends You can use a tag or

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:

• 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: 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: 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.

• 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: 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): Start a Row: Start/End a number of Cells: ....... finish the first row: Start a 2nd row: Start/End a number of Cells: ....... Finish the 2nd Row: .. .. .. Start the last Row: Start/End a number of Cells: ....... Finish the last row: Finish the Table:

....	....
....	....
....	....

To set the width, add it as a style i.e. . 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 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   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:

Name of the Person

• 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

x1 x5

x2 x10

x3 x20

• 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