Web Page - Custom User Style
We all are unlikely to give an answer as thoroughly as A List Apart .
They even provided you with freely usable code .
source to share
Basically you will have css classes for all the main components of the page like header, content, footer, nav_menu elements, title, etc. Anything you want the user to be able to customize you create a css / ID class for him.
Then you have to show all these classes to the user and let him either enter the CSS code manually or show his dropdowns with all possible colors, for example, or other settings.
When the user changes the parameter, you can use javascript to change that property of the id / css class they selected. For example, if it changes the background color of the header from black to blue, you can do this:
document.getElementById("header").style.background-color="#ABCDEF";
(Jquery may have an easier way to do this)
At the end of the page, you may have a submit button that will set all css settings to a php script that will write these parameters to the database. Then you run a query like:
SELECT css_id,css_class,css_code FROM css_styles WHERE user_id='$user_id';
This will return all the css code and then you put it in the <head> instead of the external css file.
source to share