Close

How to change shape of category item box on home page

izivanovic
7 years ago
#12303 Quote
Avatar
  • 4
Hi,

Any idea how to change shape of category item box on home page to square.
I try this (comment border-radius property), but dosn't work:

Nop.Web\Themes\Allure\Content\css\styles.css(1648)

.home-page-category-grid .item-box,
.sub-category-grid .item-box
{
   max-width: 100%;
   /*border-radius: 100%;*/
   overflow: hidden;
   border: 5px solid #fff;
   background: #fff;
}
Aleks
7 years ago
#12304 Quote
Avatar
  • Moderator
  • 70
izivanovic wrote:
Hi,

Any idea how to change shape of category item box on home page to square.
I try this (comment border-radius property), but dosn't work:

Nop.Web\Themes\Allure\Content\css\styles.css(1648)

.home-page-category-grid .item-box,
.sub-category-grid .item-box
{
   max-width: 100%;
   /*border-radius: 100%;*/
   overflow: hidden;
   border: 5px solid #fff;
   background: #fff;
}


Hi,

what you did was correct, but you need to do one more thing. Find this code in the same file:

.home-page-category-grid .category-item, .sub-category-item {
    -webkit-mask-image: url(/Themes/Allure/Content/img/1.png);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-transform: translateZ(0) scale(1,1);
}

and comment it also. Now with this code and the border-radius out of the way, the images are going to appear rectangular.
Regards,
Aleksandar Ivanov
Nop-Templates.com
izivanovic
7 years ago
#12398 Quote
Avatar
  • 4
It works.
Thank you!