Shopify themes, liquid, logos, and UX
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..
Solved! Go to the solution
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:
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!
Which theme are you using?
Happy to help 🙂
Craft
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 🙂
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:
the color is kind of greyish as well which i would like to be fully bright.
Any idea?
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?
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?
Hi @Oznerol
Would you mind to share your Store URL website? with password if its unpublish. Thanks!
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:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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?
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:
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!
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!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024