Home › Forums › WoodMart support forum › Circle categories

Circle categories

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 12, 2021 at 9:31 pm #291939

    natmd
    Participant

    Hi, I want to know how do i put the categories like this (circle shape)

    Attachments:
    You must be logged in to view attached files.
    May 13, 2021 at 8:53 am #292033

    Elise Noromit
    Member

    Hello,

    Please set a similar design in the Theme Settings > Shop > Categories styles or if you use the Product category element or widget, chose the design with the image and title below and we will give you custom CSS to make as per your needs.

    Best Regards

    May 13, 2021 at 3:38 pm #292193

    natmd
    Participant

    Done, I’ve already have that one selected. I just need the custom CSS for the circle categories.

    Attachments:
    You must be logged in to view attached files.
    May 13, 2021 at 10:37 pm #292251

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .cat-design-alt img {
    border-radius:50%;
}
body .category-grid-item:hover .category-image {
    -webkit-transform:none;
    transform: none;
}

    Best Regards

    May 13, 2021 at 11:27 pm #292270

    natmd
    Participant

    How do I reduce the size of the circles? they are big

    Attachments:
    You must be logged in to view attached files.
    May 14, 2021 at 10:20 am #292378

    Elise Noromit
    Member

    Hello,

    Replace the code with this one: 

    body .cat-design-alt img {
    border-radius:50%;
    width:50%;
    height :auto;
}
body .category-grid-item:hover .category-image {
    -webkit-transform:none;
    transform: none;
}

    Change 50% as per your needs.

    Best Regards

    May 26, 2021 at 6:26 pm #295717

    natmd
    Participant

    Hi, on the demo accessories, I want the exact same layout for the categories (circle) and with the code you provided I don’t get it like that, I attached an image so you can see what I get (a rectangle around the circle)

    Attachments:
    You must be logged in to view attached files.
    May 26, 2021 at 11:33 pm #295767

    Elise Noromit
    Member

    Hello,

    Please provide the page URL I will give the code.

    Best Regards

    May 27, 2021 at 2:49 am #295794

    natmd
    Participant

    I put the ink on private content. Please let me know

    May 27, 2021 at 9:04 am #295886

    Elise Noromit
    Member

    Hello,

    Disable the shadow in the element or add this custom: 

    body .cat-design-alt.categories-with-shadow .category-image-wrapp {
    box-shadow: none;
}

    Best Regards

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)