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 17 posts 127 karma points
    Jan 14, 2019 @ 17:08
    Andreas Kristensen
    0

    Applying custom css to custom grid editor

    Hello.

    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 :)

  • Louis Jackson-Rees 91 posts 317 karma points c-trib
    Jan 14, 2019 @ 22:53
    Louis Jackson-Rees
    0

    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))
    {
      <style>
        @Html.Raw(System.IO.File.ReadAllText(CSSFilePath));
      </style>
    }
    
  • Andreas Kristensen 17 posts 127 karma points
    Jan 15, 2019 @ 08:05
    Andreas Kristensen
    0

    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 362 posts 2130 karma points c-trib
    Jan 16, 2019 @ 08:31
    Søren Kottal
    100

    Hi Andreas

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

    https://our.umbraco.com/Documentation/Extending/Property-Editors/package-manifest

Please Sign in or register to post replies

Write your reply to:

Draft