1544289 Members
4201 Users Online
Site Login
New Users Sign Up

Messageboard Chatroom Classifieds Band Profiles Music Reviews Radio Player Vampirefreaks Email

Gothic Clothing @
FuckTheMainstream

HTML_LOVERS

Created on: February 01, 2005, 01:06pm
Description:

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






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
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 ]


  • Bullets
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:
  • Circle
  • Disc
  • Square
To write an unordered list the code is:
<ul type="circle">
<li> Item 1
<li> Item 2
</ul>

Ordered lists have 5 types:
  1. Numbered (type="1")
  1. Lowercase Letters (type="a")
  1. Uppercase Letters (type="A")
  1. Lowercase Numerals (type="i")
  1. 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:

disca circle that is closed in
circle a circle that is not colored in
squarea square that is colored in
decimal-numbers1, 2, 3, 4, and so on and so forth
decimal-leading-zeronumbers that just start out with 0 (ie. 01, 02, 03)
upper-romanupper cased roman numerals (ie I II II IV)
lower-roman same as above but just lower case (ie i ii ii iv)
upper-alphaupper cased alphabet that goes up..(ie A B C)
lower-alphasame as above but lower cased this time ie (a b c)
lower-greeklower 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>



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

¢¢££
¤¤¥¥ ¦¦§§
¨¨©© ªª««
¬¬®® ¯¯°°
±±²² ³³´´
µµ ··¸¸
ºº»» ¼¼½½
¿ ¢¿
źź
ŒŒœœ ŠŠ
ααββ γγδδ
εεζζ ηηθθ
ιικκ λλμμ
ννξξ οοππ
ρρςς σσττ
υυφφ χχψψ
ωωΑΑ ΒΒΓΓ
ΔΔΕΕ ΖΖΗΗ
ΘΘΙΙ ΚΚΛΛ
ΜΜΝΝ ΞΞΟΟ
ΠΠΡΡ ΣΣΤΤ
ΥΥΦΦ ΧΧΨΨ
ΩΩ






Cursors & Scrollbars


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


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

scrollbar

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


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

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


  • Left and Right
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
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>



  • Anchor Boxes


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>



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

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


Cell 1Cell 2

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


Cell 1Cell 2
Cell 3Cell 4

Optional Attributes
DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
AttributeValueDescriptionDTD
alignleft
center
right
Aligns the table. Deprecated. Use styles instead.TF
bgcolorrgb(x,x,x)
#xxxxxx
colorname
Specifies the background color of the table. Deprecated. Use styles instead.TF
borderpixels Specifies the border width.
Tip:Set border="0" to display tables with no borders!
STF
cellpaddingpixels
%
Specifies the space between the cell walls and contentsSTF
cellspacingpixels
%
Specifies the space between cellsSTF
framevoid
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
rulesnone
groups
rows
cols
all
Specifies the horizontal/vertical divider lines.
Note: Must be used in conjunction with the "border" attribute!
STF
summarytextSpecifies a summary of the table for speech-synthesizing/non-visual browsersSTF
width%
pixels
Specifies the width of the tableSTF






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">
    h2 { 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 }





Helpful Links



Common HTML Problems

If one of your codes isn't working, you should check if you made any of these mistakes:
  • You forgot a < or > sign on a HTML tag.

  • You made a spelling mistake, or the tag doesn't exist.

  • The tag is banned from VF. Scripting & frames for instance aren't allowed. Tags that aren't allowed will disappear from your edit profile page.

  • You're a free user, and you're trying to use a premium only code, like ones that refer to ".userinfo" or page transitions.

  • If you can see CSS code on your page, you need to put it between <style> and </style> tags.

  • If your entire page has turned into a link, you forgot to close a link tag (</a>). Same applies for font colors & styles etc. Look for <font> or other styling tags that aren't followed by their ending tags (</font>).

Affiliates

Cult Staff

Banner/Link Exchange





HTML_LOVERS Banner Codes


















































Owner: MyMentalHell
Members (2201): [view]
Who Can Join: anyone can join
Who Can Post: unmoderated
Who Can View: anyone
Who Can Upload Pics: Moderators
Cult Posts: 5514
Posts Today: 5
Posts This Week: 24
Posts This Month: 121
Members Viewing (0):

[View All Cult Posts] [View Expanded Posts]
[View Cult Gallery (1 pics)]
Latest Posts:
Subject
Replies
Started Last Comment
Official Chat Thread 2.0
10
07/02/2006 08:17pm
by _L_a_m_i_a__poi
05/13/2008 01:06pm
by unjustified_light
MySpace vs. VampireFreaks Layouts
4
12/09/2007 10:03am
by MyMentalHell
05/07/2008 07:26pm
by xFANTASMAx
Whore you Layout/HTML Cult Here!
1
08/25/2007 07:41pm
by MyMentalHell
04/18/2008 05:47am
by Kryss
Cult Updates?
1
03/27/2007 09:06am
by MyMentalHell
03/12/2008 06:19pm
by Xx4GoTTeNxX
MyMentalHell's Do and Don'ts
0
08/25/2007 07:32pm
by MyMentalHell
02/27/2008 05:16pm
by Draculas_Irish_Bride
CSS Classes For All Pages
0
08/02/2006 03:27pm
by Ottoid
12/09/2007 07:01pm
by Furuhoshi
RULES!!!
0
10/10/2005 08:34pm
by MyMentalHell
09/29/2006 01:19am
by MyMentalHell
I need to know
3
05/12/2008 09:42pm
by xSuga_Cinnamonx
05/13/2008 10:27am
by PieLorna
Locking A post?
2
05/13/2008 09:58am
by Bitterlove911
05/13/2008 10:14am
by Bitterlove911
What Am I doing wrong?
2
05/11/2008 03:13pm
by XxPhYsCoTiC_kAtxX
05/12/2008 07:06pm
by XxPhYsCoTiC_kAtxX
Trouble In Text Links
3
05/11/2008 04:24pm
by Death_Reigns_All
05/12/2008 05:11pm
by Kryss
Question
2
05/11/2008 05:33pm
by Xx__MeghanMASSACRE
05/12/2008 02:49pm
by Xx__MeghanMASSACRE
problem
2
05/09/2008 11:18am
by bileric
05/12/2008 05:24am
by bileric
HELP
3
05/11/2008 12:55pm
by rickycoggan
05/11/2008 01:11pm
by Rotnac
Casper
2
05/10/2008 10:57pm
by Metalguitar16
05/11/2008 01:33am
by Rotnac
plash page?
3
05/10/2008 06:38pm
by LadyDove
05/10/2008 11:43pm
by bambiecrow
My cults layout is atrofying with me.. and vice versa
4
05/10/2008 06:33pm
by lucy_westen
05/10/2008 07:19pm
by lucy_westen
hide the Cult gallery
2
05/07/2008 09:32am
by lucy_westen
05/10/2008 06:56pm
by lucy_westen
wheres my mistake
4
05/08/2008 05:49pm
by Blood_Thirsty_Onyx
05/10/2008 01:24pm
by Sychaos
Add as friend button.
4
05/10/2008 04:09am
by cassCUNT
05/10/2008 05:17am
by cassCUNT

[View All Cult Posts] [View Expanded Posts]