User defined CSS / Styles

We are looking into providing users of our application the ability override the default site CSS.

Currently they can choose a site theme but it would be nice to allow them to change properties such as background color, font color, font face etc.

I'm torn between giving each site a "user defined" stylesheet that can be edited from the administration area or providing some kind of CSS builder.

The first option provides the most flexibility but could also be the most problematic and requires the user to have some basic understanding of CSS.

So aside from the obvious, (which is the best solution?) I have a few additional questions:

User Defined Css: Is there a web based CSS editor available? Is there a server side (.net) CSS validator available (for verifying the css the user enters)

Css Builder: Is there a web based CSS builder already available? What is the best way of generating the CSS based on the rules provided by the user (I thought about using some kind of templ开发者_StackOverflow社区ating engine to do this (NVelocity, Razor etc.)?

Thanks

Solution

I've added an answer below with the solution we went for.

---

however never used, recently I looked at Brosho Design in the Browser jQuery Plugin

With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.

demo here

---

I'd recommend to build a custom css editor since it's the easiest way to limit which elements and attributes the user will be able to edit / customize, and how. Just keep it simple and you will do just fine.

To validate CSS you could use the API of the W3 CSS Validator, http://jigsaw.w3.org/css-validator/api.html

---

I've built an application that does exactly this. It's a little more involved as there are multiple master pages and themes, and the user can attach custom urls to load themes - example: /someclienturl would load a specific theme.

Anyway, here's the schema I used. One thing I wish I added is the ability for power users to add custom styles to the stylesheet that's eventually written. Basically, a theme section would apply to a selector #header, for example. And ThemeSectionCssStyle holds user added customizations for that selector. If you have any more questions let me know. It ended up being a fairly involved sub-project. I'm curious to see what anyone else came up with.

---

I think the key factor here is whether you want your users to 'play with the codez'

If you do then something like this (posted by @Caspar) can be helpful in generating the css. If you do allow direct access to the css then the W3 CSS Validator (posted by @Trikks) is definitely necessary.

In my case I didn't want to provide direct access to the Css. Looking around at various sites that allow you to change simple style properties (background-color, font-face, color etc.) it seems that they have just created their own interfaces for this. There are plenty of javascript plugins around for making this process quite slick (color pickers etc.).

Once you have the styles stored somewhere you need some way of rendering them out.

I couldn't find any .net Css writers. I think it may be possible in Less but the solution was quite simple just using what's built into asp.net mvc.

I created a Css action result (courtesy of @Darin Dimitrov):

public class CssResult : PartialViewResult {

    public override void ExecuteResult(ControllerContext context) {
        context.HttpContext.Response.ContentType = "text/css";
        base.ExecuteResult(context);
    }
}

Then in my controller (a simple example):

    [HttpGet]
    public ActionResult Index()
    {
        var styles = new Dictionary<string, string>()
        {
            { "color", "red" },
            { "font-family", "Consolas, Courier, Serif" },
            { "font-size" , "12px" }
        };
        return this.Css(styles);
    }

Then my view (views/css/index.cshtml):

body {@foreach (var item in Model) {
        @string.Format("{0}: {1};", item.Key, item.Value)
    }
}

This will essentially render out the styles in the passed in dictionary. Of course you may want to create a specific class for holding these styles so that you could also specify the dom element name/class/id.

Finally to render out the stylesheet on our page we can call Url.Action("index", "css").