Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • jz1981 9 posts 78 karma points
    Dec 30, 2018 @ 21:48
    jz1981
    0

    How to build a CSS Editor

    Hi There

    I am new to Umbraco and currently working on a new Umbraco project. One of user requirements is to build a CSS editor which allows CMS admin to change pages background color, font color, font style etc. So how can I technically achieve this approach? somehow need to pass css variables to stylesheet programmatically through some events I guess? The ideal UI will look like below and when admin clicks 'save' button and it will update the stylesheet magically enter image description here

    enter image description here

    So far I found Damien's answer in this link might help(have not tried it yet) but would like to get more idea how to achieve it. https://our.umbraco.com/forum/using-umbraco-and-getting-started/79347-dynamic-css-using-document-types

    Thank you

  • Matthew Wise 271 posts 1373 karma points MVP 5x c-trib
    Dec 31, 2018 @ 12:57
    Matthew Wise
    0

    Hi,

    I have done similar a couple of times.

    First time I did this I created a less style sheet for the things that could change and compiled a stylesheet for the page using its ID as the file name. (Its been a while and cant remeber what I used).

    I also recently wrote an article using CSS3 variables - https://skrift.io/articles/archive/improving-user-experience-and-empowering-editors-using-css3-variables/

    Which would allow you to change the values without additional stylesheet loads however you would need to handle browser compatibility.

    EDIT

    As for the UI for colours there is - https://our.umbraco.com/packages/backoffice-extensions/spectrum-colour-picker/

    You could then combine that with - https://our.umbraco.com/packages/backoffice-extensions/tabulate/ to create a table of the things that can be changed

  • jz1981 9 posts 78 karma points
    Jan 01, 2019 @ 07:57
    jz1981
    0

    Happy new year Matthew

    Thanks for the info and I will have a read and give it a go and let you know the outcome.

  • Jamie Attwood 207 posts 501 karma points c-trib
    Dec 31, 2018 @ 19:43
    Jamie Attwood
    0

    Hi there, if there are a small subset of css properties to override, I would set up the style override property editors you describe on the home page document type. Then using a macro partial or partial view, you can recursively read in the values from the home page css properties into an Inline style section that you can embed in the head of the document after your master compiled css. For a handfull of properties the performance hit would be negligible. You can then use macro caching or view caching to minimize lookup time on each page load.

  • jz1981 9 posts 78 karma points
    Jan 01, 2019 @ 08:03
    jz1981
    0

    Happy new year Jamie and thanks for the info

    There will be lots of css properties for the entire site(pages) but I do plan to build macro partial although I just started to read a few doc about 'macro' in Umbraco. I guess the macro partial css editor will take css properties and somehow pass it as css variables to site css files as Matthew mentioned above.

Please Sign in or register to post replies

Write your reply to:

Draft