Shopify themes, liquid, logos, and UX
Hi, hope I explain this correctly.
Website, - www.andformusic.com
1 - I wish for the header/text on the 'Home' page (ANDFORMUSIC.COM, Your ultimate destination for all things music.) to be in the colour of white (#FFFFFF). I want all text on the website, including all the listings, to remain completely black as it is. (#000000)
2 - I want the basket font colour & the search font colour to be completely white (#FFFFFF). It is currently completely black and unable to see any text due to the already black background. (Screenshots attached for refernce)
I can only change the colours to one colour from the theme editor and everything affects one another (i.e, If I change the colour to white, it updates for the shopping basket and search function, but it also changes all the text on the website, including lists etc).
I know it's a simple custom CSS coding, but I have no idea what kind of coding I need to put in, and I'm delaying on the launch of my business a lot because of this.
Thanks!
You can try adding this to the following sections Custom CSS settings (Themes>Customize>Click Section:
Banner CSS:
.banner_heading {color: #FFFFFF;}
.caption-with-letter-spacing {color: #FFFFFF}
Header CSS:
svg {fill: #FFFFFF;}
Before & After:
I hope that helps!
@biznazz101
Hi @andformusic ,
I see that the following CSS code on your theme makes all elements black: https://prnt.sc/3Dux3WF1J2YL
A simple way to recolor certain parts as you want is:
1) You need to give html elements a class, for example: class-css-text-white (custom class name). Like this: https://www.awesomescreenshot.com/image/45272763?key=3747c77825f09c4e5365a49417603cba
2) Then in the CSS code file (base.css, theme.css,... depending on the theme), add the following code:
.class-css-text-white {
color: #FFFFFF !important;
}
3) To know which positions you need to add classes, follow these steps: go to your site, click ctrl+shift+C, hover over the sections you want on the site, and locate the element. html you want to add class
If the above method doesn't work, just follow step 3. Then directly add style="color: #FFFFFF !important;" that html element
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Hi @andformusic
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
.banner_heading {
color: #FFFFFF !important;
}
.caption-with-letter-spacing {
color: #FFFFFF !important;
}
svg {
fill: #FFFFFF !important;
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hi @biznazz101 @BSS-Commerce @PageFly-Richard . Thank you for the replies.
Unfortunately, none of these seem to be working. For PageFly's response, it seems to be changing the "DOT DOT DOT... MUSIC" to white and not the header.
For Biz and BSS, it seems to be making no changes at all (but I could also be doing it wrong!).
Also, does anyone have any idea to how I can have the basket and search font colour to white? Will these codes allow me to keep the colours as I want, fror me to change the Shopify colour option to white?
Thanks a bunch!
T.
Hey 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, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024