dynamically change css for site using liquid template language vars in rails app

So i have a rails 3 sort of site builder app and i am using liquid language so site owners can customize their own site.

At the moment when a site owner uses one of our themes they get a layout html, and a css file with liquid variables in them.

They then also get a开发者_运维技巧 settings form that changes the values that are referenced by liquid inside the css file.

I now want to show the settings form at the top of the site owners site view so that they can see as they change the for example color picker of background color and the sites actual background color changes as well.

I cant figure out how to do this instantly as i cant save the new color to database and then re-render the css file with the new liquid values using a color picker as wont be fast enough. So i need a way to change the css on front end and somehow reference what i have changed and up date the database when the user clicks save changes.

Any help / examples / experiences on how to do this would be much appreciated.

thanks a lot in advance Rick

You can use jQuery's .css() method. So just have a .keypress() on a input field where people can change the width for example and everytime they press a key in there, your .css() updates in real time.