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.

5

@matjaz @Emmanuel Is something like this possible?

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
7

AWESOME. Thank you :slight_smile: