A VIRB Quickie

Not sure why I didn’t try it before, but here’s a quick tip. If you modify your HTML section on VIRB and hit preview, then save the source of the preview to a file, you can separate out the CSS and HTML for live editing in CSSEdit.

Just find the section labeled “Begin Layout” and create an html file from there to the “End Layout”, stealing the doctype and html tag from the original source. Cut out all the links to other CSS files and javascripts. Then cut out the custom style section and place it in a new CSS file in the same directory. If you’re using TextMate, you can just drag the icon from the title bar of the CSS file into the head section of the HTML file and create a link to the new CSS file. Be sure to remove the original style section from your HTML.

Then just open your HTML file in the preview window of CSSEdit, and the CSS file in the edit window. You’ll be able to make your custom mods with live preview! It’s quite a timesaver on complex layouts. Note that if you need to make layout changes to the HTML section, you’ll need to copy the new layout code out of the preview source code and into your html file in TextMate. CSSEdit is pretty good about automatically updating when a file changes, so just pasting in the layout section and saving should do the trick.