go to vampirefreaks main page


Created on: February 01, 2005

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>
<> <>Struck Out Text </></>
<div align="center"> Centered Text </div> Hex Code
Coming Soon Replacing the <Font> tag with the <Span> tag

Combining HTML font tags.

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;

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; }

Scrolling Marquees.

You can use marquees to make text or images scroll. <marquee> Scrolling Marquee </marquee>

<marquee behavior="scroll" direction="right"> Going Right </marquee>

<marquee behavior="scroll" direction="up">Up, Anyone?</marquee>

Marquees have other behaviors... *NB You may have to refresh to see the slide marquee, and Firefox doesn't support it (it scrolls instead).

<marquee behavior="slide"> Sliding Marquee* </marquee>

<marquee behavior="alternate"> Alternating Marquees Kind of Bounce </marquee>

You can change the speed using scrollamount:

<marquee scrollamount="4"> Scrollamount 4 </marquee>

<marquee scrollamount="20"> Scrollamount 20 </marquee>

Scrolldelay lets you make your marquees pause:
<marquee scrolldelay="500" scrollamount="100"> Scrolldelay 500 </marquee>

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.

Basic Anchor Design Top Anchor Design Bottom Anchor Design


On your desired anchor nav webpage:

  • Right click,
  • View Source code or view page source,
  • scroll down till you see the words </center>
  • then below that you will see the following.
    • <style> .defaultpic, .userinfo, .leftnav, .profile_title, .likes_title, .dislikes_title, .music_title, .journal_entry, .thumbnail, .gallery, .videos, .buttons1, .buttons2, .buttons3, .topbar, .maintop img, .menu2, .comments, .rate, .friends { display: none; }

    Highlight to select this untill you scroll down and see this

      </div> </div>

    copy or cut all. then place into your profile or it is STRONGLY suggested you edit this and all other webpage, layout coding in NOTEPAD + +

    About NP++

    Banner Replacing User Name (Header 2)

    h2{color: color hex here;
    font-face: font face here;

    Arrows Point to the image replacing user name (Header 2)


    Borders can be used around any table or image. Below are the codes to apply borders.
    In CSS:
    table, .table {
    border: solid;
    border-width: thin;

    Inline style:
    style="border: dashed; border-width: thin;

    NOTE: Please replace the struck out text with the attributes you desire.


    solid (default)


    medium (default)


    Here are some basic cursors you can use for your profile.
    These are cursors from the regular windows program (i.e. The help program):

    move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, crosshair

    Here are the hover examples:

    auto (default for hover)
    default (default arrow)

    This is the default CSS for the standard cursors:
    <style type="text/css">
    body {
    cursor: move;}

    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");}

    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:
    <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:
    <div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;"> box 1 content </div>
    <div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;"> box 2 content </div>

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

    <td> Cell 1 </td>
    <td> Cell 2 </td>

    Cell 1 Cell 2

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

    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
    Aligns the table. Deprecated. Use styles instead. TF
    bgcolor rgb(x,x,x)
    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!
    cellpadding pixels
    Specifies the space between the cell walls and contents STF
    cellspacing pixels
    Specifies the space between cells STF
    frame void
    Specifies how the outer borders should be displayed.
    Note: Must be used in conjunction with the "border" attribute!
    rules none
    Specifies the horizontal/vertical divider lines.
    Note: Must be used in conjunction with the "border" attribute!
    summary text Specifies a summary of the table for speech-synthesizing/non-visual browsers STF
    width %
    Specifies the width of the table STF


    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 &lt; and your > marks for &gt; for example, to write the font tag above, I actually wrote:

      &lt;font color="red"&gt;red text&lt;/font&gt;

      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 }

    Hiding Stuff

      <style type="text/CSS">
      .profile_title {display: None;}
      .likes_title {display: None;}
      .dislikes_title {display: None;}
      .music_title {display: None;}

    To create a cleaner and more organized code you also may achieve the same affect by doing like so

      <style type="text/CSS">
      .profile_title, .likes_title, .dislikes_title, .music_title {display: none;}

    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
    • OldSchool
    • Electric Storm Default Template
    • A diagram for the Ottoid template can not currently be located hopefully this will soon be resolved

    You could also go Here


    Top Active Posters

    Being Updated Soon!

    Owner: MyMentalHell
    Members (1010): [view]
    Who Can Join: anyone can join
    Who Can Post: unmoderated
    Who Can View: anyone
    Who Can Upload Pics: Moderators
    Posts: 21700
    Posts Today: 0
    Posts This Week: 0
    Posts This Month: 3
    Affiliate Cults: Self-destructive_Layouts, Cynosure, Tutorial
    Members Viewing (0):

    [Cult Statistics]
    [View All Cult Posts] [View Expanded Posts]
    [View Cult Gallery (1 pics)] [Edit Pictures] [Upload Pictures]
    [ User Warnings ]
    Started Last Comment
    Warning Discussion
    10/19/2011 12:50pm
    by MyMentalHell
    02/21/2015 12:16pm
    by MyMentalHell
    User Warnings
    10/19/2011 12:43pm
    by MyMentalHell
    [View All Cult Posts] [View Expanded Posts]

    [ Questions Here ]
    Started Last Comment
    User Titles
    01/16/2010 03:11pm
    by MyMentalHell
    08/04/2013 07:56am
    by XdarkXanarchyX
    Changing option buttons to stick threads
    02/04/2016 03:26am
    by MidnightCrest
    02/05/2016 04:12pm
    by MidnightCrest
    ElectricStorm hide everything
    01/02/2016 06:15pm
    by M0D1F13D
    01/02/2016 09:47pm
    by XdarkXanarchyX
    Question about music...
    11/29/2015 04:20pm
    by Ragnos
    11/30/2015 01:44pm
    by Ragnos
    [View All Cult Posts] [View Expanded Posts]