Jump to content

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


Recommended Posts

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 by moy2010 (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

Thanks a lot for your help, Fabio :D.

 

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 :(.

Share this post


Link to post
Share on other sites
  • 3 weeks later...

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More