text icon color change

[lavly]

ベルト付きワイドスラックス – Lavly
here is my shop
how to change this area's color

left to red right to brown

is it possible to change??

[rajweb]

Hey @lavly 

Yes, you can change the color of that area using CSS. Since I don't have direct access to the structure of your Shopify store, here’s a general way to apply the gradient effect:

Follow these steps:

1. Online Store > themes > Edit code

2. Open theme.css or base.css (depending on your theme).

3. Add this CSS at the bottom: css Copy Edit:

.icon-with-text {
    background: linear-gradient(to right, red, brown);
    padding: 10px; /* Adjust padding as needed */
    border-radius: 5px; /* Optional: adds rounded corners */
}

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,
Rajat

[lavly]

thanks
it worked, but not background
just text and icon!

[rajweb]

@lavly ,Try adding this to your CSS file or inside a <style> tag: 

.icon-with-text {
    background-color: #f8f9fa; /* Change this color as needed */
    padding: 10px;
    border-radius: 5px; /* Optional: Adds rounded corners */
}

.icon-with-text__item {
    background-color: #e0e0e0; /* Change this to your preferred background color */
    padding: 8px;
    border-radius: 4px; /* Optional: Adds rounded corners */
    display: flex;
    align-items: center;
    gap: 8px; /* Adjust spacing between icon and text */
}

If you want the background color to apply to the entire <ul> rather than each <li>, use .icon-with-text instead. Let me know if you need further adjustments!

Thanks

[Ahmad31]

Hi @lavly, You want like this ?:

[lavly]

yes !
and text color white plz

[Ahmad31 · Accepted solution]

@lavly 

1. Online Store > themes > Edit code

2. Open theme.css or base.css (depending on your theme).

3. Add this CSS at the bottom:

  .icon-with-text__item:nth-child(1) {
    color: red;
  }

  .icon-with-text__item:nth-child(2) {
    color: saddlebrown;
  }
.icon-with-text{
background: none !important;
}

[LizHoang]

Hi @lavly 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

ul.icon-with-text.icon-with-text--horizontal.list-unstyled li:last-child {
    color: brown !important;
}

li.icon-with-text__item {
    color: red;
}

Result: 

Best,

Liz