Sign in Register
Go to solution
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 71 posts 285 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 71 posts 285 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 712 posts 4570 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
Please Sign in or register to post replies

Write your reply to:

Draft