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.

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.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Alexandre Plennevaux 10 years, 21 days ago

    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. Alex S Staff 10 years, 14 days ago

    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. Alexandre Plennevaux Private 10 years, 14 days ago

    This is a private message.

  4. Alex S Staff 10 years, 14 days ago

    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. Alexandre Plennevaux 10 years, 14 days ago

    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.

Have a different question or issue?

Start New Thread