Geek asks and answers

Custom CSS / Styles

We are exploring the ability of users to use our application to override the default CSS.

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

I am torn between providing each site with a “custom” style sheet that can be edited from the administration area or some CSS design provided.

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

So, besides the obvious (is this the best solution?), I have a few additional questions:

Custom Css: Is there any CSS web editor available? Is there access to the server (.net) for CSS authentication (for validating css entered by the user)

Css Builder: Is CSS Web Builder Already Available? What is the best way to generate CSS based on user-provided rules (I was thinking of using some kind of template engine for this (NVelocity, Razor, etc.)?

thank

Decision

I added the answer below with the solution we were looking for.

+3
source share
4 answers

I think the key factor here is whether you want your users to “play with the code”

, - this ( @Caspar) css. css, W3 CSS Validator ( @Trikks).

Css. , ( , , ..), , . javascript , ( ..).

, -, - .

.net Css-. , Less, , asp.net mvc.

Css ( @Darin Dimitrov):

public class CssResult : PartialViewResult {

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

( ):

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

(views/css/index.cshtml):

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

. , , dom/class/id.

, , Url.Action("index", "css").

0

, Brosho Design jQuery

CSS . CSS .

+3

css, , /, . , .

CSS, API W3 CSS Validator, http://jigsaw.w3.org/css-validator/api.html

+2

, . , , URL- - :/someclienturl .

Anyway, here I used the circuit. One thing I would like to add is the ability for advanced users to add custom styles to the stylesheet that was ultimately written. Basically, the topic section applies, for example, to the #header selector. And ThemeSectionCssStyle contains custom settings for this selector. If you have more questions, let me know. As a result, it was a rather complicated sub-project. I'm curious to know what someone else came up with.enter image description here

+2
source

More articles:


All Articles