[SOLVED] Use Div Box as a Column - Prestashop 1.5.2

[moy2010]

Good evening, prestashoppers. Recently I purchased the theme Elation Liquid, which doesn't have any columns at all.

 

I really like this theme, but I also need a left column in the Product_list view. I have been doing some research, and found some really clever solutions as this one which uses something I think it's called a Div Box:

 

http://www.memoryexp...ry/Motherboards

 

I was wondering if it's possible to implement this in Prestashop and hook on it the module or modules as if it was the left column indeed.

 

Thanks in advance.

Edited January 23, 2013 by moy2010 (see edit history)

[NemoPS]

Hi,

Depending on the theme, you might just be able to do this:

{if $page_name == 'category'}
   <div class="left_column">
    {$HOOK_LEFT_COLUMN}
   </div>
{/if}

Of course, this goes in the header.tpl file, just before the center column

 

Cheers!

Fabio

[moy2010]

Hi, Fabio. Thanks for the quick response.

 

I've tried this, but it didn't work. Looking at the code from header.tpl you can realize that it's really weird since there are no columns at all, check this out:

 

 

<div id="eb-page" class="clearfix">

 

<!-- Header -->

<header id="eb-header" class="clearfix">

<div id="eb-header-wrapper">

<div class="clearfix">

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" />

</a>

</div>

<div class="clearfix">

{$HOOK_TOP}

</div>

</div>

</header>

<aside id="eb-lower-header">

<div id="eb-lower-header-wrapper">

{$HOOK_LEFT_COLUMN}

</div>

</aside>

{/if}

<div id="eb-main" class="clearfix">

<div class="shadow-div"></div>

<div id="eb-main-wrapper" class="clearfix">

<div class="shadow-fix"></div>

<div id="eb-main-wrapper-fix" class="clearfix">

{/if}

 

Each one of these divs has the same width in global.css, and each one is stacked on top of each other (eb-header-wrapper is on top of eb-lower-wrapper, and this on top of eb-main, etc.). The result is a single-wide column theme:

 

http://elationbase.com/elation-liquid/demo/light/en/

[moy2010]

Well, I've tried to get them within a single div, but it doesn't work yet :S. This is how it looks:

[NemoPS]

Try lowering the center column's width and float both to the left using css

[moy2010]

Thanks a lot for your help, Fabio .

 

I've made some progress, but I still don't get it done 100%.

 

For example, I've been able to get both "columns" within a single container div and float both to the left, but it messed up the visuals since the center column goes all the way to the left under the product view.

 

If I set the left_column to float to the left and the center column with a relative position (and auto margins) everything looks almost perfect except in the category view.

 

If I set a custom width to the container div (let's say 1425px and auto margins), to the left column (200px) and the center column (1225px) and float both columns to the left, it looks almost done but still some things don't work or are set properly:

 

- center column isn't centered properly, even with auto margins for left and right.

- the shadow div isn't positioned correctly.

- The responsiveness of the team is lost.

 

This means that the best solution so far has been to float the left column to the left and give the center column a relative position .

[moy2010]

I've made some research, and it seems that I have to clear the floats using the sentence "clear:both" in the footer, but I have already tried it and it doesn't seem to work :S.

 

Does anybody have an idea about how could I center both columns?

 

Thanks in advance.

[moy2010]

Ok, I've finally been able to get the left column where I wanted it, but now I have another question.

 

I have 2 columns in the product_list view (left column and center column). If I give them a percentage width (17% and 83% respectively), both columns are responsive and adjust their width according to the window.

 

But, if I give the left column a fixed width (200px) and an auto width to the center column, the center column moves under the left column once the window reaches a certain width.

 

In conclusion, is it possible to have a responsive design when a column has a fixed width?

 

Thanks in advance.

[moy2010]

Update:

 

I managed to get it done with the CSS3 function calc.

 

I will change the thread title to SOLVED.