Support » Plugin: Page Builder by SiteOrigin » Custom grid layout

  • Hi Greg,

    Apologies to keep contacting you for support! This will be my last topic for a while honest.

    I believe the topic was touched on recently – with bootstrap, however, I’m using foundation CSS. I know you mentioned its not easily possible as your plugin is so deeply integrated with your own CSS.

    I created a mapping function to count $cells and replace # columns where required.

    $mapping_array=array(0=>1, 1=>12, 2=>6, 3=>4, 4=>3, 5=>3, 6=>2);

    2 columns for example to 6 – as Foundation is a 12 grid based system so 2 columns, or 50%50% would be ‘large-6 columns’ as the CSS class.

    <section id="bg<?php the_ID(); ?><?php echo $gi ?>">
    <div class="row">
    		<?php foreach ( $cells as $ci => $widgets ) {
    <div class="large-<?php echo $mapped_value;?> columns">

    …. was used instead of your code to keep the site uniform to foundation CSS.

    Note the section id – the idea behind this was to be able to style a row with a background colour or image.

    Anyway, after doing all this, I realised I’ve limited myself to specific uniform layouts, 1/2’s 1/3’s 1/4s – no possibility of a 80%20% layout for example.

    So I was thinking, I could use this same process, with the % that are being created with your code? create an array to say that 50% would be 6 for example.

    However, I’m struggling to find how the style % are being created? I can see its around here somewhere i think!

    f ( $cell_count > 1 ) {
    				$css_new = 'width:' . round( $cell['weight'] * 100, 0 ) . '%';
    				if ( empty( $css[1920][$css_new] ) ) $css[1920][$css_new] = array();
    				$css[1920][$css_new][] = '#pgc-' . $gi . '-' . $i;

    $gi and $i are being called – $gi seems to be the row, and $i seems to be the columns? so its saying #pgc-1-1 width:50%; for example……. im not sure where that 50 is coming from though.

    Could you help me figure out a way to call the % as I did with the..

    echo count($cells);


    Many thanks in advance if you’re able to help with this Greg, apologies for the massively long email!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi,

    Please ignore the last post, I’ve nearly figured it out.

    I’m at the point where I’m trying to apply the new mapped $css_new % directly to the panel grid instead of using id=”pg-<?php echo $gi ?>”

    If you could shed any light on this you’d truly make my day as I’m not a php developer and my head is about to implode!

    Many thanks

    <div class=”panel-grid-cell” id=”pgc-<?php echo $gi . ‘-‘ . $ci ?>”>

    is what i meant sorry.


    Just thought I’d post my progress before I give up for the day.

    I’ve attached a screenshot of where I’m at – very happy to share this with you if its of interest to you.

    I’ve reached a point where I’m thinking some kind of new function has to be created to echo the mapped result:

    column 1 is given the first mapped result
    column 2, the second
    column 3, the third, and so on.

    the first column doesn’t seem to be retrieving a result, to make this process that bit more difficult ha.

    If this is of any interest to you or you have any ideas on how I can achieve this and you can help I’d be extremely grateful.

    Thanks again

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom grid layout’ is closed to new replies.