Cetegory boxes

I would like to edit categories in the archive page where I added your category style function. However your defined style are not usable for most of your customers. I need to style small boxes with just image and category name. As is showed on the image above

We would like to design Products Categories from your widget as is showed in this image.

I have created a Custom HTML Block with a custom DIV code. It looks good but I have to create the same box for each product category and if I remove / add category, I have to edit all blocks where to apply these changes. Your Category widget is good in this that it’s generate categories automatically. Or it is possible to do it in your customization service? Thank you for any help…

https://prnt.sc/26qqmoy

We don’t understand each other at all. I know how your widget works. But it’s terribly ugly and impractical! I need to change its design according to myself, according to the attached image. Only 4 display options can be selected in the settings, but there is no option to make your own. I’ve made a few changes via Custom CSS, but these styles apply to all elements and it is wrong again.

In short, I need to make your product category widget as it is in the attached picture. How do I do that?

This is my code in HTML block

<div class="listing-subcategories_title">

<a href="/led-pasy/napatie-12v/" title="Napätie 12V" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Napätie 12V" src="//images-madalbal-cdn.rshop.sk/xs/categories/12564404110beea7083967ff05b423db.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Napätie 12V <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/napatie-24v/" title="Napätie 24V" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Napätie 24V" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Napätie 24V <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/ovladanie-k-led/" title="Ovládanie k led" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Ovládanie k led" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Ovládanie k led <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/prislusenstvo-k-led/" title="Príslušenstvo k led" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Príslušenstvo k led" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Príslušenstvo k led <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/profily/" title="Profily" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Profily" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Profily <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/profily-chladenie/" title="Profily (chladenie)" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Profily (chladenie)" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Profily (chladenie) <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/specialne-led-pasy/" title="Špeciálne led pásy" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Špeciálne led pásy" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Špeciálne led pásy <i class="ico icon-arrow-next"></i></div></a>

</div>

And this is css for it

/***************************/
/* BOXY Kategorii */
.listing-subcategories_title {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: auto;
    grid-gap: 5px;
    margin-bottom: 0;
    position: relative;
}
@media (max-width:1199px) {
    .listing-subcategories_title {
    grid-template-columns:repeat(4,1fr)
}
}
@media (max-width:1023px) {
    .listing-subcategories_title {
    grid-template-columns:repeat(3,1fr);
}
}
@media (max-width:599px) {
    .listing-subcategories_title {
    grid-template-columns:repeat(2,1fr);
/*display:flex;*/
  /*flex-direction:column*/
}
}

.listing-subcategories_element {
    display: flex;
    align-items: center;
    border: 1px solid #e4e6eb;
    color: #111;
    cursor: pointer;
    background: #fff;
    transition: all .2s ease;
    margin: 0;
    padding: 8px;
    min-height: 56px;
}

.listing-subcategories_img {
    position: relative;
    width: 48px;
    min-width: 48px;
    flex: 0 0 48px;
    margin-right: 12px;
    align-self: stretch;
    mix-blend-mode: darken;
}

.listing-subcategories_name {
    font-size: 13px;
    line-height: 19px;
    color: inherit;
    word-break: break-word;
    flex: 1 1 auto;
}
/***************************/

HOW TO APPLY MY CODE TO YOUR CATEGORY WIDGET

Thank you

I know that it has to be replaced but how?

When I style ” col-lg-20_0 col-md-3 col-sm-4 col-6 category-grid-item cat-design-center without-product-count product-category product” or “.products-bordered-grid.elements-grid:not(.elements-list) [class*=”-grid-item”]” products boxes are also changed.

Can you do it for me please?

Your answer is ridiculous. Why can’t you do what I asked you to do ???
I’ve already ordered someone else to do it… it is done in 10 minutes.