3 replies to this topic

[stinkyb]

Thought this might be helpful for some. I wanted to have categories on the home page in a table four across. For Prestashop Version 1.3.7 Changes to homecategories to show categories as table:

On the homecategories.tpl about line 12:

change homecategories.tpl image link from:

getCatImageLink($category.link_rewrite, $category.id_image,'category')}" alt="{$category.name|escape:'htmlall':'UTF-8'}" /> 

change homecategories.tpl image link to:

getCatImageLink($category.link_rewrite,$category.id_image,'medium')}" alt="{$category.name|escape:'htmlall':'UTF-8'}" />

This changes the call to the category image (that live here: img/c) from the large about 500 px across to the medium about 125 px image. Note the last parameter is changed from 'category' to 'medium' that's it.


Change the CSS (themes/prestashop/css/global.css)

I'm no css expert, so could probably be improved.

Add to the end of global.css

 
/*NEW CSS for front page category boxes*/
#home-cat-container { 
    MIN-HEIGHT: 100%; 
    HEIGHT: auto !important; 
    MARGIN-LEFT: 45px /*alignment of group in the body of the page*/
}
#home-cat-container .home-cat-item { 
    float: left; /* makes squares line up side by side*/
    text-align: center;
    background-color: #ffffff;
    margin-top: 8px; /*gap between the squares*/
    margin-right: 8px; 
    padding-top: 4px; /*room in the square*/
    padding-bottom: 4px; 
    padding-left: 8px; 
    padding-right: 8px; 
    width: 132px; /*width of the square*/
    border-right: 1px solid #d0d3d8;
    border-left: 1px solid #d0d3d8;
    border-top: 1px solid #d0d3d8;
    border-bottom: 1px solid #d0d3d8;
    }
#home-cat-container .home-cat-item p img {
 IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}
#home-cat-container .home-cat-item H5 {
    TEXT-ALIGN: center; FONT-SIZE: 12px; TEXT-DECORATION: none
}
#home-cat-container .home-cat-item A {
    TEXT-ALIGN: center; FONT-SIZE: 12px; TEXT-DECORATION: none
}
#home-cat-container .last{
    padding-right: 0;
    }

Hi,

Can you please provide us with an example of a working site that uses this change?

Thanks.

localhost :)

Sure, here you go:

https://www.whitelightdynamics.com/

Let me know what you think...more to come.

Thanks,
Stinkyb.