Exclude CSS rule in Pinegrow

General
#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?

#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:

image
image1043×582 20 KB

but in the browser it looks like this:

image
image1296×369 17.3 KB

#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.

#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.