Home>Support>Need access to .panel-grid wrapper

Need access to .panel-grid wrapper

I need to enable the user of my theme to add full-width background rows, inside which should be a “limited width” PB row holding the columns.

I’ve checked the following:
– in the PB settings, i’ve set the container to empty. (Tried “body” also).
– I’ve set the colored row to “full width” and “full width stretched”
– console shows no error

What I want:

What I get:

Now, the generated html:

<div class="panel-grid" id="pg-11331-3">
    <div class="panel-row-style-background--purple siteorigin-panels-stretch panel-row-style" data-stretch-type="full">
         <div class="panel-grid-cell" id="pgc-11331-3-0">
// etc...

I would need access to that specific “.panel-grid” div (with id #pg-11331-3). Is there a way to do that, programmatically or via the GUI? Perhaps via a row hook ?

Thank you in advance for helping me sort this.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 7 months ago Alexandre Plennevaux

    For the moment, I hacked a workaround in javascript (jquery).

    Here it is, in case it helps someone else:
    you need a div.maximum-width that wraps around the Page builder area.
    Then on the specific row that should be full-width, add classes “background full” in the row editor.
    In my CSS file, I have background-color classes (.background–blue for example) that I add to the panel-grid div wrapper, generated by PB.

    // make some width full background (pagebuilder does not allow it)
    var window_width = $(window).width();
    var max_width = $('.maximum-width').width();
    var delta_width = window_width - max_width;
    var correctif = (delta_width/2);
    var el_classes, colour_class;
    $('.background.full').each(function(){
    	el_classes = $(this).attr("class").split(' ');
    	el_classes.forEach(function(e){
    		if (e.beginsWith('background--')){
    			colour_class = e;
    		}
    	});
    	var row = $(this).parent('.panel-grid');
    	row.addClass(colour_class);
    	row.css({	
               	width: window_width, 
    		maxWidth: window_width, 
    		marginLeft: -correctif, 
    		paddingLeft: correctif,
    		paddingRight: correctif
    	});
    });
    
  2. 8 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Alexandre Plennevaux

    Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

  3. 8 years, 7 months ago Private Message - Alexandre Plennevaux

    This is a private message.

  4. 8 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Alexandre Plennevaux,

    Thank you for the link however I’m unable to provide full support unless I can see the WordPress version. I will however attempt a guess based on what you’ve provided. Could you make a full width stretched row with three columns set to 25% 50% 25%, and put the content into 50%?

  5. 8 years, 7 months ago Alexandre Plennevaux

    Yes I considered that but then each row in the layout would need to have the left and right empty columns, which is a bit cumbersome, plus would generate empty divs which is semantically not ideal.
    It’s okay though with my js hack, I don’t want to take any more of your time. Thanks for all your help!

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More