This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How to set content width and support full width/full width stretched

10 years ago · Last reply by Anthony Garand 10 years ago

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!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Greg Priday Staff 10 years, 1 month ago

    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.

  2. Anthony Garand 10 years, 1 month ago

    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.

  3. Greg Priday Staff 10 years, 1 month ago

    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 );
  4. Greg Priday Staff 10 years, 1 month ago

    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.

  5. Anthony Garand 10 years, 1 month ago

    Nice, thanks!

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread