Tool for testing CSS on fly?

tool test css

[cnvi]

I checked these forums but didn't see an answer to my question.

I have an "artsy" client that wants to see a pretty big handful of fonts, colors, styles, weights, line heights, etc before she decides on a final combination. I thought of doing it the old way (publishing a few dozen pages so she can compare) but then it occurred to me that there might be a tool out there specifically designed to work in Wordpress that would let me try CSS edits on the fly without writing changes. A preview tool or something like that. Yes I know how F12 in Firebug and Chrome debug work but I need to be able to click in a number of suggestions into the CSS while the client views the screen so she can tell me "can I see X with Y " and so on.

I have tried a few CSS try/on the fly tools but I can't find one that lets me try multiple entries at once with a live preview in a side window. I know I can just edit the CSS for each combination but that's not fast enough for this client.

Does anyone know of a Wordpress tool/plugin that would allow me to see CSS entries on the fly without writing them to the database? This is in Woocommerce Storefront. Any suggestions would be greatly appreciated. thanks in advance.

[not2easy]

I don't know of any tool or plugin that can do that, but you can "Add a User Stylesheet" in FF Developer Toolbar to view changes - so long as the stylesheets you want to try out all use the same name as the one in use on the live site so they would replace it in the view but not on the site. That would mean a lot of little folders, one for each version.

A note about using lots of different fonts - the web-fonts api would need to be active on the live site for the remote stylesheet to possibly show them.

I hope someone has a better response for you, this is not ideal.

[keyplyr]

Like not2easy, I test with Firefox's Developer Toolbar... easy & convenient, but my site is static, not WP.

[lucy24]

my site is static, not WP

Question: If you're using WordPress (or other major CMS), can you install it locally and run it off a pseudo-server like MAMP/WAMP?

[not2easy]

Yes you can install WP on a local server setup BUT it would be a pain in that after creating each optional css file would require editing the header.php between views OR creating a dozen child themes, then activating the various themes between views. Hence the browser view method where you would only need to toggle the custom css file on/off.

[cnvi]

Thanks for the suggestions. I need a "try CSS" tool on a live Wordpress site. There should be something out there in this day and age I just need to find it.

[keyplyr]

Tool for testing CSS on fly?

One last question... does it have to be a fly, or can it be any small insect?

[lucy24]

does it have to be a fly, or can it be any small insect?

I should think any bug would do.

[cnvi]

any bug will do.

[blend27]

Dev Toolbar >> Add user Style Sheet + FireBug>>CSS>>LiveEdit mode for now for me.

Have you tried doing a remote desktop session with the client/sharing your screen?

P.S. In a future FF will have an extension that will let you live-edit opacity of the drones(hunting for ice rabbits), so everyone will see thru... don't ask where that came from....