Shopify themes, liquid, logos, and UX
Please help! It was okay previously but when I changed background to black, it disappeared. Please can you let me know what I should change in the Custom CSS code below for the theme settings?
Custom CSS:
button.btn.right.uppercase {
background: #a57d42;
border-radius: 5px;
}
#modal-signup-main-content {
border: 5px solid red !important;
}
.grandparent:not(.grandparent--all-images) .header__dropdown__wrapper,
.wrapper {
max-width: 1700px;
margin: 0 auto;
padding: 0 var(--outer);
width: 100%;
}
h1.text-center.h3.page__title {
margin-top: 70px;
}
.full__page__form {
border: 1px solid rgba(255, 255, 255, 0.1);
}
button.btn--outline.btn--full.btn--primary.uppercase.btn--add-to-cart {
border: 1px solid #a57d42;
}
.aos-initialized [data-aos][data-aos][data-aos-order="2"] {
animation-delay: 0.25s;
color: white;
}
h2.home__subtitle {
color: black;
}
.home__subtitle:after {
background: black;
opacity: 50;
}
h1.collection__heading--below.h3.hero__title {
color: black;
}
button.popout__toggle {
color: black !important;
}
nav.collection__nav {
color: black;
border: 1px solid black;
}
svg:not(:root) {
overflow: hidden;
color: black;
}
ul#sort-list {
border: 1px solid black;
}
h1.text-center.h3.page__title {
color: black;
}
span.accordion__title {
color: black;
}
.faq__wrapper {
border-top: 1px solid black;
}
.faq__wrapper {
display: block;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
}
input#ContactFormName {
border: 1px solid black;
}
input#ContactFormEmail {
border: 1px solid black;
}
input#ContactFormPhone {
border: 1px solid black;
}
.popout__toggle,
textarea {
border: 1px solid black;
}
.form__legal p {
color: black;
}
.form__legal a {
color: black;
}
svg:not(:root) {
color: white;
}
.drawer__content {
background-color: black;
}
.drawer__top {
background-color: black !important;
}
.rte {
color: black;
}
input#ContactFormPhone {
display: none;
}
Hey @Harizan
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
h1.text-center.h3.page__title {
color: white !important;
}
.faq__wrapper * {
color: white !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you Moeed, I appreciate your help.
However, I do not want it to be white. I want to change the banners to gold colours which are similar to the theme colours.
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024