go to vampirefreaks main page
Cult Premades
Red/White Themed
to be coming
Orange/White Themed
All White
Two-thirds White
One-third White
50/50
One-third Black
Two-thirds Black
All Black
Yellow/White Themed
to be coming
Green/White Themed
to be coming
Blue/White Themed
to be coming
Purple/White Themed
All White
Two-thirds White
One-third White
50/50
One-third Black
Two-thirds Black
All Black
Pink/Black Themed
All White
Two-thirds White
One-third White
50/50
One-third Black
Two-thirds Black
All Black
Black/White Themed
to be coming
Red/Black Themed
to be coming
Orange/Black Themed
to be coming
Yellow/Black Themed
One-third Black
Green/Black Themed
to be coming
Blue/Black Themed
to be coming
Purple/Black Themed
to be coming
Pink/Black Themed
Two-thirds Black
White/Black Themed
to be coming
Font
What is HTML?
The acronym means HyperText Markup Language. In laymens terms, it's what makes your pages pretty.
Font size
Each of the following will change font size.
Headings

Heading Size 1


<H1>Heading Size 1</H1>

Heading Size 2


<H2>Heading Size 2</H2>

Heading Size 3


<H3>Heading Size 3</H3>

Heading Size 4
<H4>Heading Size 4</H4>

Heading Size 5
<H5>Heading Size 5</H5>

Heading Size 6
<H6>Heading Size 6</H6>

Heading Size 7
<H7>Heading Size 7</H7>

Font size

Font size 1
<font size="1">Font size </font>

Font size 2
<font size="2">Font size 2</font>

Font size 3
<font size="3">Font size 3</font>

Font size 4
<font size="4">Font size 4</font>

Font size 5
<font size="5">Font size 5</font>

Font size 6
<font size="6">Font size 6</font>

Font size 7
<font size="7">Font size 7</font>

Font Color

Red
<font color="Red"> Red</font>

List of Color Names
black
gray
silver
white
red
maroon
magenta
purple
violet
indigo
fuchsia
green
lime
olive
orange
yellow
blue
navy
teal
aqua

Hex codes

#FF0000
<font color=#FF0000> #FF0000</font>

List of Hex Codes


Font Faces

Comic Sans MS
<font face="Comic Sans MS"> Comic Sans MS</font>

List of Web-Friendly Font Faces

Marquees, Links, Images, Lists
URLS
<a href="http://URL">Link name</a>

Images
<img src="http://URL">
shows an image at its regular proportions <img src="http://URL" width="###">
You can resize the width. It's usually measured in pixels, however if you put a percentage in, it'll take a percentage of the total of the picture.
<img scr="http://URL" height="###">

Marquees text or image(s) here
<marquee width="###">text or image(s)
here</marquee> Tells how wide it will be.

text or image(s) here
<marquee height="###">text or image(s) here</marquee>
Tells how tall it will be. default is about 30 to 40px. If you're putting pics in make sure it's the size of the pic otherwise they get cut off!

text or image(s) here
<marquee direction="direction">text or image(s) here</marquee>
Tells which way it's going. You can use left, right, up, or down.

text or image(s) here
<marquee scrollamount="#">text or image(s) here</marquee>
Tells it the speed. 2, 3, and 4 are good.

text or image(s) here
<marquee scrolldelay="#">text or image(s) here</marquee>
Makes it jump from spot to spot when its scrolling.

text or image(s) here
<marquee align="center">text or image(s) here</marquee>
Tells where the marquee should be aligned.

text or image(s) here
<marquee behavior="behavior">text or image(s) here</marquee>
Tells it which way to scroll. Left goes from left to right. Right goes from right to left, and alternate kind of bounces back and forth.

text or image(s) here
<marquee loop="#">text or image(s) here</marquee>
Tells teh marquee how many times to go whichever way its going. For infinite times, omit the code.

Lists
To make a list put <li> that makes a bullet like this
  • See?
  • You
  • Can
  • Have
  • Several.
    To make a numbered list put
    <ol>
    <li> Text
    </ol>
    1. See?
    2. You
    3. Can
    4. Have
    5. Several
    6. Numbers
  • HTML Elements and Attributes
    [Alphabetically]
    VF
    <abbr title="Vampirefreaks">VF<abbr>
    Abbr is for Abbreviation, and what is in the parentheses is what will appear when scrolled over.
    BAMF
    <acronym title="Bad Ass Mother Fucker</acronym>
    Acronyms are used for abbrevations that you can say, bamf, milf, are two.
    bold
    <b>bold</b>
    It makes font bold.
    Welcome to Profile-and-Cult-Layouts, where you can find just that, and more. We do custom icons, banners, cult extras, profile, cult, journal, gallery and extra pages, as well as premade layouts. The cult is undergoing a lot of changes right now, but is still up and running. Feel free to ask any questions, post new threads, games, or discussions, we want you to.

    <blockquote> Welcome to Profile-and-Cult-Layouts, where you can find just that, and more. We do custom icons, banners, cult extras, profile, cult, journal, gallery and extra pages, as well as premade layouts. The cult is undergoing a lot of changes right now, but is still up and running. Feel free to ask any questions, post new threads, games, or discussions, we want you to.</blockquote>
    This allows you to make whatever you are quoting stand out.
    This is an example
    of a
    line break.
    This is an example<br>of a <br>line break.
    Line breaks break the lines of text.
    This text is centered

    <center>This text is centered</center>
    Centers text.
    <hr>
    You can also customize these with color and width.
    <hr color=#763F6E>
    Any hexcode can be used.
    <hr width="50%">
    Any percent can be used.
    <hr align="left" width="25%">
    italic
    <i>italic</i>
    Italicizes text

    This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.

    This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.

    <p>This is a test paragraph............ </p>
    <p>This is a test paragraph........ </p>
    This allows a paragraph.

    Strike out
    <s>Strike out</s>


    <textarea>This is text.. in an area</textarea>
    Great for giving codes.
    Underlined
    <u>underlined</u>
    Underlined text
    CSS tags
    [Alphabetical]
    { property: value;}
    Background
    For changing the background color and image of elements.
    background-attachment - determines how background images scroll.
    scroll - scrolls with the page
    fixed - fixed to the page
    background-color - for setting just the background color of an element
    hexcode
    transparent
    background-image - for giving an element a background image
    url
    none
    background-position - for setting the position of the background image
    top, center, bottom - for vertical alignment
    left, center, right - for horizontal alignment
    background-repeat - tells whether or not the background-image repeats
    repeat - repeats both the x and y
    repeat-x - repeats the x (horizontally)
    repeat-y - repeats the y (vertically)
    no-repeat - no repeating
    Border
    For defining all aspects of a border on all sides of an element.
    border-color - For setting the color of a border.
    hexcode
    transparent
    For all border styles
    border-style - For setting the style of a border
    none
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
    border-top-color, border-left-color, border-right-color, border-bottom-color - defines one side of an elements borders color.
    hexcode
    border-top-style, border-left-style, border-right-style, border-bottom-style - defines one side of an elements borders style.
    none
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
    border-top-width, border-left-width, border-right-width, border-bottom-width - defines one side of an elements width.
    ##px
    Cursor For all cursor styles

    Cursor
    crosshair
    pointer
    progress
    move
    e-resize
    ne-resize
    nw-resize
    n-resize
    se-resize
    sw-resize
    s-resize
    w-resize
    text
    wait
    help
    URL
    Font
    Font-Family - Must enclose the value with quotations.
    specific font name, followed by a generic font name
    Font-size - For defining a fonts size.
    #pt
    xx-small
    x-small
    small
    medium
    large
    x-large
    xx-large
    #% - 16pt is equal to 100%
    Font-style - For making certain text italic.
    Normal
    italic
    oblique
    Font-variant
    normal
    Small-caps
    Font-weight
    normal
    bold
    bolder
    lighter
    100
    200
    300 - normal
    400
    500
    600
    700 - bold
    800
    900
    Letter-spacing #px
    Word-Spacing
    normal
    ##px
    Lists
    list-style-image - for a custom list image
    Url
    list-style-position
    inside - text will line up with the bullet if it exceeds more than one line
    outside - text will line up next to the bullet regardless of it is more than one line
    list-style-type - for setting a lists marker
    disc
    circle
    square
    decimal
    lower-roman
    upper-roman
    lower-alpha
    upper-alpha
    none
    Text
    text-align - For aligning text
    left
    right
    center
    justify
    text-decoration - for decorating text with lines
    underline
    overline
    line-through
    text-indent - for setting how much of an indent the first line of a paragraph will have.
    ##px
    text-transform - for setting the capitalization of an elements text
    capitalize
    uppercase
    lowercase
    none
    Profile: Four div
    /* You are able to delete the "/*text*/" without it affecting the layout however they don't effect the layout anyway*/
    <style>
    .menu2, /*top menu bar (main, profiles, journals etc*/
    .maintop, /*shows how many members are online & Vampirefreaks.com*/
    .profilename, /*your username*/
    .topbar, /*contains links to profile, journal, friends journals, friends profiles*/
    .leftnav, /*shows inbox comments, pic comments etc.*/
    .thumbnail, /*pictures below the default pic*/
    .gallery, /*link to gallery*/
    .videos, /*link to videos*/
    .userinfo, /*contains sex age location rating etc.*/
    .journal_entry, /*shows latest journal entry*/
    .profile_title, /*title for profile*/
    .likes_title, /*title for likes*/
    .dislikes_title, /*title for dislikes*/
    .music_title, /*title for music*/
    .friends, /*shows friends, favorites, friends of, shitlist, member of etc.*/
    .buttons1, /*report user for abuse and block user buttons*/
    .buttons2, /*add to friends, add to favorites, add to cult, add to shitlist buttons*/
    .buttons3, /*leave a comment, rate and comment buttons*/
    .comment_title, /*title for comments*/
    .comments, /*comments*/
    .defaultpic, /*the huge pic on profiles*/
    .rate, /*rate bar*/
    .profilepages /*other profile pages*/{
    display: none;
    }
    </style>

    <style type="text/css">

    .main {
    width: /*you can use %'s or px's*/;
    }

    html, body {
    background: #hexcode;
    background-image: url('Keep the apostrophes');
    background-position: /*For the horizontal: left right center, for the vertical: top center bottom*/;
    background-repeat: /*repeat, repeat-y, repeat-x, no-repeat*/;
    background-attachment: /*Fixed(stays attached to the background) or scroll (scrolls with the text)*/;
    }

    html, table, div {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: none;
    }

    a:link {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: /*none or small-caps*/;
    background-color: transparent/*gets rid of the background color when you hover*/;
    }

    a:visited {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: /*none or small-caps*/;
    background-color: transparent/*gets rid of the background color when you hover*/;
    }

    a:hover {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: /*none or small-caps*/;
    background-color: transparent/*gets rid of the background color when you hover*/;
    }

    b {
    font: ##pt FontFace;
    color: #hexcode;
    letter-spacing: ##px;
    }

    i {
    font: ##pt FontFace;
    color: #hexcode;
    letter-spacing: ##px;
    }

    u {
    font: ##pt FontFace;
    color: #hexcode;
    letter-spacing: ##px;
    }

    s {
    font: ##pt FontFace;
    color: #hexcode;
    letter-spacing: ##px;
    }
    </style>

    <style type="text/css">

    .lg {
    width: 400px;
    height: 300px;
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/; background: #hexcode;
    overflow: auto/*do not change*/;
    overflow-y: auto/*do not change*/;
    font: ##pt FontFace;
    color: #hexcode;
    }

    .sm {
    width: 198px;
    height: 300px;
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/; background: #hexcode;
    overflow: auto/*do not change*/;
    overflow-y: auto/*do not change*/;
    font: ##pt FontFace;
    color: #hexcode;
    }

    .two { width: 298px;
    height: 200px;
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/; background: #hexcode;
    overflow: auto/*do not change*/;
    overflow-y: auto/*do not change*/;
    font: ##pt FontFace;
    color: #hexcode;
    }

    </style>

    <table>
    <tr><td>
    <div class="lg">
    about
    </div>
    </td>
    <td>
    <div class="sm">
    music
    </div>
    </td></tr>
    </table>
    <table>
    <tr><td>
    <td>
    <div class="two">
    likes
    </div>
    </td><td>
    <div class="two">
    dislikes
    </div>
    </td></tr>
    </table>
    Cult: Anchored
    <style type="text/css">/*To get rid of one just delete the ".name," and nothing more!*/

    .maintop, /*This has the faces & Vampirefreaks.com as well as how many people are online*/
    .heading, /*Your username in the leftnav*/
    .leftnav, /*The leftnav (inbox, comments, pic comments, etc.*/
    .status, /*Your status in the cult (member, mod, admin etc)*/
    .created_on, /*When the cult was created*/
    .description_title, /*The title for the description box (you don't need it for the description to work!)*/
    .owner_title, /*Shows who owns the cult*/
    .cult_info, /*Shows who can join, who can view and post counts*/
    .cult_name, /**/
    .view_expanded_posts, /*button for showing expanded posts*/
    .latest_posts_header /*button for showing latest posts*/{
    display: none;
    }
    </style>

    <style type="text/css">
    /*For the main; you can change the width with this*/
    .main { background: #hexcode;
    font: ##pt FontFace;
    color: #hexcode;
    width: /*you can use %'s or px's*/;
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/;
    }

    /*I only use the "html, body" for background*/
    html, body {
    background: #hexcode;
    background-image: url('Keep the apostrophes');
    background-repeat: /*repeat, repeat-y, repeat-x, no-repeat*/;
    background-position: /*For the horizontal: left right center, for the vertical: top center bottom*/;
    background-attachment: /*Fixed(stays attached to the background) or scroll (scrolls with the text)*/;
    }

    /*bold*/
    b {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: /*none or small-caps*/;
    letter-spacing: ##px; }


    /*italics*/
    i {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: /*none or small-caps*/;
    letter-spacing: ##px;
    }

    /*strikeout*/
    s {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: /*none or small-caps*/;
    letter-spacing: ##px;
    }

    /*underline*/
    u {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: /*none or small-caps*/;
    letter-spacing: ##px;
    }

    /*For any links*/
    a:link {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: /*none or small-caps*/;
    background-color: transparent/*gets rid of the background color when you hover*/;
    letter-spacing: ##px;
    }

    /*When you hover over a link*/
    a:hover {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: /*none or small-caps*/;
    background-color: transparent/*gets rid of the background color when you hover*/;
    letter-spacing: ##px;
    }

    /*Once you've visited a link*/
    a:visited {
    font: ##pt FontFace;
    color: #hexcode;
    text-decoration: /*none or small-caps*/;
    background-color: transparent/*gets rid of the background color when you hover*/;
    letter-spacing: ##px;
    }
    /*Forum on the main page of the cult*/
    .group_forum {
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/;
    font: ##pt FontFace;
    color: #hexcode;
    background: #hexcode;
    }

    /*For everything inside the group forum*/
    .group_forum td {
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/;
    font: ##pt FontFace;
    color: #hexcode;
    background: #hexcode;
    }

    /*In a thread; what the thread is about (ex. in an intro thread "introduce yourself here" would be there)*/
    .group_entry {
    background: #hexcode;
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/;
    font: ##pt FontFace;
    color: #hexcode;
    }
    /*comments in the thread*/
    .group_comment {
    background: #hexcode;
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/;
    font: ##pt FontFace;
    color: #hexcode;
    }

    /*heading to each comment*/
    .subheading {
    background: #hexcode;
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/;
    font: ##pt FontFace;
    color: #hexcode;
    }

    /*Where you type before you post a comment*/
    .comment_input {
    background: #hexcode;
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/;
    }

    /*stuff inside the comment input*/
    .comment_input td {
    background: #hexcode;
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/;
    }

    /*When you click "new topic" it brings you here*/
    .new_topic, .new_topic td {
    border: #px /*solid/dashed/dotted*/ #hexcode/*you can also put "none"*/;
    font: ##pt FontFace;
    color: #hexcode;
    }

    /*The cult members page*/
    .cult_members {
    background: #hexcode;
    font: ##pt FontFace;
    color: #hexcode;
    }

    /*The user info page*/
    .userinfo {
    background: #hexcode;
    }
    </style>

    <style type="text/css">
    .table td {
    width: ###px;
    height: ###px;
    border: #px /*solid/dashed/dotted*/ #hexcode /*you can also put "none"*/;
    background: #hexcode;
    }

    .bbox {
    width: /*should match the above width*/;
    height: /*should match the above height*/;
    overflow-y: hidden/*do not change*/;
    }

    .box {
    height: /*should match the above height*/;
    overflow: auto/*do not change*/;
    }
    </style>

    <table class="table"> <tr><td>
    <div class="bbox">
    <a name="1"></a>
    <div class="box">


    text 1 here


    </div>
    <a name="2"></a>
    <div class="box">


    text 2 here


    </div>
    <a name="3"></a>
    <div class="box">


    text 3 here


    </div>
    <a name="4"></a>
    <div class="box">


    text 4 here


    </div>
    <a name="5"></a>
    <div class="box">


    text 5 here


    </div>
    <a name="6"></a>
    <div class="box">


    text 6 here


    </div>
    </div>
    </td><td>
    NAVIGATION<br><br>
    <a href="#1">LINK 1</a><br><br>
    <a href="#2">LINK 2</a><br><br>
    <a href="#3">LINK 3</a><br><br>
    <a href="#4">LINK 4</a><br><br>
    <a href="#5">LINK 5</a><br><br>
    <a href="#6">LINK 6</a>
    </td></tr></table>
    Custom Work
    BBUK
    DitRa
    VF Ink
    HellsHigh
    Banners

    Icons
    Cult Extras


    About
    Rules
    1. Do not alter the layouts excessively.
    2. Don't steal.


    [ VF Points: 0 ]   [ Points Today: ]
    [ Terms of Service ] [ About ] [ Getting Started ] [ FAQ ] [ Privacy Policy ]
    © VampireFreaks.com / Synth-tec Inc. 2012   All Rights Reserved