Block that spans 2 columns?

Ok, so i searched the forums and couldnt find this... but I was looking like a man....

Many of my pages are 2 columns. Is there a way to make a html block that will span both columns?

Thanks,

Nathan : )

Is it a way you could compose a screen shot of what you mean?

I need the single column at the top.

which page?

all or any pages. normally the main and view page for each module.

Prashank will get there first, I'll let him tell ya..

lol...

This module may not be exactly what you're looking for, but I've been very happy using this one for several of my marketing pages:

http://www.dolphinmodule.com/super-html-blocks-dolphin-7-module/

Jethro

I think you have to use css for this.

Edit: I think not only css, it requires some more to be done. looking.....

Thanks Prashank. I am surprised that there is no module to do this.

I know there is a module that will allow you to put double blocks in a single column, but you can not control the widths of the blocks (they must both be equal) so this would not work in my case.

Any help will be appreciated,

Nathan : )

Did you look at this post:  http://www.boonex.com/forums/topic/Making-changes-to-the-dolphin-main-ads-page-.htm

Just need to apply the same code to the pages needed - the trick of course is finding the right file for the corresponding page..

Editing the actual template used for the specific page is the only way to do it, and then only at the start or at the end of the columns. Not possible to do it half way down the page. It's the price that is paid for having the convenience of a page builder. Draw back is some pages share the same template file.

For example. to do it on the index page you would edit template page_1.html and change this.

<bx_include_auto:_sub_header.html />
    __promo_code__
    __page_main_code__
<bx_include_auto:_sub_footer.html />

To this.

<bx_include_auto:_sub_header.html />
    __promo_code__
<div class="disignBoxFirst">
    <div class="boxFirstHeader"><div class="dbTitle">TITLE</div></div>
    <div class="boxContent">CONTENT</div>
</div>
<div class="clear_both"></div>
    __page_main_code__
<bx_include_auto:_sub_footer.html />

Not in all cases. Most just need a simple edit to a template. The ads are a bit more complex. One of the reason i did a tutorial on it.

 Got it - thanks for clarification....just trying to help Nathan out.

Thanks guys... I should imagine events main and events view would share the same template page.

maybe just using 2 columns and blagging it will be safest lol.... Just a bit messy in pagebuilder with all the blocks to construct it.

If anyone comes out with a mod for this though I will of course be delighted....

OK, created and tested just now. Here it is

Open inc/classes/BxDolPageView.php at line 364 and comment out this this piece of code (careful please)

/*if ($iColumn == $iColumnsCount) // sum of all columns must not be more/less than page width

                   $sColumnWidth = ($this -> aPage['Width'] - array_sum($this->aColumnsWidth)) . 'px';

                    else*/

inc/js/classes/BxDolPageBuilder.js at 217 you will find this

BxDolPageBuilder.prototype.addColumn = function() {

this.drawColumn($('.buildColumn',this.activeArea).length, 0, {}, {});

this.checkAddColumn();

this.refreshSortables();

this.reArrangeColumns();

}

just after that put this

BxDolPageBuilder.prototype.addFullColumn = function() {

this.drawFullColumn($('.buildColumn',this.activeArea).length, 0, {}, {});

this.checkAddColumn();

this.refreshSortables();

}

BxDolPageBuilder.prototype.drawFullColumn = function( iColumnNum, iWidth, aBlocks, aBlocksOrder ) {

$('div.clear_both',this.activeArea).remove();

var $newColumn = $(

'<div class="buildColumn" style="width:100%;">' +

'<div class="buildColumnCont">' +

'<div class="buildColumnHeader"></div>' +

'<div class="buildBlockFake"></div>' +

'</div>' +

'</div>'

).prependTo(this.activeArea);

this.setColumnHeader( $newColumn, iColumnNum, true );

var eColumnCont = $( '.buildColumnCont', $newColumn ).get(0);

    for( var i in aBlocksOrder ) {

        var iBlockID = aBlocksOrder[i];

var sBlockCaption = aBlocks[iBlockID];

this.drawBlock( iBlockID, sBlockCaption, eColumnCont );

}

$(this.activeArea).append( '<div class="clear_both"></div>' );

}

now edit administrator/templates/base/pbuilder_cpanel.html just after this

<div class="adm-pb-cp-item-right">

        <div class="button_wrapper">

            <input type="button" value="<bx_text:_adm_btn_add_column />" id="addColumnButton" class="form_input_submit" onclick="oPB.addColumn()" disabled="disabled" />

            <div class="button_wrapper_close">&nbsp;</div>

        </div>

    </div>

Put this

<div class="adm-pb-cp-item-right">

        <div class="button_wrapper">

            <input type="button" value="Add Full Column" id="addFullColumnButton" class="form_input_submit" onclick="oPB.addFullColumn()" disabled="disabled" />

            <div class="button_wrapper_close">&nbsp;</div>

        </div>

    </div>

--------------------------------------------------X-------------------------------X------------------------------------------------------

It will add a full width(100%) column where ever you want on any page.

Please Please report bugs here and fast if possible otherwise you all have to wait till tomorrow cuz i also need sleep :P

Hey did i mention clear the cache 

EDIT: File attached

Here some screenshots.

I am gobsmacked..... wow... absolutely awsome dude..... This will save me so much hassle...

I am one happy bunny : )

lol happy bunny can you hop also?

Just like in 7.1, you can have the header there on every page.

This should have been asked last year!!

thanks 

Yes.... i am hopping... i just set this up and it works like a charm. I can not thank you enough for all the work this will save me.... This also should be part of dolphin core.

 its freakin awsome.

Glad to help :D

oops, just realized, i forgot something in the above post. 

You have to add this also in BxDolPageBuilder.js at line 213

$('#addFullColumnButton').attr('disabled', iColumns >= this.options.maxCols ? 'disabled' : '');

just after this

$('#addColumnButton').attr('disabled', iColumns >= this.options.maxCols ? 'disabled' : '');

great work ...

I have noticed a issue though ...

The full columns do not stretch 100% full length and if you add a few full columns the sizes differ again from each other ....  

Hope you can help ;)

I know about that but i didn't posted that cuz it depends on template. Can you give me a link to your site so, i can tell you what change is needed in the css.

 hello, sure and thanks:  socialmunch.com

edit your templates/base/css/general.css at line 213 remove this

 hello again, thank you for your time ...

OK I done this and the issue is still there in chrome and firefox

if you join my site and look at the account page I have left the blocks for you to view

Regards, Josh ;)

sorry forget this .... !!!  My mistake your fix worked ...

the blocks seem the same size now but seem to be short on the right side ... Not a biggy but would be great if you know how I can force the to be the FULL page width etc ;)

Regards, Josh

The fix is updated with a new one.

ok great and thanks a lot man ;)

I'm sure alot of people here will appreciate this mod !

Regards, Josh

I am glad i could help you people. I think this full width column is kinda needed thing.

I just overwrote my files with the ones Parshank posted and it worked. Am so glad that this fix is avaliable and good to see josh a social munch making good use of it too. I have needed this fix ever since i started on dolphin.

same here ... I use to spend many hours looking for this and it's for sure a much needed fix

this will make a big difference to page designs etc so I thank Parshank again !

Also hey DRautenbach I hope things are good for you man ;)

Regards, Josh

I will move it to a new thread with some improvments soon. :P

It is nice; however, it breaks apart if you try to change the widths of pre-existing columns just like the "Add Row" mod of deano92964.  The "Add Row" mod worked if you were careful to add the row last; however, editing was out of the question.  The same for this mod.  More work is needed on the page builder for it to work without worries.  However, both this mod and the "Add Row" mod are good starts to a feature that is needed in Dolphin and I appreciate the work that deano92964 and Prashank25 have put into this; you two certainly know your Dolphin.

Found another problem.  With this mod installed, I went to the Blogs Home page and the blog list was under the featured blog list.  Removing the mod and putting the original files back in place corrected the problem.  I had not done any changes to the Blog Home page.

 Not sure whats the actual issue is but will try to improve this modification.

 EDIT: I am not sure if this is compatible with "Add rows" mod.

No, I was testing it without "add rows".  Being able to have your feature would be nice.  One problem is that the standard page builder included with Dolphin would need to be rewritten to probably handle the insertion of a full column. and still allow one to change the column widths of other columns that are not full width.

I have no real idea why the view broke apart as it did.  If I have time, I could play with it some, taking screen shots of the builder page and screen shots of the view.

Thanks for your work on this.

I will work on it when i get some time from lots of work.

Hello,

Thank you for this mod, it's great!
But I had a little problem

I have the button to add the column but when I click on it nothing happens

My version of dolphin: 7.0.8

thank you in advance

go throw the thread again and if possible just replace the file.

 I had that problem too.  Make sure you clear out the caches; and you might need to clear the one on the server; /cache and /cache_public making sure you do not delete the .htaccess files and then clear your browser cache as well to make sure you are reloading the jabascript files.

Helloooo

i clear the cache two or three times and waited ....

Everything works

Thank you all

 Hey Prashank - 

Thanks so much for this solution.  I have everything working and made all changes, yet I'm still having problems with the full width of my pages throughout my site.  These changes above haven't fixed my issue, so is there something else that would affect the overall width?

Thanks - Jethro

You have problem with block aligning or functioning?

EDIT: Add a full width block on one of your page so i can check it out

 Aligning - the over all width has shrunk each page block throughout my site.  I'll send you a PM with details so you can see what I'm referring to.  Thanks for responding!

After exhaustively messing around with various settings with my CSS file and the way I inserted my content into the 100% wide page block, I was able to make it work - still a bit buggy, but it works.  FYI, commenting out the margin's block_container (left & right) caused problems in other areas of my site, and had to revert back to the initial setting.  The only page's that are off a bit are a few that have the 100% page block - and not all of those pages are messed up.

Again, many kudos to Prashank for his excellent support and guidance in all of this - you're a Rock Star my friend!!

Jethro

does this mod work with 7.1?

@badass you know that css change is not the part of this modification? It depends on the template you use. Its not necessary that you make changes to css

@nurke didn't tested it on 7.1 yet