Question

I have an application where I have a jQuery color picker. I will get the value of the user chosen color, then I will put that into to session variable. Now I want the contents of the external stylesheet to be modified based on the color which is selected.

Example:

In external “style.css” I have like .topbox{ background: #dedede; }

Now after the user selects the the color picker, the value of background should be over written

Answer 1

You can’t modify the external CSS permanently, but you can change the CSS for an element on the page easily using jQuery.

var colour = "#cecece"; // returned from colour picker
$("#element").css("background-color",colour);

---

Edit: Ahh, my bad. Didn’t realise you’re doing it server side. I wouldn’t recommend trying to modify the file itself. Instead, I would recommend having an interim thing (either values stored in a database or an XML file that has a good structure and can be updated) and then recreating your CSS file based on these values.

You could auto-save the values when you change the colour picker by performing an AJAX call to your server. Something along the lines of this in whatever event gets called by your colour picker:

$.ajax({
   url:'/update/', 
   data: {'name' : 'background-color', 'value' : colourFromPicker },
   success: function(data){ console.log(data); }
});

Of course – all depending on your server side code but it does give an example of what can be done.