Since I've done a couple of virb layouts I've received a lot of messages from people asking me if I can tell them how to do a nice looking profile. Now the easy answer would be: "Learn XHTML and especially CSS!". If you want to create a profile that radically changes all defaults that virb provides this answer actually is the only thing I can say besides hiring me or another available designer to do one for you. However if you just want to change your profile from something ultra default looking into something a little bit more personal this little tutorial may help you get started!

1. Prepare some graphics

In order to make our profile look more individualized we need to create some basic graphics of our own. First of all we're going to create a nice page background. I decided to create this one. This background will repeat vertically which will lead to a nice "black page with a drop shadow on top of a grey background" effect. Feel free to do whatever you like but make sure you have one thing just the way I did it: there's a dead centered area which will serve as the actual content background. This area must have a designated width of: 770 pixels + left margin + right margin. What does this mean?

The default width of the content area in a virb profile is 770 pixels. This however doesn't include any margin on the left or the right side of the page. It will look nicer with some margin which is why I added some. I've chosen to make the page area 830 pixels wide. This means there's a margin of 30 pixels on the left and right side. 770 + 30 + 30 = 830 pixels. I hope you'll get the basic math. Once again: Whatever you do, make sure the content area is CENTERED. This means that whatever's on the left side and the right side should be equally wide in pixels.

To spice things a bit up I added a drop shadow to the left and right of my page area. I've added a strip of grey left and right as well resulting in a page background image of 1000 pixels wide. Of course some screens will be wider than 1000 pixels. Therefore we'll need to remember the exact color value of the left and right side of the background. We're going to use it later on in the CSS. In my case it's #cbcbcb.

For the sake of clarity I'be made the image kinda high (270 pixels) but if you want to optimize the page loading speed you can reduce it to only 1 pixel high. It's going to repeat vertically so the end result will look just the same.

Now that we've got our page background prepared, let's make a header image. I have used the picture that appears in the design of my website. I've made the header exactly 770 pixels wide, just as wide as the virb content area. To match the left and right margins I've chosen earlier I added a 30 pixels high black strip to the top and the bottom. The total height of the header image is 288 pixels in my case. Yours may be different. This doesn't matter at all as long as you REMEMBER the exact height. We're going to need it in a little while. My final header image is here.

2. Upload the image to your web host

Virb does not offer file storage for images used in our layout. Therefore you will have to store them on your own web hosting provider account. If you don't have one you could use services like photobucket.com. As long as the image can be stored somewhere on the internet, unaltered and accessible through a browser. After you've uploaded your images make sure you remember the URL to the images. In my case I've placed the images at http://www.i-marco.nl/virb/tutorial/

3. Use the style editor to choose colors, fonts etc.

Go to your home and choose 'customize'. Click 'basic styles' to go to the editor. In this editor you can let your creative juices flow freely. The profile will look nice if you choose colors that kind of match the background image and the header image you've created earlier. The 'page background' color won't be used in our final result but in order to be able to judge the looks you should temporarily choose a color that matches the content area you've defined when creating your page background. In my case the color was black so I've set it to #000000. Other than that, choose whatever you like. One thing is important though:

You MUST keep tinkering with the styles editor until you're 100% satisfied with your colors. Once you get to step 4 of this tutorial you can NOT go back to the styles editor anymore. After that changing colors, fonts, borders etc. will only be possible by hacking the CSS in advanced mode. This has to do with how Virb handles basic versus advanced customization So once again: Take all the time you need to make it look exactly the way you want it!

4. Alterations to the HTML and CSS

We're now going to do some basic HTML and CSS changes. This may sound intimidating but if you do exactly what I'm about to tell you it should come out just fine. Let's go!

First of all, from our homepage we click 'customize' and then choose 'advanced'. This will open code editor. Let's start with the easiest part: adding a container for our new header to the HTML. Scroll down a bit and find the HTML layout editor. Add the first line exactly as shown in the screenshot below:

Now we're going to the CSS. Scroll up a bit and you'll see the CSS styles editor. You will see CSS is made up of declarations with instructions enclosed by curly brackets. The very first section deals with div#body_container, div#profile_container. Here we'll add one extra instruction:

text-align: center;

Then we move on to the section dealing with div#body_container

Here the color code we remembered when creating our page background image comes into play. In my case it was #cbcbcb. See step 1 in case you forgot what this was all about.

Add the following instruction:

background: #your_remembered_color_code url(http://www.yourhost.com/your/path/yourpagebackground.png) repeat-y center;

Note that you will have to enter YOUR color code from step 1 and YOUR url to the background image you created. In the screenshot further below you will see my values entered.

Now we're going to add a whole new declaration to make our header image work. Add it below the section we've added the instruction for the pagebackground to. Again, the screenshot will clarify things. The declaration looks like this:

div#header {

width: 770px;

height: 288px;

background: url(http://www.yourhost.com/your/path/yourheader.png);

margin: 0 auto 0 auto;


}

Just like in the previous step it contains the proper URL to YOUR image for the header. Secondly you'll have to set the height instruction to the height of the header image you created. In my case it's 288 pixels but in your case it may be different. Enter the correct value.

Finally you'll find a declaration for div#profile_container. REMOVE the background instruction and replace it with:

text-align: left;

We're done! Scroll down and hit 'preview' to see the result of everything you've done. If it doesn't look as expected you've probably made one or more mistakes during step 4. Stay calm, go through all the things you've done in this step again and try to correct the problem. You can use the preview button as often as you like after every change you make. Are you satisfied with the result? Hit 'Save Changes' and your new custom profile is saved.

The profile I've created for this tutorial can be viewed HERE. Even though this customization is still rather basic it sure as hell beats each and every MySpace layout.

Want more?

There's a LOT to be learned about XHTML and CSS. This tutorial doesn't even scratch the surface of it and of course it wasn't intended as such. It's merely a set of hints to help you get started. If you want to further tweak your profile you can happily make changes to the CSS and the HTML in the advanced editor and hit the preview button to see what the results of your actions are. Happy? Hit 'Save Changes'. In all other cases you can keep playing with the CSS while using the preview button to see what happens. Broke it? Think it sucks? Just abandon the page without hitting the 'Save Changes' and nothing will change in your profile.

Closing notes

Being a professional web developer myself I realize that a lot of things that are completely obvious for me may appear complex and difficult to novices in the field. Yet I've tried the best I can to explain each and every step in the process as clear as possible. If you have any questions feel free to leave a comment. I'll either respond to the comment or update the tutorial to clarify things.

Happy customizing!