Jump to content
Sign in to follow this  
stinkyb

[Solved] Changes to homecategories to show categories as table

Recommended Posts

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;
   }

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

×