You can set text styles with either [ HTML ] or [ CSS ]. HTML is fine for styling odd words or sentences, but if you want to alter bigger blocks of text it's often easier to use CSS, and if you want to alter text or links already on your VF page you will need to, as you can't get to those things to put HTML tags around them.

The code to place a basic image on your page is:
You have several optional attributes, like width, height or alt (alternative text). It's a good idea to set width and height because it tells the browser in advance how big your images are going to be, which stops your page jumping around as they load, and it's a good idea to set alternative text so that users know what your picture was if it doesn't load. A more complete image tag might look like this:
The image [ URL ] you put in this code will come from a free host like [ Tinypic ] or [ Photobucket ]. Other people cannot view images you have saved on your computers hard drive, so to share them you first have to upload them to the net. These free hosts will let you store your images online for nothing, and give you a http:// address leading to the page they're on. This is the address you need to paste in the above code to make your image show up.

Backgrounds.
You can apply backgrounds to your whole page, or any box or scrollbox (if you aren't familiar with how to upload an image to the internet see above). Once you have your image [ URL ] this is the code you need to set a page background:
If you want to apply your background to a specific table or div box instead, you will need to find the boxes [ Class ] (if it's a box of your own you can add class="myclassname" to the div or table tag to give it a class of your own). The example below would apply your background image to leftnav (the lefthand navigation menu).

Banners (clickable images).
Banners are basically just clickable images. You will need your banner image [ URL ] (see above if you aren't familiar with how to upload images to the internet), and also the url of the cult or profile page you want to link to.

How to replace your username with a banner or image like this:



First find or make your banner image. You don't need an expensive graphics program for this, you can find a whole list of free & trial ones [ here ]. I recommend [ Serif PhotoPlus ] or, if you're a bit more experienced, [ The GIMP ].

When you've made your image you need to upload it. [ Tinypic ] is a nice easy to use free image host, or alternatively you can sign up for a [ Photobucket ] account.

Finally you need to put the image [ URL ] tinypic or photobucket give you into this code:

Borders can be used around any table or image. Lets use defaultpic (your main/ default picture on VF) for a few examples. First, border actually has 3 main properties, and you can set them in separate bits like this:
Or, you can use the lazy all-in-one method which does exactly the same thing:
Now let's take a look at each different property. First size. Hopefully this ones pretty self explanatory. Size is thickness of the border. It's measured in px (pixels). 1 pixel is tiny- about the size of a full stop on your screen.

Border styles:

dotted	dashed	inset
outset	ridge	groove
	double

Finally color. Color can be any accepted color name or [ Hex Code ]


You can set bullet styles either with plain [ HTML ] or [ CSS ]. In plain HTML you have ordered and unordered lists. Unordered lists have 3 types of bullets:
Alternatively you can set your bullet styles with [ CSS ].

List style types:

disc	a circle that is closed in
circle	a circle that is not colored in
square	a square that is colored in
decimal-numbers	1, 2, 3, 4, and so on and so forth
decimal-leading-zero	numbers that just start out with 0 (ie. 01, 02, 03)
upper-roman	upper cased roman numerals (ie I II II IV)
lower-roman	same as above but just lower case (ie i ii ii iv)
upper-alpha	upper cased alphabet that goes up..(ie A B C)
lower-alpha	same as above but lower cased this time ie (a b c)
lower-greek	lower case greek alphabet

Pick your list style type, then use this code:
Alternatively you could set an image to use as a bullet point:


To put any of the symbols below on your page just type their ASCII name.

♥	♥	♦	♦	♣	♣	♠	♠
←	←	→	→	↑	↑	↓	↓
†	†	‡	‡	¢	¢	£	£
¤	¤	¥	¥	¦	¦	§	§
¨	¨	©	©	ª	ª	«	«
¬	¬	®	®	¯	¯	°	°
±	±	²	²	³	³	´	´
µ	µ	¶	¶	·	·	¸	¸
º	º	»	»	¼	¼	½	½
¿	†	‡	‡	¢	¿	∞	∞
ź	ź	™	™	↔	↔	∂	∂
∩	∩	∫	∫	≈	≈	≠	≠
≡	≡	≤	≤	≥	≥	◊	◊
Œ	Œ	œ	œ	Š	Š	„	„
α	α	β	β	γ	γ	δ	δ
ε	ε	ζ	ζ	η	η	θ	θ
ι	ι	κ	κ	λ	λ	μ	μ
ν	ν	ξ	ξ	ο	ο	π	π
ρ	ρ	ς	ς	σ	σ	τ	τ
υ	υ	φ	φ	χ	χ	ψ	ψ
ω	ω	Α	Α	Β	Β	Γ	Γ
Δ	Δ	Ε	Ε	Ζ	Ζ	Η	Η
Θ	Θ	Ι	Ι	Κ	Κ	Λ	Λ
Μ	Μ	Ν	Ν	Ξ	Ξ	Ο	Ο
Π	Π	Ρ	Ρ	Σ	Σ	Τ	Τ
Υ	Υ	Φ	Φ	Χ	Χ	Ψ	Ψ
Ω	Ω

There are a selection of default cursors that just work without you having to upload anything:
(Move your mouse over a box to see what the cursor looks like.)

crosshair	pointer	move	text	wait
help	e-resize	n-resize	s-resize	w-resize

ne-resize

nw-resize

se-resize

sw-resize

To use any of the default cursors for your whole page:
If you have a cursor of your own you want to upload, You need a free host that supports .cur or .ani files, like [ File High ]. Then use this code:
Nb, custom cursors only work for IE users, and the cursor file MUST be a .cur or .ani file. Images like .gifs will not work! If you're interested in making your own cursors, you need a program like [ Ani Tuner ].


Nb, custom scrollbars only show up for people using the Internet Explorer browser, or Opera.



All you can do to scrollbars (in plain HTML/CSS at least) is set colors. Patterns or pictures won't work. You can use accepted color names, or [ Hex Codes ]. Scrollbar styles are applied to page body, like this:

You start a new line in [ HTML ] using the <br> (break) tag. The break tag is a rare case in that it has no end tag (</br> does not exist) but if you are using [ XHTML ] you may use <br /> instead.

Scrollboxes are made from HTML div boxes. Divs expand with their contents by default, so to make one into a scrollbox, all you have to do is give it a width and height, and set overflow to auto, (or scroll) like this:
Nb, with overflow auto the scroll arrows won't appear until the contents is bigger than the box-

a little content

lots of content blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

To make scrollboxes appear side by side, as in the example above, the code is:

NAVIGATION [ About Bit ] [ Likes ] [ Loathes ] [ Music ]

ABOUT TEXT GOES HERE LIKES TEXT GOES HERE LOATHES TEXT GOES HERE MUSIC TEXT GOES HERE

To make a box where the content changes when you click on the links, the code is:


The <table> tag defines a table. Inside you use nested <tr> (table row) and <td> (table cell) tags to build your table structure. Tables are good for arranging div boxes, text or images, or even other tables.

<table><tr> <td> Cell 1 </td> <td> Cell 2 </td> </tr></table>

Cell 1 Cell 2

<table><tr> <td> Cell 1 </td> <td> Cell 2 </td> </tr><tr> <td> Cell 3 </td> <td> Cell 4 </td> </tr></table>

Cell 1 Cell 2 Cell 3 Cell 4

Optional Attributes
DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute	Value	Description	DTD
align	left center right	Aligns the table. Deprecated. Use styles instead.	TF
bgcolor	rgb(x,x,x) #xxxxxx colorname	Specifies the background color of the table. Deprecated. Use styles instead.	TF
border	pixels	Specifies the border width. Tip:Set border="0" to display tables with no borders!	STF
cellpadding	pixels %	Specifies the space between the cell walls and contents	STF
cellspacing	pixels %	Specifies the space between cells	STF
frame	void above below hsides lhs rhs vsides box border	Specifies how the outer borders should be displayed. Note: Must be used in conjunction with the "border" attribute!	STF
rules	none groups rows cols all	Specifies the horizontal/vertical divider lines. Note: Must be used in conjunction with the "border" attribute!	STF
summary	text	Specifies a summary of the table for speech-synthesizing/non-visual browsers	STF
width	% pixels	Specifies the width of the table	STF

You can hide most things on your VF page (except Google ads- that's not allowed).
Nb, some of these codes don't work on the preview page- You have to submit changes!

The embed code for including music in your profile is:
This works for either music or video, but for video you're probably going to want to increase the height to at least 350px so that you see all of your video! As with images, your music must be uploaded to the internet. You cannot use songs directly from your hard drive! Some free file hosts you can try are: