Disable classes in builder

How To
1

Hey all,

I have made a class to make elements fade in when they enter the viewport. This works as expected, except for how it displays in the builder. All the the elements with the fade in class stay invisible in the builder. Is there a way of disabling this class in the builder only?

I’m on Bricks 2.0 by the way.

Thanks!

1 Like
2

Do you need to, if you know it works when not in builder? You could target the CSS though just when the builder is active and display:none or remove it.

Are you using WPCodeBox? I just target the Url ?bricks=run to run some JS in the head and stick in something like: (change the CSS in both to your CSS as it will only run in the builder)

document.addEventListener("DOMContentLoaded", function() {
  if (window.location.search.includes('bricks=run')) {
    const style = document.createElement('style');
    style.innerHTML = `
      .my-element {
        border: 2px dashed red !important;
      }
    `;
    document.head.appendChild(style);
  }
});

Or just add this to functions.php

add_action('wp_head', function() {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
  if (window.location.search.includes('bricks=run')) {
    const style = document.createElement('style');
    style.innerHTML = `
      .my-element {
        border: 2px dashed red !important;
      }
    `;
    document.head.appendChild(style);
  }
});
</script>
<?php
});
1 Like
3

Thank you! Much appreciated! Well, I don’t really need it, but it would be nice to have the page layout visible in the builder when I deliver the page to a client.

1 Like
4

The body has a .bricks-is-frontend class, which the canvas doesn’t have… you could wrap your animations inside this, if you want a pure css approach.
Cheers Suat

1 Like
5

This is excellent! A really simple solution to my problem. Thank you.

1 Like