Change color of different product attributes

Hello!

I have a question. How to set different colors, size and make rounded corners for different product attributes?

For example one is New design, Another Hosts.

First i need to make green background for Hosts and different background for New design. How ca i make it?

I found css, that can change background color. But it change everywhere.

.product-label.attribute-label:not(.label-with-img) {
background-color: #004027;
display: flex;
border-radius: 35px;
align-items: center;
justify-content: center;
padding: 5px 7px;
min-height: 50px;
color: white;
font-size: 10px;
font-weight: bold;
}

I need css that will change only hosts attribute and new design (новый дизайн) attribute.
In attachment screenshor of what I am talking about.

Hello,

Sorry but currently I am unable to see the screenshot you attached. Please make sure that you have added it correctly to check it myself and help you out accordingly.

Regards.
Xtemos Studios.

Here screenshot

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

span.attribute-label.product-label.label-term-new-design.label-attribute-pa_design {
    background: #004027;
    border-radius: 25px;
}

This CSS will only affect the new-design label.

Regards.
Xtemos Studios.

I tried, and another question. How to take away corners? To make it without corners?

Hello,

You should use the below custom CSS as well:

.product-label {
    border-radius: 7px;
}

Best Regards.

[Author]

Posts