May 10, 2004

MuNuby Help - CSS Previews

Wouldn't it be cool if there was a thingy or doodad that we could use to preview our site tweaks before implementing them? Right now we make a little change, save the file, rebuild the index, view the page... and over... and over... and over...

Well, wish no more! I've found a couple of neat little utilities that will let you preview your changes in real time without making permnent changes in your stylesheet.

Both of these utilities are from slayeroffice.

This first one is called CSS Preview. A text area and a div - enter your CSS, hit the preview button and see what it will look like.

The second one is called Style Sheet Tweak Favelet. It will let you take the current page, select a div from a drop-down menu, make a change, and preview the page in your browser. It only changes the display, not the actual stylesheet, so you would have to copy / paste your values into your stylesheet for the effects to be permanent.

I haven't tried them out yet, but they look interesting.

Posted by Madfish Willie at May 10, 2004 08:20 PM


A vastly superior method is available as an extension for Mozilla/FireFox. It's called EditCSS and it loads a page's entire stylesheet into the browser's sidebar. You can then make changes to the stylesheet elements and see the results in real time on the page. It also only makes changes to what you see in your browser. To make permanent, you just cut & paste the newly adjusted stylesheet into your templates.

Oh, and it's an absolute riot to paste other people's stylesheets into your own blog and view the results

This extension alone makes it worth having a Mozilla-based browser on your machine, and it is indispensable for both designers and those just wanting to learn to do some minor CSS tweaking on their own blog.

Posted by Light & Dark at May 11, 2004 07:47 AM

I use edit CSS a lot for tweaking designs... works wonderfully with Firefox as well

Posted by Rob at May 11, 2004 01:18 PM

Is there a trick to installing the EditCSS program or am I just a retard? I installed it both ways, installed the J??lib, restarted my browser. Now when I right click a page, "EditCSS" shows as an option but when I click it, nothing happens. Did I do something wrong?

Posted by Madfish Willie at May 11, 2004 04:01 PM

Well, it turns out there is some king of bug in XP. So I followed a link over to Edit Styles and bookmarked it. That works like a champ... and it lets you move the edit window around so the banner area is not covered.

Thanks for the link!!

Posted by Madfish Willie at May 11, 2004 04:22 PM
Live Comment Preview
Post a comment

Remember personal info?