How are you all handling your padding?

How To
,
1

For pages that I use a Bricks Template on (most) it seems to make the most sense to have no margin enabled under “Content”:

SCR-20250708-jamp
SCR-20250708-jamp706×482 13 KB

Then adding default spacing under “Section”:

SCR-20250708-jbdh
SCR-20250708-jbdh708×314 15.4 KB

This works great when I’m building everything with Bricks – but – occasionally I just want to use what’s out of the box, like with the “My Account” page in WooCommerce, which results in everything being mashed together:

SCR-20250708-jcde

What’s the best way to avoid this? I’m sure I could just assign my padding variables on the content of anything that has .woocommerce-page on the body – or – come up with a conditional on a Bricks theme that’s connected to is_woocommerce(), but that doesn’t really solve the issue outside of this one plugin.

Is there some way to determine if a custom Bricks template has been added and apply styles conditionally? Similar to bricks_is_frontend() for determining if it’s the builder or not?

I tried to toy with \Bricks\Database::$active_templates to see if I could identify it there, but it seems like for those pages if a template isn’t used it outputs the ID of the page itself under Content.

2

A template should take up the space assigned to it.

If the template is a DIV it should take the minimum space to render the element in it
If its a Container or block it should take the maximum space it can get. Which is decided by the outer element, a WordPress page in this case.

So if you use a WordPress page, then the page should define the place and space it gets.
So if you load it by shortcode you could set sizes to the shortcode element.

Or you could set sizes inside the template. To determine how big it will be.
But this might become a problem on smaller devices like mobile phones.

Or can you build the WooCommerce pages also in Bricks giving you full control over everything.

3

In this case I’m trying to not use Bricks Builder at all and instead just use the default functionality that comes with WooCommerce – so I’m not setting any sections, rows, etc.

Biggest thing I’m trying to understand is the best way to target a page that’s not using a Bricks template so I can add the extra padding to the content area.

4

WooCommerce uses endpoints instead of fixed pages. So the account page contains the menu and the content endpoint where the menu item pages are rendered.

I would use the browser inspect tool to find common classes or id’s to put custom css at.

The var css from your second image doesn’t work outside of bricks if not for another css plugin.
So normal css should do it. Put it inside your theme’s css box or some snipped plugin.
Make sure to only target the classes for that specific element you want to change.

Classes can be stacked by joining them .ul.li.my-text-class {css-propery:css-value;}

5

Yes, totally understand all that – thank you!

I can use .woocommerce-page to target any page that’s using WooCommerce, that I already know.

I’m looking for something more generic that determines if Bricks is used at all on a page.

6

As stylesheets are usually rendered site wide, i don’t understand the need to only give the CSS to non bricks pages.

This is the best i could find.

7

Mostly because I’m using Non Bricks pages and the padding I use for Bricks pages looks awful on them.

Thanks for all your help, but I think I’ll need to keep digging.

8

But by using the right CSS selectors, you can target the non Bricks pages, while the Bricks pages stay unaffected.

Only if The Bricks pages use the same css selectors (which you can select…) as the non Bricks pages, then the css would apply to both.

9

I understand, but I’m hoping for something more generic, .woocommerce-page is plugin specific.

In my specific example – WooCommerce: My Account Page – the Bricks classes are still on the body tag even if you do not use a custom template:

SCR-20250708-lnal
SCR-20250708-lnal2574×390 82.1 KB

10

I think they are site wide, and whereby splitting them up would use more data for 2 stylesheets and more prone to error’s as it must switch stylesheet.

Also, Bricks is your WordPress theme, so even though you don’t use it on that page, it’s still active on the whole website.

11

I don’t think we’re on the same page, but I appreciate your responses.

12

Try this function.

<?php

  function has_bricks_content() {
  
    $bricks_content = get_post_meta(get_the_ID(), '_bricks_page_content_2', true);
    
    if ( '' < $bricks_content ) {
    
      return 1;
    }
    else {
    
      return 0;
    }
  }

?>

For now information read my blog post.

1 Like
13

This is perfect. :+1:

14

Glad to hear it.

I think that article @Ferry linked to (Checking if a Page has Bricks content - BricksLabs) does something similar.