Making Your Own Basic VF Layouts.
Making a layout may seem pretty difficult, but once you get the hang of it, it's as easy as tying your shoes!
This section will go through the basics of making a vampirefreaks layout. Read steps carefully, if you have any further questions feel free to contact me.
Step 1)
First things first, when choosing a layout template for your layout; choose "oldskool". Personally I choose it, because it's FAR easier to make a layout and edit a layout to your specifications when in "oldskool" form.
Step 2)
I usually start all vf layouts by deciding what I'd like to be shown on my profile and what I'd like to keep hidden. This can be done in the following manner.[from left to right, top to bottom]
These are the codes you use to hide these attributes.
*VF users online section[not friends online section]
<style type="text/css">
.maintop table { display: none; }
</style>
*the left navigation
<style type="text/css"> .leftnav { display: none; }
</style>
*vampirefreaks.com title
<style type="text/css">
.maintop img { display: none; }
</style>
*default picture
<style type="text/css">
.defaultpic { display: none; }
</style>
*thumbnail gallery
<style type="text/css">
.thumbnail { display: none; }
</style>
*gallery link:
<style type="text/css">
.gallery { display: none; }
</style>
*video link:
<style type="text/css">
.videos { display: none; }
</style>
*user information:
<style type="text/css">
.userinfo { display: none; }
</style>
*journal link:
<style type="text/css">
.journal_entry { display: none; }
</style>
*profile, likes, dislikes, and fave music titles:
<style type="text/css">
.profile_title, .likes_title, .dislikes_title, .music_title { display: none; }
</style>
*report and block buttons:
<style type="text/css">
.buttons1 { display: none; }
</style>
*add to : friends cult, block, shitlist buttons:
<style type="text/css">
.buttons2 { display: none; }
</style>
*leave a comment and rate buttons:
<style type="text/css">
.buttons3 { display: none; } </style>
*rate bar:
<style type="text/css">
.rate { display: none; }
</style>
Simple enough just copy and paste the codes to hide them on your profile. you can also link the codes. (see picture)
Step 3)
Now that you've decided what you want and don't want shown it's time to set your layout up!
It's best to start with the "html, body" part of the layout.
This is written as follows:
<style type="text/css">html, body { scrollbar-face-color: 000000;scrollbar-track-color: 000000;scrollbar-shadow-color: 000000;scrollbar-darkshadow-color: 333333;scrollbar-3dlight-color: 000000;scrollbar-highlight-color: 666666;scrollbar-arrow-color: 3399ff;background-color: 000000;} </style>
[that's the basic code]
Now when you see that you're probably thinking what are those numbers? Those numbers stand for color codes. Which you can find at visibone.
To co-ordinate where you place these colors refer to picture.
Step 4) [optional]
Now this step is completely optional. This is if you'd like a background image in your brand new layout.
Most people prefer the simple black background, but some like to have images in their layouts, so this is how you do it.
Right before where it says background color insert the following:
background: #000000 url('INSERT PICTURE LINK HERE');
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
When doing your layout this way you will not need the "background-color:" part, because it's already there.the url part, where it says INSERT PICTURE LINK HERE, is where you can put the link to the image you want, and when I say link I mean the link that starts with http:// and ends with .jpg. .gif, .png, etc.
Where it says "background-repeat" this will decipher whether your image will be in one place or all over the layout repeated.
Repeat is a default,no-repeat is if you'd like it in only one place,repeat-x(horizontal repeat), and repeat-y (vertical repeat).
Now positioning is if you'd like it in only one place, above it indicate that it'll be in the bottom right of the layout.When writing in where you want it located, note that you write the vertical THEN the horizontal placement. Vertical position can be top,center or bottom, and horizontal positions are left,centeror right. If you don't right a position, then the default is the top left.
Finally comes the scrolling options. Which is either fixed, background sits in position. The other is scroll, the background will scroll when you scroll your mouse.
Step 5)
This is the part where you choose your layouts text colors and such. This is also before the </style> part, simply insert it right before it.
body, table { color: #33ccff; }
a:link, .menu2, .menu2 a:link { color: #3399ff; }
a:visited, .menu2 a:visited { color: #0066ff; }
a:hover, .menu, .menu a:link, .menu a:visited { color: #99ccff; background: #000000; }
input { color: #33ccff; border: 1px solid #0066ff; }
The first color is where you can insert which color you'd like to use as your text color for the layout, here I chose a simple shade of blue, kinda light.Next is your link colors, I used the same as the txt color.Followed by the color the link turns once it's already been clicked. Then what color it turns when the mouse is over it.The input is if you decide to make a button like link. using the form action= method. I used the same color as the text with the border color, you can use any colors you like for any of these fields, but I chose to use these.
Step 6)
Now that you have all the layout html done you "close" it by writing </style>.
This is the fun part, adding some flare to the otherwise "basic" layout.
You write your profile stuff after the </style>. This is where you can ramble all you like and even put some pictures!
Most VF user will spice it up like in the picture.
You can upload a picture at tinypic and use the "direct link" code. Check my F.A.Qs to know the image code.
To know specific links to certain parts of your profile check the VF page links page.
All the best of luck with your basic layout!