THIS TUTORIAL HAS JUST BEEN COPIED FROM MR. AMIR..
UNFORTUNATELY HE'S BEEN INACTIVE FOR QUITE SOMETIME, SO I JUST WANNA SHARE THIS MYSELF..
HopE u'd understand! ENjoy Learning and Enjoy designing!
UNFORTUNATELY HE'S BEEN INACTIVE FOR QUITE SOMETIME, SO I JUST WANNA SHARE THIS MYSELF..
HopE u'd understand! ENjoy Learning and Enjoy designing!
Designing 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.
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 bold, italic, are allowed. Underline (underlined) is deprecated since it gets confused with links.
You can add the style to msot tags like:
or paragraph
• Start Here
This is the basic starting point that I usuaully use.
--- Everything goes here except images outside About Me ---
• 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
right at the start of your About Me and
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 • Center Text and Images: text-align: center;
There is no need to use the
• 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: 10px;
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://..................);
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://..................) 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:
--- all your content ---
• HTML 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 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 move 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:
glitter-graphics.com
All you really need is the part in BOLD
Blank image code:
Put it inside the code:
Finished............
• 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:
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 | Glitter Globe | 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. Do not cover the entire pet section (wider than 100px). That is against the FFS rules and can get you banned or your About Me deleted.
• 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:
--- the scrolling section ---
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):
| .... | .... | .......
| .... | .... | .......
| .... | .... | .......
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.
• Marquee, Blink, JavaScript &
These tags are not allowed and will be stripped by Facebook script.
Have fun and enjoy
