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> <> <>Struck Out Text </></> <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> <br />Line Break in Text... Like this, starting on a new line.
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 style="font-size:12px; color:red"> Red, Size 12px Text </font> <font style="font-size:16px; font-family:Georgia;"> Georgia Size 16px Text </font> <font style="font-family:'Courier New'; 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="http://www.insert_your_url_here.com/"> 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:
I simply combined left and right on the same page from being lazy.. lol. I'll edit the coding when the time comes.
Please click on the proper link to find where you would like the anchor nav to go.
<style> h2{color: color hex here; font-size:1pt; text-align:left; font-face: font face here; background:url(http://www.urlhere.com); height:450px; width:600px;} </style>
Arrows Point to the image replacing user name (Header 2)
Borders
Borders can be used around any table or image. Below are the codes to apply borders. In CSS: <style> table, .table { border: solid; border-width: thin; </style>
This is the default CSS for the standard cursors: <style type="text/css"> body { cursor: move;} </style>
This is the inline style code to change the hover: style="cursor: move;
Here is the code to link a custom (hosted) cursor: <style type="text/css"> body { cursor: url("http://www.cursorurl.com/example.cur");} </style>
NOTE: Please replace the struck out text with the attributes you desire.
Scrollboxes & Tables
Scrollboxes
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:
<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>
Tables
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.
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
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:
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 }
How to use the display property to hide your elements.
For now in basic whatever you want to hide use class, id or name tag here {display: none;}
Please note what template design you are using. Premium users you are able to choose from a blank template if you wish to hide everything. For non paid members you may find the class and id tags to your template by going to the following links
