More on VIRB Styling

I’ve tweaked my system for styling VIRB profiles a little and thought I would share the results. My system is tailored to OS X using TextMate and CSSEdit, but the basics are transferrable to any platform/editor. You could do this on a PC with Notepad, if you were exceedingly patient (or perhaps simpleminded). You do, however, need some basic coding skills and whatever graphic skills your profile dreams demand. Here’s my personal workflow…

Structure

First, decide on the basic structure of your page. Figure out your columns, rows, headers, footers and determine what modules need to appear in each section. Put together a basic, valid XHTML layout in your text editor, leaving spaces where you’ll insert the modules. When it comes to graphic elements, you can hardcode headline elements or other pieces that you can use image replacement techniques on. You also have the option, on VIRB, of creating custom modules to hold information such as banner graphics and other HTML components and inserting them just like regular modules in your layout.

Integrate

Open up your VIRB advanced customization page and start copying out the modules you want to use and pasting them into your XHTML layout. Once you’ve got it all together, paste the structure portion of the file (between the body tags but not including them) into the HTML textarea on your advanced customization page. Don’t save yet.

Preview

Hit the Preview button on the advanced customization page. It will open in a new tab or window (depending on your settings). View source on this page and you’ll see your CSS styles and the way your HTML is going to play out. Copy and paste the entire source into a new text file.

First, in your new text file, change the stylesheet link to a file called working.css with no preceding slash. Then, delete all the IE conditional comments in the header. Next you’ll see a comment that says “begin custom styles[…]”. Cut out the entire style section into a new file, removing the style tags from the beginning and end, and save it as working.css in the same directory where you’ll save your HTML file (the one you just cut the CSS from).

Now, back in the HTML file, delete the link to deny.css and the script after it. Leave the closing head tag, but delete any scripts following it. When you get to the body tag, leave it in place but delete everything from after the body tag to the “Begin Layout” comment.

At the end of the file, delete everything after the “End Layout” comment to the closing body tag. Save the file.

Styling

Assuming you already have your background and image elements cut out and ready to go, you should at this point figure out where to host them. I have a directory on my server for VIRB files, and just create subdirectories for each profile I work on. Put your files on the server and check in a web browser to make sure you have the path correct.

If you’re using a CSS editor with a live preview (like CSSEdit), switch to it and open the CSS file. Then add the HTML file to the live preview and you’re ready to begin styling. Make sure you use absolute urls to refer to your images and your page will transfer fine to your final profile. Now you can just style away like it was any other web page, seeing your changes live. Save your work as you go. When your finished, you’ll just copy the CSS from the editor to the CSS textarea on VIRB. You can do this at any time and hit preview again to see how things are shaping up.

If at any point you need to move a module, or add/remove one, just make the change on VIRB and hit preview. When you view source you only need to copy the HTML between the “Start Layout” and “End Layout” comments and replace the same in your local HTML file. CSSEdit will automatically reload when the file changes.

A tool like Firebug or Xylescope can really help in reducing redundant CSS on VIRB. If you start with the default VIRB CSS and tweak it, you need to make sure you don’t get overridden later in the stylesheet by an existing style. If it happens, Firebug can come to the rescue by showing you all of the rules that apply to an element (use the CSS Inspector).

Hope that was a little more in depth than my last tutorial. It should be, I’ve learned a lot since the last time I wrote about this. I’ll be posting a similar article to stylevirb.com soon, where I’ve volunteered to be a contributor. Hopefully Jordan won’t mind me posting twice ;).

CSS» cssedit» design» textmate» tutorial» virb» xylescope»