Basic Text & Marquees
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.
Styling text with HTML:
<i>
Italic Text </i>
<b>
Bold Text </b>
<u>
Underline Text </u>
<strike>
Struck Out Text </strike>
<div align="center"> Centered Text </div>
<font color="orange">
Orange Text </font>
<font color="#990000">
Red Text set with a [ Hex Code ] </font>
<font size="1">
Small Text </font>
<font size="4">
Bigger Text </font>
<font face="Times New Roman, Times, Serif">
Times New Roman Text </font>
Combining HTML font tags.
If you want to change color, size and / or font face, you can do it all in the same tag: <font size="1" color="red"> Red Size 1 Text </font>
<font size="3" face="Georgia"> Georgia Size 3 Text </font>
<face="Courier" font size="1" color="orange"> Courier Size 1 Orange Text </font>
Making Text Links
To make a text link, you need the [ URL ] of the page you want to link to, and this code: <a href="URL OF PAGE TO LINK TO"> WHAT YOU WANT YOUR LINK TO SAY </a>
Styling text with CSS:
CSS styles follow a different syntax to HTML. Rather than going directly around the bit of text you want to format, you put them in between style tags, which can be in a whole different part of your profile. To affect all the text in your profile, apply the styles to "html, body", like this: <style type="text/css">
html, body {
color: red;
font-family: Georgia;
font-size: 8pt;
font-weight: bold;
font-style: italic;
text-decoration: underline;
letter-spacing: 5px;
font-variant: small-caps;
}
</style>
Styling links with CSS:
Links have 3 different states- a:link (unvisted) a:visited (visited, duh!) and a:hover (while the mouse is hovered over it). You can use CSS to change all of them separately if you like: <style type="text/css">
a:link { color: red; text-decoration: none; }
a:visited { color: green; text-decoration: overline; }
a:hover { color: orange; background: white; text-decoration: none; }
</style>
Scrolling Marquees.
You can use marquees to make text or images scroll.
Marquees have other behaviors...
*NB You may have to refresh to see the slide marquee, and Firefox doesn't support it (it scrolls instead).
You can change the speed using scrollamount:
Scrolldelay lets you make your marquees pause:
Images (inc backgrounds & banners)
The code to place a basic image on your page is:
<img src="YOUR IMAGE URL">
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:
<img src="YOUR IMAGE URL" width="100px" height="120px" alt="My man eating snake!">
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:
<style type="text/css">
html, body { background: url('YOUR IMAGE URL'); }
</style>
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).
<style type="text/css">
.leftnav { background: url('YOUR IMAGE URL'); }
</style>
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.
<a href="URL OF PAGE TO LINK TO"><img src="URL OF BANNER IMAGE" border="0"></a>
Username Banner Code
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:
<style type="text/css">
.profilename {
color: #000000;
font-size: 0px;
text-align: left;
background: url('YOUR IMAGE URL GOES HERE');
height: YOUR IMAGE HEIGHTpx;
width: YOUR IMAGE WIDTHpx;
}
</style>
Borders, Bullets & Symbols
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:
<style type="text/css">
.defaultpic {
border-size: 5px;
border-style: dotted;
border-color: red;
}
</style>
Or, you can use the lazy all-in-one method which does exactly the same thing:
<style type="text/css">
.defaultpic { border: 5px solid red; }
</style>
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:
To write an unordered list the code is:
<ul type="circle">
<li> Item 1
<li> Item 2
</ul>
Ordered lists have 5 types:
- Numbered (type="1")
- Lowercase Letters (type="a")
- Uppercase Letters (type="A")
- Lowercase Numerals (type="i")
- Uppercase Numerals (type="I")
To write an ordered list the code is:
<ol type="1">
<li> Item 1
<li> Item 2
</ol>
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:
<style type="text/css">
li {
list-style-type: THE_STYLE_TYPE_YOU_WANT;
color: THE_COLOR_YOU_WANT_THE_BULLETED_TEXT;
}
</style>
Alternatively you could set an image to use as a bullet point:
<style type="text/css">
li { list-style-image: url('URL_OF_IMAGE'); }
</style>
To put any of the symbols below on your page just type their ASCII name.
| © | © | ™ | ™ | ® | ® | | |
| ♥ | ♥ | ♦ | ♦ | ♣ | ♣ | ♠ | ♠ |
| < | < | > | > | « | « | » | » |
| ← | ← | → | → | ↑ | ↑ | ↓ | ↓ |
| † | † | ‡ | ‡ | | | | |
| α | α | β | β | γ | γ | δ | δ |
| ε | ε | ζ | ζ | η | η | θ | θ |
| ι | ι | κ | κ | λ | λ | μ | μ |
| ν | ν | ξ | ξ | ο | ο | π | π |
| ρ | ρ | ς | ς | σ | σ | τ | τ |
| υ | υ | φ | φ | χ | χ | ψ | ψ |
| ω | ω | Α | Α | Β | Β | Γ | Γ |
| Δ | Δ | Ε | Ε | Ζ | Ζ | Η | Η |
| Θ | Θ | Ι | Ι | Κ | Κ | Λ | Λ |
| Μ | Μ | Ν | Ν | Ξ | Ξ | Ο | Ο |
| Π | Π | Ρ | Ρ | Σ | Σ | Τ | Τ |
| Υ | Υ | Φ | Φ | Χ | Χ | Ψ | Ψ |
| Ω | Ω | | | | | | |
And for even more weird and wonderful symbols, don't forget about the Wingdings font.
To make a wingdings symbol just change the font for one letter, for instance
<font face="wingdings">M</font> would create a little bomb symbol.
Cursors & Scrollbars
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:
<style type="text/css">
html, body { cursor: crosshair; }
</style>
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:
<style type="text/css">
html, body { cursor: url('http://PATH TO YOUR CURSOR.ani'); }
</style>
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:
<style type="text/css">
html, body {
scrollbar-3dlight-color: #663366;
scrollbar-arrow-color: #CC99FF;
scrollbar-darkshadow-color: #330033;
scrollbar-face-color: #990099;
scrollbar-highlight-color: #CC99FF;
scrollbar-shadow-color: #330033;
scrollbar-track-color: #666666;
}
</style>
Spacing & Positioning
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.
<center> content </center>
Will center your content, but center tags are depreciated and you shouldn't really use them.
<div align="center"> content </div>
does exactly the same thing.
It's even better to use
[ CSS ] to center content if you can. To center your entire profile use:
<style type="text/css">
td { text-align: center; }
</style>
Margin auto will center tables, for instance, if you want to shrink the main table and put it in the middle of your page to get a skinny profile effect, you would do something like:
<style type="text/css">
.main { width: 600px; margin: auto; }
</style>
You can align things left or right using the align attribute too:
<div align="right"> right aligned stuff </div>
Or with
[ CSS ]:
<style type="text/css">
.main { width: 600px; margin-right: 0px; }
</style>
Scrollboxes & Tables
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:
<div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;"> contents here </div>
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:
<table><tr><td>
<div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;"> box 1 content </div>
</td><td>
<div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;"> box 2 content </div>
</td></tr></table>
| |
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:
<style type="text/css">
.container {
width: 250px; height: 200px;
overflow: auto; overflow-y: hidden;
border: 3px double #999999;
}
.section { height: 200px; overflow: auto; }
</style>
<table width="350px"><tr><td>
<div style="overflow: auto; width: 100px; height: 200px; border: 3px double #999999;">
NAVIGATION
<br><a href="#profile">[ About Bit ]</a>
<br><a href="#likes">[ Likes ]</a>
<br><a href="#loathes">[ Loathes ]</a>
<br><a href="#music">[ Music ]</a>
</div>
</td><td>
<div class="container">
<a name="profile"></a>
<div class="section">
<br><br>ABOUT TEXT GOES HERE
</div>
<a name="likes"></a>
<div class="section">
<br><br>LIKES TEXT GOES HERE
</div>
<a name="loathes"></a>
<div class="section">
<br><br>LOATHES TEXT GOES HERE
</div>
<a name="music"></a>
<div class="section">
<br><br>MUSIC TEXT GOES HERE
</div>
</div>
</td></tr></table>
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> |
|
| <table><tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr><tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr></table> |
|
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 |
Hiding Stuff
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!
- Top Dropdown Menu
<style type="text/css">
#menu0 { display: none; }
</style>
- VF Logo & Users Online Table
<style type="text/css">
.maintop { display: none; }
</style>
- Lefthand Navigation Menu
<style type="text/css">
.leftnav{ display: none!important; }
</style>
- Profile, Journal, Friends Journals Bar
<style type="text/css">
.topbar { display: none; }
</style>
- Your Username
<style type="text/css">
.profilename { display: none; }
</style>
- Default (Main) Picture
<style type="text/css">
.defaultpic { display: none; }
</style>
- Thumbnails
<style type="text/css">
.thumbnail { display: none; }
</style>
- Gallery Link
<style type="text/css">
.gallery { display: none; }
</style>
- User Information (age, sex, location, rates etc)
<style type="text/css">
.userinfo { display: none; }
</style>
- Profile, Likes, Dislikes, Music Headings
Nb, this code doesn't work on the preview page. You have to submit changes. <style type="text/css">
.profile_title, .likes_title, .dislikes_title, .music_title { display: none; }
</style>
- Latest Journal Entry Displaying on Profile
<style type="text/css">
.journal_entry { display: none; }
</style>
- User Comments Heading
<style type="text/css">
.comment_title { display: none; }
</style>
- All Buttons
<style type="text/css">
.buttons1, .buttons2, .buttons3 { display: none; }
</style>
- Rate Bar
(You can also turn it off on your edit profile page) <style type="text/css">
.rate { display: none; }
</style>
- Friends, Favs, Member Of etc Table
<style type="text/css">
.friends { display: none; }
</style>
- Comments
(You can also hide them using settings on your edit profile page) <style type="text/css">
.comments { display: none; }
</style>
Music
The embed code for including music in your profile is:
<embed src="http://www.PATH TO YOUR MUSIC FILE.mp3" volume="100%" hidden="false" autostart="false" height="40px" loop="true">
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!
- The hidden attribute is for making it so people don't see any music player, and just hear your music in the background (change to true if you want to hide your player) Remember this means people can't turn your music OFF! It can be true or false.
- Autostart denotes whether your music begins as soon as people enter the page, or if they have to press play. Possible values are true or false.
- Height is for setting the height of the media player bar that appears (should be around 350 for a video file). Height is measured in pixels (px).
- Loop is whether your file plays once or over and over again. Possible values- true or false.
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:
If you're looking for a free flash player, you should check out:
Showing Your Code
To display HTML code on the page (for example if you want to give out a banner code for your cult, or post code in a help cult to ask a question) you can either:
- Use A Textarea
<textarea> Your Code Here! </textarea>
Your code will appear as code, in a little box. You can also define the size of your textarea by giving it a number of rows and / or cols:
<textarea rows="5" cols="40"> Your Code Here! </textarea>
But textareas don't work everywhere in VF, for instance, although you can post one in your profile or cult description, or when you start a thread, you can't post textareas in thread replies (VFs filters block them) so...
- Using ASCII
If you want to write code directly onto the page like this:
<font color="red">red text</font>
You can just change your < marks for < and your > marks for > for example, to write the font tag above, I actually wrote:
<font color="red">red text</font>
Nb, if you want to convert a big block of code to ASCII, most programs (Notepad / Wordpad / Dreamweaver etc) have a Find & Replace option under the Edit menu that'll do it for you.
GeekSpeak- Coding Terms Explained
- HTML - Hypertext Markup Language. HTML is the building blocks of web design. It lets you create new stuff on your page, like boxes, images and links. You can use HTML to set styles and color too, but it's better to use CSS for this, unless you're just styling one single word, sentence or image.
- XHTML - Extensible HTML. The difference between HTML and XHTML is that XHTML is structurally correct. Tags are always ended (sometimes with a /> eg <br> becomes <br /> in XHTML) and many tags that are allowed in HTML have been replaced with CSS equivalents. On VF, both HTML and XHTML tags will work.
- CSS - Cascading Style Sheets. Think of them as virtual paint. You can use style sheets to color or style text images and boxes on your page. They're not much good for creating new boxes or images though. That's what HTML is for.
- Hex Codes - Hex codes are for setting color. They're always a string of letters and/or numbers (usually 6) preceded by a # sign. Although lots of the basic color names are recognized by browsers, hex codes are still useful because they allow you to be more specific, for instance, red text could be #ff0000 #cc0000 #990000 or even #330000. You can find hex codes for any color on Google, or [ Webmonkey ] has quite a long list.
- Url, Path or Hyperlink - Is the http:// address of a page or image, as you would type it in the address bar at the top of your browser. For example, the Url of this page is: http://vampirefreaks.com/cult/HTML_LOVERS
- Classes - A class is a name or ID given to things on your page so that you can refer to them easily in [ CSS ]. Just as you can refer to table or img, meaning all tables or images on the page, you can give one or two tables or images a class, so that you can style them on their own. Almost every box and image on your VF page has a class. You can recognize classes in CSS because they are always preceded by a dot, for example, the left navigation menu on VF has the class leftnav, so to set styles for it you would use .leftnav { styles here } in your stylesheet.
You can give a box or image of your own a class by adding class="myclassname" to its tag, for example <img url="YOUR IMAGE URL" class="myimage"> Then to refer to it in CSS you would use .myimage { styles here }
