Sign in Register
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 77 posts 301 karma points c-trib
    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 :)

    Copy Link
  • louisjrdev 107 posts 344 karma points c-trib
    Jan 14, 2019 @ 22:53
    louisjrdev
    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>
}
    Copy Link
  • Andreas Kristensen 77 posts 301 karma points c-trib
    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.

    Copy Link
  • Søren Kottal 713 posts 4571 karma points MVP 6x 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

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies