Edit your website, blog design live and without breaking it

CSSVista is a tool any blogger or website owner will find useful. The Windows-only application allows you to load any website in Firefox and Explorer and then edit its CSS code live, with the changes showing immediately in the two browser windows.

cssvista CSSVISTA. The application makes editing website designs easy. CSSVista loads the page in Explorer and Firefox and allows you to edit the designs live, with changes showing up immediately. Click on photo to view larger image.

I’m working on a new website on online journalism and independent publishing and CSSVista saved me a lot of time in finalizing my site design. I use Drupal for the site, building on the Zen theme, a very good theme to base your design on. I will launch the new website early next week with an explanation on my choice of content management system.

What I did before I found CSSVista was 1.) I’d edit the template (Zen uses PHPTemplate) and CSS files in Bluefish, 2.) Upload the files into the server, 3.) Cross my fingers; and 4.) Hit reload like crazy to see the changes.

This process is tedious and I was about to look for ways for Bluefish to be able to edit the files directly in my web server or research on how to make Firebug work in my Ubuntu Linux installation when I found a link to CSSVista in the popular page of del.icio.us.

CSSVista requires either Windows Vista or XP and Microsoft’s .Net framework.

To start editing your website design in CSSVista, just enter the address and when the page finishes loading, click on Edit CSS. The application will then load three panes (see photo above): one pane contains the various CSS files referenced by the page, another pane loads Internet Explorer’s view of it (the version will depend on the one already installed in your PC), and another pane shows Firefox’s rendering of the page.

You can then edit the styles, with your changes immediately displayed in the two browser panes. When you’re satisfied with the changes, you can just copy the new styles and overwrite your older CSS file.

I’m not particularly good at coding or designing and CSSVista saved me what would have been hours of work. It also helped me spot design quirks I introduced into the template that rendered the sign ugly in Internet Explorer.

I just wish there’s a Linux equivalent for this application or even a comparable online app, CSSFly doesn’t fly in Swiftfox and I couldn’t edit my styles. Oh well, here’s hoping I can make Firebug work again in my laptop.

Support this blog and independent reporting on Cebu

3 responses

  1. Huh? Firebug doesn’t work in Linux?

  2. It doesn’t work in my install. I use Swiftfox instead of Firefox and it doesn’t run. I’m still checking on the problem, though.

  3. Running it on Vista – superb util. Got more to check though.

    Thanks for the tip

Leave a Reply

Your email address will not be published. Required fields are marked *