VIRB Customization Tips

I thought I’d jot down a few notes on my experiences with customizing VIRB pages for those with enough skill to pull it off on their own. This is NOT a CSS primer, I’m just some workflow tips I’ve picked up on the way. It’s all fairly obvious, but I thought it might help some aspiring designers who might be doing things the hard way. I just finished redesigning my own page after a sleepless night…

I like to start in Firefox because of the way it allows you to handle opening new pages in tabs. I’m sure Safari can do the same, so it’s your choice. I use the Showcase Sidebar to make life a little easier when I can spare the screen width, but again, that’s a personal choice. If I open the advanced customization page in Firefox and press the preview button, and I have Firefox’s preferences set to open new pages in tabs, it will open a new tab with the preview pane for me. This is the closest I’ve been able to get to a live preview while editing VIRB pages.

I arrange the HTML portion of the configuration as necessary, adding semantic divs to separate content where I need to. For example, I often end up making a new div called “branding” that will span the width of the page, leaving the original left and right columns in place below it. I usually edit this right in the browser as it’s not very complex and the page below it allows for cutting and pasting of the additional modules.

Then I copy out the CSS portion into CSSEdit or TextMate. I save versions as I go along, which have saved me a couple of times when I make careless mistakes at 4 in the morning.

I then save the current changes to the page and open it up in Xylescope so I can easily examine the structure and start styling the elements. You can also do this in CSSEdit’s X-Ray. Don’t expect X-Ray to update with live changes, though, as the embedded CSS takes higher precedence and you’ll end up using a ton of unnecessary !important tags to pull it off.

As I style I just regularly select all, copy and paste into the css box on VIRB. Then I hit the preview button to see the current changes take place in the other tab. It’s possible to completely restyle and prep a page without ever saving the changes, if your HTML structure is already fairly set.

I’m thinking their may be a way to trigger the preview button from Applescript, in which case I could use the It’s All Text Firefox plugin to edit the CSS field and trigger a script from TM to see the page preview update. That’d be cool.

One trick I’ve picked up is that the rotating captions on VIRB each have a different CSS ID. This means that you can style them with images and build a rotating header image without any scripting. See Jeremy Cowart from whence I took the idea, or my own slightly different implementation on Reality Photography.