I’m a front-end developer building a custom theme with Page Builder support. I have a custom max page width that I’m setting in my CSS but also want to support the full width and full width stretched options and manage some of the CSS for those in my theme CSS file.
I see the ‘panel-row-style’ div that is added around the row content when one of the full width options is selected, but what I would like to have is the full width class added on the ‘panel-grid’ div instead, and then an additional ‘panel-grid-inner’ div added inside of that so that I can manage my styles accordingly.
Is this something that I can do via filters/etc, or would I need to modify the plugin?
Thanks!
Hi Anthony
Awesome to hear you’re supporting Page Builder in your theme.
It’s definitely possible to add some custom classes to the main wrappers. This is handled by the siteorigin_panels_row_classes filter. You can take a look at that here:
https://github.com/siteorigin/siteorigin-panels/blob/develop/siteorigin-panels.php#L987-L991
So to be more specific about how this would work, here is a sample function:
function mytheme_filter_panels_row_class( $class, $row ){ if( !empty( $row['style']['row_stretch'] ) ) { switch( $row['style']['row_stretch'] ) { case 'full-stretched': $class[] = 'my-full-stretched-class'; break; case 'full': $class[] = 'my-full-width-class'; break; } } return $class; } add_filter( 'siteorigin_panels_row_classes', 'mytheme_filter_panels_row_class', 10, 2 );I hope that points you in the right direction.
Thanks, that helps! How could I go about adding a class if just the “Standard” row layout is selected? I tried adding another case for “standard” and also a default, but that didn’t work.
I think that standard actually just returns an empty string, but using `default` would be a good option.
function mytheme_filter_panels_row_class( $class, $row ){ if( !empty( $row['style']['row_stretch'] ) ) { switch( $row['style']['row_stretch'] ) { case 'full-stretched': $class[] = 'my-full-stretched-class'; break; case 'full': $class[] = 'my-full-width-class'; break; } } else { $class[] = 'my-standard-class'; } return $class; } add_filter( 'siteorigin_panels_row_classes', 'mytheme_filter_panels_row_class', 10, 2 );Sorry wait, default wont work because of the empty check. Using an else after the empty check would be the place to put it. I’ll edit my previous reply now.
Nice, thanks!