Re: Changing all text color into black for theme Craft

Solved

Changing all text color into black for theme Craft

Oznerol
Tourist
9 0 5

Hello,

 

I would like to change my text color for my website into black, now it's greyish although i have already changed the color of my theme for text in black. 

See the screenshot to find out how it looks now.. 

Oznerol_0-1704895007978.png

 

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
8739 2090 2563

This is an accepted solution.

Not the whole website, ive referring only on the example text. Sorry for that but try this one. The default text in your website was on the opacity .75. That is why its blurry and looks like greyish. 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
body, .color-background-1, .color-background-2, .color-inverse, .color-accent-1, .color-accent-2, .color-scheme-2d007e35-ce67-4d33-9786-958273486c02, .color-scheme-3ef76289-8d05-4928-8f50-7ef4a006fb48 { 
    color: rgba(var(--color-foreground), 1);
}
</style>

 

And Save. 

The color is black and the opacity is 1 maximum. 

If its not work add !important.

 

<style>
body, .color-background-1, .color-background-2, .color-inverse, .color-accent-1, .color-accent-2, .color-scheme-2d007e35-ce67-4d33-9786-958273486c02, .color-scheme-3ef76289-8d05-4928-8f50-7ef4a006fb48 { 
    color: rgba(var(--color-foreground), 1);
}
</style>

 

Result:

Made4uoRibe_0-1704904009109.png

For me its better that you can find the code and just change the .75 to 1. But i cant find the files on the inspect tool .

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 12 (12)

StablePeak
Shopify Partner
13 0 4

Which theme are you using?

Happy to help 🙂

Feel free to Like and Mark Solution the post that helped you. Thanks!
Swedish E-commerce agency.
If you need help from experts you can always count on us.
Elias at StablePeak
Oznerol
Tourist
9 0 5

Craft

StablePeak
Shopify Partner
13 0 4

I'm trying to replicate your issues.

1. Opening "Customize" from themes page.
2. Clicking "Theme settings"
3. Clicking on  "Scheme 1"
4. Change "Text" to a new color.

This results in a new color for most texts, except the white text.

Make sure that the edited Scheme is selected after you change the color of "Text".

If it's still not working, let me know and I could take a look 🙂

Feel free to Like and Mark Solution the post that helped you. Thanks!
Swedish E-commerce agency.
If you need help from experts you can always count on us.
Elias at StablePeak
Oznerol
Tourist
9 0 5

Following your steps i can change the color to whatever color i like, but also these colors are not the bright color i'd like it to be. 

If i change it to red for example it will be like this: 

 

Oznerol_0-1704899050884.png

the color is kind of greyish as well which i would like to be fully bright. 

 

Any idea?

StablePeak
Shopify Partner
13 0 4

I managed to solve it locally using css. The reason is that there is a css rule saying that the opacity should be 75%.
Could help you implement the change if you would like if your're not familiar with editing the theme code.

Would you like help to implement?

Feel free to Like and Mark Solution the post that helped you. Thanks!
Swedish E-commerce agency.
If you need help from experts you can always count on us.
Elias at StablePeak
Oznerol
Tourist
9 0 5

Hello, 

 

I've taken a look at the CSS code and i see a lot of 0.75 in the code, do i need to change every 0.75 to 1 or is there an easier way to change that?

Made4uo-Ribe
Shopify Partner
8739 2090 2563

Hi @Oznerol 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Oznerol
Tourist
9 0 5

Hello,

 

Website is Www.Xaliom.com

 

Take a look and see if you might have an idea. 

Made4uo-Ribe
Shopify Partner
8739 2090 2563

Thanks, check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.product__description.rte.quick-add-hidden {
    color: rgba(var(--color-foreground), 1) !important;
}

 

And Save. 

Result:

Made4uoRibe_0-1704899892990.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Oznerol
Tourist
9 0 5

Hello thanks for the solution but if i'm not mistaken this will only change the text of the product description to full opacity and not the whole website?

 

Made4uo-Ribe
Shopify Partner
8739 2090 2563

This is an accepted solution.

Not the whole website, ive referring only on the example text. Sorry for that but try this one. The default text in your website was on the opacity .75. That is why its blurry and looks like greyish. 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
body, .color-background-1, .color-background-2, .color-inverse, .color-accent-1, .color-accent-2, .color-scheme-2d007e35-ce67-4d33-9786-958273486c02, .color-scheme-3ef76289-8d05-4928-8f50-7ef4a006fb48 { 
    color: rgba(var(--color-foreground), 1);
}
</style>

 

And Save. 

The color is black and the opacity is 1 maximum. 

If its not work add !important.

 

<style>
body, .color-background-1, .color-background-2, .color-inverse, .color-accent-1, .color-accent-2, .color-scheme-2d007e35-ce67-4d33-9786-958273486c02, .color-scheme-3ef76289-8d05-4928-8f50-7ef4a006fb48 { 
    color: rgba(var(--color-foreground), 1);
}
</style>

 

Result:

Made4uoRibe_0-1704904009109.png

For me its better that you can find the code and just change the .75 to 1. But i cant find the files on the inspect tool .

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Oznerol
Tourist
9 0 5

Hi again, 

Took some time from my side before i was able to try it. I did and now my text looks like i want, great!

Thanks a lot!