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

I've been there some months ago. While using dynamic CSS generated by a dedicated handler / servlet has been the first solution, to improve performances a customized CSS is now produced on file overrinding the basic elements of the standard CSS:

<link rel="stylesheet" href="standard.css" />
<link rel="stylesheet" href="<%= customer_code %>/custom_style.css" />
...
<img scr="<%= customer_code %>/logo.png" />

Each custom CSS will have its own URL, so you can make the browser caching them.

This will make you saving for each request the users will make:

1. traffic from the database to the application layer
2. traffic from the application layer to the browser
3. some computing at the application layer

I'll second the idea the user should have to fill out a web-form detailing what customizations they want to make.