How do I separate font/text colours from one another?

[andformusic]

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!

[biznazz101]

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 

[BSS-Commerce]

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

[PageFly-Richard]

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

[andformusic]

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.