Adryan
December 8, 2022, 12:35pm
1
Hey, is there a way to exclude certain CSS rule from working in the builder? So it works on the website but NOT in Pinegrow.
Something like:
body:not(.pinegrow-editor-wrapper-or-something) div {
background: red;
}
So the div is red on the actual website and NOT red in Pinegrow?
Dom
December 8, 2022, 1:11pm
2
Surely you’ve already got what you want with the data-empty-placeholder attribute.
<body>
<section>
<div data-empty-placeholder></div>
</section>
<section class="bg-blue-400 dark:bg-yellow-400" data-empty-placeholder>
<div class="h-20 p-6">
<h1 class="text-6xl">Heading</h1>
</div>
</section>
</body>
In Pinegrow this looks like this:
but in the browser it looks like this:
Adryan
December 8, 2022, 1:47pm
3
I should have been more specific, sorry… My CSS rule is just an example. I want to apply some CSS only on the actual website and not apply it in Pinegrow builder.
Dom
December 8, 2022, 3:07pm
4
No need to apologise, I ought to have realised that you probably had a more specific use case in mind.
Don’t know the answer off the top of my head but have you checked the api documentation, there might be a clue there.
Adryan
July 10, 2023, 5:58am
5
@matjaz @Emmanuel Is something like this possible?
matjaz
July 10, 2023, 7:19am
6
@Adryan yes. All DOM elements in PG page view have data-pg-id attribute. This can be used to target elements:
html[data-pg-id] h1 {
/* only visible in PG */
}
html.not([data-pg-id]) h1 {
/* only visible outside of PG */
}
1 Like