Copied to clipboard

Flag this post as spam?

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

  • Andreas Kristensen 58 posts 258 karma points c-trib
    Jan 14, 2019 @ 17:08
    Andreas Kristensen

    Applying custom css to custom grid editor


    I am working on a project, where I develop several custom grid editors using LeBlender

    For now, I keep a seperate css file for each editor, i call the editors "modules". I would like to be able to apply these css files to the modules, so the person editing content in the backoffice, can get a more accurate representation of the modules appearance.

    I have thought of one solution, where you read the content of the css file into a <style> tag, directly in the template for the editor. But I would like to avoid inline styles, and I don't know if it's possible to only inline the css file, when looking a the editor in backoffice, and not on the actual website.

    Any thoughts? Thanks :)

  • louisjrdev 107 posts 343 karma points c-trib
    Jan 14, 2019 @ 22:53

    Hi Andreas,

    A start to this would be something like this in the preview markup in the grid editor:

     var CSSFilePath = Server.MapPath("~/_frontend_output/css/module.css");
    @if (System.IO.File.Exists(CSSFilePath))
  • Andreas Kristensen 58 posts 258 karma points c-trib
    Jan 15, 2019 @ 08:05
    Andreas Kristensen

    Yes, that is pretty much the solution I came up with, while in the shower...

    I just did it in a static method that returns the entire style string, and only returns it, if you are rendering the module in Umbraco, by checking the url for /umbraco/.

    I also compiled a special css file, with more specific styles and exceptions, so I don't end up styling the entire backend, but just the modules.

  • Søren Kottal 611 posts 3896 karma points MVP 4x c-trib
    Jan 16, 2019 @ 08:31
    Søren Kottal

    Hi Andreas

    You can add your own css to the backoffice using a package.manifest file.

Please Sign in or register to post replies

Write your reply to: