ucantblamem

I’m really enjoying the Virb experience, it’s jam-packed full of really quality people and it’s just all in all kickin along nicely. Just a reminder if you haven’t already got a golden ticket to the party of the century, leave a comment with your email address and I’ll send one of my 17 remaining invites your way!

Probably no less than a dozen times over the last week I have had people ask me how I customised my Virb profile header, so being the developer type who believes strongly in abstraction, I figured I’d post the solution for all to see.

I know there’ll be a few people here straight from Google search, so what you’re looking for is here:

#header {
 width: 736px;
 height: 216px;
 margin: 15px auto;
 background: url(http://myheader.com/img.jpg) no-repeat center center;
}

#meta table {
 visibility: hidden;
 margin-top: 55px;
}

Obviously, you’ll want to overwrite these declarations that are already in the stylesheet and of course just change the URL to YOUR custom header img.

For a quick explanation of what we’re doing; We’re basically just hiding the (default) profile image, username, age and tagline that normally appear at the top of a profile. This leaves us with a big blank space that is filled by the #header declaration.

Pretty simple right? I had been giving people quite a bit larger piece of code, but realised while writing this that half the stuff wasn’t needed anyway.

So, how bout background images James? Right, well… Try this:

div#body_container {
 width: 100%;
 background: url(http://mysite.com/bg.jpg) repeat-x 0 0;
}

And just make sure you have something like the following in the “Advanced” section:

div#profile_container {
 width: 770px;
 margin: 0 auto;
 padding: 15px 0;
}

The keys being the width and margin declerations.

Happy Virbing peeps!

This entry was posted on Wednesday, February 28th, 2007 at 6:54 am and is filed under Design, General. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.