Starting from version 14+, components are rendered inside Shadow DOMs. This encapsulation ensures styles are scoped to the component and its childrens. If you are looking to customize the back-office you will need to add your styles within the scope of each component.
I've just been reading all about that after a Bing search.
I may have to rethink how I do this now. The problem I have is that the application I'm upgrading is a 'whitelabel' one where the site styling elements are determined in a configuration node in the site. On publish the CSS is then compiled dynamically from SASS into a global site CSS file for the front end. With V12 I could set this file as the custom CSS for each of the blocks in the back office, since the filename never changed.
I will need a way to somehow inject the styles into my block components, but this could be quite messy.
I've played around with Rick Butterfield's 'Umbraco.Community.BlockPreview' package and that may be a long term solution, but the current version has a bug when trying to render a block item containing a drop down list.
You could still do this but it will be a bit messy, if you are able to wrap all the block elements into a wrapper layout block and do the styles there, I think it will be inherited to its children. So you can switch the styles with a regex or something to the one plugin file for your needs. Hope that make sense :)
on the other hand you could just try adding a lit component just for styles, and check if its gonna pick up styles from there.
Custom stylesheet not bound to Grid Editor custom block views
I am upgrading a site with custom grid block views from V12 to V15.
I have created an alternative stylesheet for my block grid editor including styles to be used in the back office for custom Block element views.
However, the styles targeting the custom content do not get attached to the custom content.
I suspect this is because the blocks are injected into the Block Grid Editor after the stylesheet is bound and in a different context.
Is there a way to ensure that the custom stylesheet is bound to the block content.
In V12 the custom style sheet could be attached to individual blocks, but this doesn't seem to be the case in V15.
regards
John
Hi John,
Starting from version 14+, components are rendered inside Shadow DOMs. This encapsulation ensures styles are scoped to the component and its childrens. If you are looking to customize the back-office you will need to add your styles within the scope of each component.
Thanks Alfreed,
I've just been reading all about that after a Bing search.
I may have to rethink how I do this now. The problem I have is that the application I'm upgrading is a 'whitelabel' one where the site styling elements are determined in a configuration node in the site. On publish the CSS is then compiled dynamically from SASS into a global site CSS file for the front end. With V12 I could set this file as the custom CSS for each of the blocks in the back office, since the filename never changed.
I will need a way to somehow inject the styles into my block components, but this could be quite messy.
I've played around with Rick Butterfield's 'Umbraco.Community.BlockPreview' package and that may be a long term solution, but the current version has a bug when trying to render a block item containing a drop down list.
Thanks for getting back to me on this problem.
Cheers
John
You could still do this but it will be a bit messy, if you are able to wrap all the block elements into a wrapper layout block and do the styles there, I think it will be inherited to its children. So you can switch the styles with a regex or something to the one plugin file for your needs. Hope that make sense :)
on the other hand you could just try adding a lit component just for styles, and check if its gonna pick up styles from there.
is working on a reply...