-
Posts
-
The preview pane doesn’t seem to load CSS properly unless it is a style built into an element, or is something that has been put into the custom CSS box in the theme settings….at least this is the case with the child theme. I have built several custom elements for the layout builder and I am trying to take advantage of the preview pane. The only way I can get the CSS to apply to the preview pane is if I bake the CSS into element itself or copy/paste all of the CSS to the custom style box in the theme settings. Ideally, I’d like to just have a CSS file that I can call…like you would any other CSS.
Is there a function or truck to getting the CSS to load properly in the preview pane?
Update – I tried baking the CSS into the element and that didn’t even work completely. Seems like the only way to get all of the CSS to load completely within the preview pane is to copy/paste all the CSS into the quick CSS box of the theme settings. If more devs are going to create custom elements for Enfold users, then there needs to be a better way to get the CSS loading properly for previews.
Update – I found where in the template-builder.class.php file where I need to add the CSS. That works, but I can’t ask people to edit a core file…not gonna get in that mess. I also tried doing a simple @import line to just import the contents of the css file into the quick css…that didn’t work.
Still looking for an easier way…
Hi,
Please check. https://kriesi.at/support/topic/custom-advanced-layout-builder-elements/page/2/#post-890686
Let’s continue in this thread.
Best regards,
IsmaelI did, but like I said, it didn’t work. I simply copy and pasted the code you shared, then changed the name of the css file. It failed to load it in the preview pane.
Is there a specific place in the custom element file that it needs to go? You gave some code, but didn’t say where in the file it must go.
FYI…these forums are in desperate need of an update. They are terrible on mobile. Just saying…
In your example, you changed the CSS for the preview pane itself. I’m talking about CSS for the custom element. So you get a live preview of it as it would look on the front end. I’m bit trying to modify the preview pane itself. Just want to have it load the CASE that applies to the element.
Hi,
Is there a specific place in the custom element file that it needs to go? You gave some code,
I actually mentioned it in my previous reply. It doesn’t matter where it goes, just put it below the shortcode_insert_button method or function.
Best regards,
IsmaelI don’t know how else to explain it. Your example modifies the CSS of the preview pane itself. That is in no way what I’m trying to do. The preview pane does not load the CSS for the element itself. The only way I have been able to get it to do so is via editing that core file or copy/pasting the entire style sheet into the quick CSS. Hell, the quick CSS box doesn’t even respect a simple @import line to do so.
Again, the element loaded in the preview pane, not the preview pane itself.
I think I figured out the problem…not a solution…but the problem. The code creating the preview pane is doing so with an iframe and it is difficult to pass css onto a generated iframe. So my lil hack will have to do for now I suppose…at least until someone comes up with a creative idea for getting it to work. Maybe some kind of hook that plugs into that file.
- You must be logged in to reply to this topic.