Change Theme / CSS based on user

Question

I am building a product that we are eventually going to white-label. Right now I am trying to figure out the best way to facilitate these requirements programmatically so the user can update the basic design of the site (ie header color, etc) via their profile/settings form.

Requirements:

1. User can update the logo (this is complete)
2. User can update basic design elements (based on CSS), ie header color, footer color, sidebar color - all basic CSS overrides

We don't want to use ASP.Net Themes/Skins because that requires storing static themes in the local file system. We would like to use CSS to override the base style and store this in the database.

Our initial plan is to store the CSS in a simple varchar field in the database and write that CSS out to the Master Page on Pre-Init event using "!" to override the base styles. Is this the best solution? If not, what have you done to accomplish this functionality/

Answer 1

If I understood correctly, you want to facilitate color and typography related changes. What about layout? If we safely assume that only color and typography are going to change, we can reuse the same style classes at the end of existing base CSS file and thus override the styles (using !important though a good idea, prevents users from overriding with their custom styles).

These newly created classes can be compressed to a single line string and stored as a varchar, which would then be linked/copied inline while building the page. I can think of the following options

1. Inline CSS
2. Create a file partition where you can dump the generated CSS files and let browsers refer to that location (by creating a softlink?)
3. Use Ajax, retrieve the CSS and modify the DOM

If layout is going to change, we are in a thicker soup, I would avoid this as the complexities involved with scripting/event-handling are way too much.

Answer 2

With php for example you can create dynamic css, so this coupled with the user information stored in a db would surely suffice.

Try here or here as an introduction.