Shopify themes, liquid, logos, and UX
Hello, I have several problems where my text color is the same as my background. Can you please help me change the text color in black of the following menus:
Here the circle on the top has an X but its white.
Here the search bar is also white.
The Cart also.
And the country menu.
Solved! Go to the solution
This is an accepted solution.
@PabloPier thanks for url can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
:is(.drawer,.popover)::part(outside-close-button), .search-input>input, .search-input>input:not(:placeholder-shown)~[type=reset],
.search-input svg.icon.icon-close, .predictive-search__tab-item [aria-selected], .predictive-search__tab-content span.reversed-link, .cart-drawer.drawer p.h5, .cart-drawer.drawer span.reversed-link.hover\:show, .cart-drawer.drawer svg.icon.icon-close,
.cart-drawer.drawer span.h5 .money, .cart-drawer.drawer span.h5, .cart-drawer.drawer p.text-subdued.text-sm, .cart-drawer.drawer span.link.text-sm.text-subdued, select#select-template--23318768320835__main--addresscountry
{
color: #000;
}
.cart-drawer.drawer cart-count.count-bubble.count-bubble--md {
background: #000;
color: #fff;
}
.cart-drawer.drawer sale-price.text-subdued {
color: #808080;
}
.cart-drawer.drawer a.link {
color: #808080;
}
.cart-drawer.drawer
input.quantity-input {
color: #000;
border-color: #808080;
}
.cart-drawer.drawer button.button.button--xl {outline: 1px solid;}
.predictive-search__tab-content compare-at-price.text-subdued.line-through {
color: #808080;
}
:is(.drawer,.popover)::part(outside-close-button) {
color: #000;
}
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
This is an accepted solution.
@PabloPier thanks for url can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
:is(.drawer,.popover)::part(outside-close-button), .search-input>input, .search-input>input:not(:placeholder-shown)~[type=reset],
.search-input svg.icon.icon-close, .predictive-search__tab-item [aria-selected], .predictive-search__tab-content span.reversed-link, .cart-drawer.drawer p.h5, .cart-drawer.drawer span.reversed-link.hover\:show, .cart-drawer.drawer svg.icon.icon-close,
.cart-drawer.drawer span.h5 .money, .cart-drawer.drawer span.h5, .cart-drawer.drawer p.text-subdued.text-sm, .cart-drawer.drawer span.link.text-sm.text-subdued, select#select-template--23318768320835__main--addresscountry
{
color: #000;
}
.cart-drawer.drawer cart-count.count-bubble.count-bubble--md {
background: #000;
color: #fff;
}
.cart-drawer.drawer sale-price.text-subdued {
color: #808080;
}
.cart-drawer.drawer a.link {
color: #808080;
}
.cart-drawer.drawer
input.quantity-input {
color: #000;
border-color: #808080;
}
.cart-drawer.drawer button.button.button--xl {outline: 1px solid;}
.predictive-search__tab-content compare-at-price.text-subdued.line-through {
color: #808080;
}
:is(.drawer,.popover)::part(outside-close-button) {
color: #000;
}
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024