Question

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 templating engine to do this (NVelocity, Razor etc.)?

Thanks

Solution

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

Answer 1

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").