How-to: Rotating VIRB Headers

This post has been rendered obsolete by this tip.

I get a lot of questions about how to do rotating headers on VIRB profiles. So here’s a quick tutorial. If the technique provided here is beyond your skill level, you’ll probably need to find someone who can help you execute it. But if you’ve got enough skill to create between 2 and 15 headers of the same dimensions, and enough CSS knowledge to put them at the top of your page as a background image in a div, you can probably pull this off.

The trick is in the taglines. You can define up to 15 taglines and they will automatically rotate. Each tagline is given a unique ID that lets it be styled individually. If you do a preview of your profile and look at the source, you can do a quick search for “tagline” and find something that looks like:

<p class="tagline" id="tagline_2">That's what they all say.</p>

It’s in the Meta section. They are numbered sequentially from 1-15 and can be styled with selectors that look like:

div.profile_meta p#tagline_1 {}
div.profile_meta p#tagline_2 {}
div.profile_meta p#tagline_3 {}

The tagline paragraph always has a class of “tagline” and can be styled once, then each individual tagline can just modify the background-image property.

Sample CSS for Rotating Backgrounds

div#meta div.profile_meta p.tagline {
    display: block;
    height: 420px;
    width: 770px;
    margin: 0;
    padding: 0;
    background-color: #111111;
    background-position: bottom;
	text-indent: -9000px;
}

div.profile_meta p#tagline_1 {
	background: url(http://www.yourimagehost.com/header1.jpg) no-repeat;
}
div.profile_meta p#tagline_2 {
	background: url(http://www.yourimagehost.com/header2.jpg) no-repeat;
}
div.profile_meta p#tagline_3 {
	background: url(http://www.yourimagehost.com/header3.jpg) no-repeat;
}

You can get creative with this, of course. You can put the Meta block somewhere besides the header, you can make enough room to display the tagline along with the image (and include links in the tagline), and keep in mind that this doesn’t have to be a full width header. In fact, it doesn’t have to be an image, it could be any CSS property you wanted to rotate.

Have fun.