Hello,
I am trying to change the background and text color of “Sold out” button on the page where it shows all products next to each other and has a button that shows something is sold out.
See link:
https://laneh.co/collections/cushions
How can I do that? My theme is dawn.
Hi, The store seems to be not yet live and is password protected so we will not be able to see the issue. Please share the preview for the page or reach out to us so that we can connect, discuss and resolve the issue.
Hi,
I don’t seem to find the preview link- maybe because it is my active theme.
Anyways attached is how the sold out button is showing now and I want to change the background color.
Thank you for sharing. It should be there in the color configuration. If not, then we may need to do it via quick code change in the theme. Please let me know if you are unable to do via color configuration changes within the theme.
Else, I will be happy to login and check the issue for you.
I cannot find it in color configuration- attached an image of my color configuration right now- I don’t want any other buttons to have the same color as sold-out button so probably have to code it. Here is my theme.liquid code- can you help me please? @consult_va :
{%- if settings.favicon != blank -%}
{%- endif -%}{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
{%- endunless -%} {{ page_title }} {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%} {%- if current_page != 1 %} – Page {{ current_page }}{% endif -%} {%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}{% if page_description %}
{% endif %}
{% render ‘meta-tags’ %}
{{ content_for_header }}
{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: ‘weight’, ‘bold’
assign body_font_italic = settings.type_body_font | font_modify: ‘style’, ‘italic’
assign body_font_bold_italic = body_font_bold | font_modify: ‘style’, ‘italic’
%}
{% style %}
{{ settings.type_body_font | font_face: font_display: ‘swap’ }}
{{ body_font_bold | font_face: font_display: ‘swap’ }}
{{ body_font_italic | font_face: font_display: ‘swap’ }}
{{ body_font_bold_italic | font_face: font_display: ‘swap’ }}
{{ settings.type_header_font | font_face: font_display: ‘swap’ }}
:root {
–font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
–font-body-style: {{ settings.type_body_font.style }};
–font-body-weight: {{ settings.type_body_font.weight }};
–font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
–font-heading-style: {{ settings.type_header_font.style }};
–font-heading-weight: {{ settings.type_header_font.weight }};
–font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
–font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};
–color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
–color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
–color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
–color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
–color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
–color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
–color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
–payment-terms-background-color: {{ settings.colors_background_1 }};
–gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
–gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
–gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
–gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};
–page-width: {{ settings.page_width | divided_by: 10 }}rem;
–page-width-margin: {% if settings.page_width == ‘1600’ %}2{% else %}0{% endif %}rem;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: calc(var(–font-body-scale) * 62.5%);
height: 100%;
}
body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(–font-body-scale));
font-family: var(–font-body-family);
font-style: var(–font-body-style);
font-weight: var(–font-body-weight);
}
@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}
{{ ‘base.css’ | asset_url | stylesheet_tag }}
{%- unless settings.type_body_font.system? -%}
{%- endunless -%} {%- unless settings.type_header_font.system? -%} {%- endunless -%}{%- if settings.predictive_search_enabled -%}
{%- endif -%} {{ "accessibility.skip_to_text" | t }}{% section ‘announcement-bar’ %}
{% section ‘header’ %}
{% section ‘footer’ %}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
.main-page-title.page-title:"shipping-returns"{ display: none !important; }Hi @rosa_Laneh ,
Go to Assets > base.css and paste this at the bottom of the file:
.badge.color-inverse{
background-color: #000 !important;
border-color: #000 !important;
color: #fff !important;
}
You can manually change the color code to your liking.
Hope it helps!
It works! Thanks so much!