Block grid editor - how to inject editor stylesheet per page
Hi,
I am working on a solution where we have different design/css (multi-site) setup, but I want to use the same block grid editor (same blocks/settings) but load a different stylesheet for the editor in the backoffice depending on the page i'm currently editing.
Any suggestions on how to do it in an as efficient way as possible?
I'm a bit of a rookie when it comes to angular, but would the right approach be to create a new property editor based on block grid editor and then in the controller load the appropriate css?
I can't find the source of how the block grid editor loads the default stylesheet.
Perhaps someone can point me in the direction of where in the source i can find the setup of how the grid block property editor or have some suggestions of how this can be done!
Thanks both of you for the replies, and as Huw Reddick states, your suggestion wouldn't fit this case since i want to reuse the same datatype.
If i have to duplicate the datatypes it gets quite bloated with editor information and if i want to change or make a new block available, it requires changes in all the duplicated editors which i want to avoid.
It's proposed for a SaaS-ish solution with many tenants and not just a multisite with a couple of root-nodes, so that would make a lot of datatypes.
I tried a solution where I have a angular controller that does a backend request based on the nodeId I'm on and provides the css to be imported for the backoffice view, but it has to be applied to each backoffice html/angular-view and it quickly becomes a huge amount of requests since a blockgrid can contain a whole lot of blockitems, so it doesn't seem like the right solution.
I really like the blockgrid editor and if i can get this to work it'll be great in our product! The quest goes on...
That could be a way to do it but it's not scalable enough. I want the site-specific css to be separated with some sort of dynamic/back-end supported solution.
Having one css with the specific styles/fonts/colors for hundreds of webs in one css-file would make it very large and hard do keep updated. Preferrably i'd also like to generate some of the styling from a settings node.
I'd rather use the reference you point at to refer to a more generics css for the grid style so the disposition is correct and the same all over, but somehow add the site-specifics on a per-site so different users can see the grid with different colors/paddings/fonts which is what i want to add.
One possible way (if i knew how to), could be to intercept/change the link for the selected css in the datatype/block settings and send the request with the current node i'm editing.
Then i could just send it to a custom controller and send back the correct css (generics + specifics combined). Doing that in the rendering is easy enough but I would really like to be able to do it in the backoffice/editing experience as well.
Great!
That really looks like a promising project that seems to provide a solution for what I need.
It's also not a lot of angular and i already have most of the backend components for passing css so it should really be manageable to implement.
I'll report back and mark it as a solution when I've have tried it out, but from what i see it looks like a perfect match. Super thankful for you seeing that, I realize I've read the article the project refers to before, but that was a while ago and now I suddenly get the point :)
Block grid editor - how to inject editor stylesheet per page
Hi, I am working on a solution where we have different design/css (multi-site) setup, but I want to use the same block grid editor (same blocks/settings) but load a different stylesheet for the editor in the backoffice depending on the page i'm currently editing.
Any suggestions on how to do it in an as efficient way as possible?
I'm a bit of a rookie when it comes to angular, but would the right approach be to create a new property editor based on block grid editor and then in the controller load the appropriate css?
I can't find the source of how the block grid editor loads the default stylesheet.
Perhaps someone can point me in the direction of where in the source i can find the setup of how the grid block property editor or have some suggestions of how this can be done!
Thanks / Martin
Look at the block grid editors next-to-last Option "Layout Stylesheet". Here you can define the default layout stylesheet.
Hope it helps.
Best, Maximilian
That would require a different blockgrid datatype defining for each page which is not what Martin was asking about.
Thanks both of you for the replies, and as Huw Reddick states, your suggestion wouldn't fit this case since i want to reuse the same datatype.
If i have to duplicate the datatypes it gets quite bloated with editor information and if i want to change or make a new block available, it requires changes in all the duplicated editors which i want to avoid.
It's proposed for a SaaS-ish solution with many tenants and not just a multisite with a couple of root-nodes, so that would make a lot of datatypes.
I tried a solution where I have a angular controller that does a backend request based on the nodeId I'm on and provides the css to be imported for the backoffice view, but it has to be applied to each backoffice html/angular-view and it quickly becomes a huge amount of requests since a blockgrid can contain a whole lot of blockitems, so it doesn't seem like the right solution.
I really like the blockgrid editor and if i can get this to work it'll be great in our product! The quest goes on...
I would try this solution: With your own Default Stylesheet you are free to define your own selectors. E.g.
or
you can define styles for every Site like
It should work.
That could be a way to do it but it's not scalable enough. I want the site-specific css to be separated with some sort of dynamic/back-end supported solution.
Having one css with the specific styles/fonts/colors for hundreds of webs in one css-file would make it very large and hard do keep updated. Preferrably i'd also like to generate some of the styling from a settings node.
I'd rather use the reference you point at to refer to a more generics css for the grid style so the disposition is correct and the same all over, but somehow add the site-specifics on a per-site so different users can see the grid with different colors/paddings/fonts which is what i want to add.
One possible way (if i knew how to), could be to intercept/change the link for the selected css in the datatype/block settings and send the request with the current node i'm editing.
Then i could just send it to a custom controller and send back the correct css (generics + specifics combined). Doing that in the rendering is easy enough but I would really like to be able to do it in the backoffice/editing experience as well.
Hi Martin,
I don't know if this will help at all, but may give you some isight/inspiration
https://github.com/rickbutterfield/Our.Umbraco.BlockPreview
Great! That really looks like a promising project that seems to provide a solution for what I need. It's also not a lot of angular and i already have most of the backend components for passing css so it should really be manageable to implement.
I'll report back and mark it as a solution when I've have tried it out, but from what i see it looks like a perfect match. Super thankful for you seeing that, I realize I've read the article the project refers to before, but that was a while ago and now I suddenly get the point :)
is working on a reply...