WIdth of Custom CMS Information Block in Prestashop 1.6

[PokeDiamond]

HI,

 

I would like to increase the width of my Custom CMS Information Block on my Home Page in PrestaShop 1.6

 

When I added in the right column and the left column the Custom CMS Information Block (Including Facebook Block) now resides in the center column.

 

How do I fix this so the Custom CMS Information Block is the width of the full Page.

 

Thank you!

[areis]

Hi PokeDiamond

I am also having the same problem .
How is that done?

[PascalVG]

areis

 

Do you have a link to your site? Then it's easier to help you.

 

What PS version?

 

 

pascal.

[areis]

Hi Pascal.

Mi site is http://icarpedome.com

prestashop version is 1.6.0.13.

 

Thank's pascal

 

[PascalVG]

OK, if I understood you right, you want the four columns in your footer more equally aligned, right?

If so, try this:

 

add to your file: themes/<your theme folder>/css/global.css:

 

@media (min-width: 768px) {

 

  #footer section#block_various_links_footer{

    width: 25%;

  }

 

  #footer section.footer-block.col-xs-12.col-sm-4 {

    width: 25%;

  }

}

 

 

 

This way, all four columns will be equally spaced.

 

If this wasn't what you want, please let me know in more detail which block you were talking about.  (Maybe then add some screenshot that explains it)

 

pascal.

[areis]

Hi Pascal!

Thank's for your help.

 

I have my page so:

 

and i wanted so:

 

 

 

can you help?

[PascalVG]

Hi areis,

 

Not as easy as it looks like. The block (consisting of three info blocks) are now 'hooked' into the center column. As you can see, the left column is next to the block you want to widen. What you actually want is move the whole info block out of the center column, so that is will (automatically) take the whole width of the #columns element (the element that contains the left, center and right element)

 

To do that however, you will either hook the info block to another (not yet existing, I'm afraid) hook. Quite some work, that needs lot of recoding. So this can be done, but you need some experience for this doing it.

 

 

Without having the code, it's hard to help you more than this.

 

 

 

 

Another option might be to keep it like this, but use some small javascript to move it 'afterwards', after loading the page. Maybe not perfect solution, but probably easier. Only consider if you see no way of doing the option above.

 

If you want to see this working, edit file themes/<your theme folder>/footer.tpl (Make backup!!)

 

and add this piece of code at the end of the file:

 

<script type="text/javascript">

    $( document ).ready(function() {

        if ($('#index').length) {

            // get element to move to

            var newParent = document.getElementById('columns');  

 

            // Get the element that contains face book 

            // and cms info block (i.e in your case 

            // the <div class="clearfix"> that is put around these)

            var infoBlock = document.getElementById('fb-root').parentElement; 

 

 

            //move the whole div to be a child of the #columns element

            newParent.appendChild(infoBlock);  

        }

    });

</script>

 

 

 

My 2 cents,

pascal

[areis]

Hi Pascal!

 

thanks for your help.

 

it works!

[rv0206]

So anyone can tell me what was the outcome of this issue i have the same problem i just want the 3 column with the facebook on it moved down to take the width of the page. thanks 

[tonbaklar]

Hi, I'm having the same problem too. I add script code in footer.tpl.. But not change my page... my questions only footer change or global.css or they both...

[Guest locen]

Hi,

I would like to see on some pages CMS blocks in the left column and on other pages different blocks.

So I would columns different pages CMS.

[mr.rizwan]

cool solution 

[Guest locen]

Hi mr.rizwan, how i can do this?

[Guest locen]

Hi mr.rizwan, how i can do this?

[mr.rizwan]

<script type="text/javascript">
    $( document ).ready(function() {
        if ($('#index').length) {
            // get element to move to
            var newParent = document.getElementById('columns');  
 
            // Get the element that contains face book 
            // and cms info block (i.e in your case 
            // the <div class="clearfix"> that is put around these)
            var infoBlock = document.getElementById('fb-root').parentElement; 
 
 
            //move the whole div to be a child of the #columns element
            newParent.appendChild(infoBlock);  
        }
    });
</script>

paste the above script into theme footer.tpl

[Guest locen]

But how i can select some columns for some pages cms and othere columns for othere pages cms? 

I attached an image of the columns to which I refer

[Guest locen]

Columns are default from modules

[elsoy]

Hello, i want to change the size from the grey field. Because i need only one in the middle with some Text. How can i do this?

I use Prestashop 1.6.1.4.

 

Thanks

Elias

Edited April 5, 2016 by elsoy (see edit history)