go to vampirefreaks main page

HTML_LOVERS

Created on: February 01, 2005
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>
<> <>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;
}
</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>

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

Instructions

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)

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

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

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

    Styles



    groove
    inset
    outset
    ridge
    dotted
    dashed
    solid (default)
    double
    hidden
    none
    inherit

    Widths



    thin
    medium (default)
    thick


    Cursors


    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:

    move
    e-resize
    ne-resize
    nw-resize
    n-resize
    se-resize
    sw-resize
    s-resize
    w-resize
    text
    wait
    help
    crosshair
    auto (default for hover)
    default (default arrow)


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



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



    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 &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;}
      </style>

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

    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

    Staff

    Top Active Posters

    Being Updated Soon!

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

    [Cult Statistics]
    [View All Cult Posts] [View Expanded Posts]
    [View Cult Gallery (1 pics)] [Edit Pictures] [Upload Pictures]
    [ User Warnings ]
    Subject
    Replies
    Started Last Comment
    Warning Discussion
    0
    10/19/2011 12:50pm
    by MyMentalHell
    08/13/2012 03:46am
    by Mysts
    User Warnings
    0
    10/19/2011 12:43pm
    by MyMentalHell
    [View All Cult Posts] [View Expanded Posts]

    [ Questions Here ]
    Subject
    Replies
    Started Last Comment
    User Titles
    0
    01/16/2010 03:11pm
    by MyMentalHell
    08/04/2013 07:56am
    by XdarkXanarchyX
    Cult Ownership: PlagueInfected vs. -1
    0
    04/30/2013 11:02pm
    by PlagueInfected
    05/04/2013 05:46am
    by Kryss
    Javascript Help
    1
    09/10/2014 06:25pm
    by heymisscani
    09/10/2014 08:44pm
    by XdarkXanarchyX
    Cult Notifications?
    3
    08/06/2014 11:58pm
    by XdarkXanarchyX
    08/08/2014 12:18pm
    by XdarkXanarchyX
    Embedded Video
    3
    07/05/2014 06:36pm
    by XxValiantHunter18xX
    07/25/2014 02:37pm
    by RozzWilliams
    Group Forum Question
    1
    07/24/2014 07:18pm
    by XxValiantHunter18xX
    07/24/2014 11:29pm
    by heymisscani
    Resizing Gifs
    1
    05/26/2014 10:09pm
    by heymisscani
    07/20/2014 02:54pm
    by DawnAtRavens
    Icon for Cults
    6
    07/06/2014 02:01pm
    by Magdalena2113
    07/08/2014 01:14pm
    by Magdalena2113
    Music Player wont show
    5
    02/14/2014 02:13am
    by AmilyEmily
    06/13/2014 02:04pm
    by ChandraDolls
    User Signatures
    12
    05/27/2014 12:41pm
    by KAWAII_POP
    05/28/2014 06:46pm
    by KAWAII_POP
    Refresher!
    1
    05/27/2014 04:22am
    by KAWAII_POP
    05/27/2014 08:50am
    by PlagueInfected
    Click Toggle Side Bar
    2
    05/21/2014 03:06pm
    by XxValiantHunter18xX
    05/21/2014 05:00pm
    by XxValiantHunter18xX
    [View All Cult Posts] [View Expanded Posts]