Text shadow

[iamwithU]

Hello,
Is my understanding correct that text shadow is the default appearance for font inside a button?
I read somewhere in the forum that to remove the text shadow, we use this CSS:
.x-btn {
text-shadow: none;
}

I still can’t get the text shadow removed. Any clues?

[tristup]

Hi @iamwithU,

Thanks for reaching out.
The selector for the Add to Cart button will be .button not the .x-btn and the text-shadow attribute value should be set to unset. Your custom CSS code will look like the following one.

.button
{
    text-shadow: unset;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Alternatively, you can select the Transparent style from the Theme Options > Button > Style to get rid of the Text Shadow, but it change the current style of the button.

Thanks

[iamwithU]

Thanks @tristup for the very prompt response. Appreciate the code. Yes, I tried out the transparent mode, and get what you mean.

Your code did the trick. Am I right that the default is text shadow for font in button?

I have another problem. Please see screenshot. I have set the font to black color inside the button, but I don’t know why on some webpages, the font is grayish? For the other webpages, the font is correct (black).

Would you be so kind to let me know some possible causes for this?

[tristup]

Hi @iamwithU,

Yes, you are correct the default CSS set the Text Shadow to the button. I have checked the products but didn’t find the problem you described here. Can you please share one of the product names and the URL where the problem exists? It helps us to recognize your problem.

Thanks

[iamwithU]

I attach a screenshot again. But this time, some thing mysterious has happened - the background has been turned black, hiding the words, and the 2 sides have white unwanted spaces. (These issues are occurring only in the bigger port views. They are not happening on the mobile port views :(… )

The 1st screenshot will show the button in grey color. The 2nd screenshot shows the button in the correct black color, just that it is now shrouded by an overriding black overlay, that I think is part of the theme option.

Thanks for looking into the issue for me, @tristup.

[tristup]

Hi @iamwithU,

The problem is related to the custom CSS code which has been already addressed in your previous thread. I would suggest you go through that and custom CSS code which might be the reason behind your problem.

Woocommerce category page is covered

Hi @iamwithU, Thanks for reaching out. I have checked and found that the custom CSS written into the Theme Options > CSS is the reason behind your issue. It set the background color black and that is why the text in the same color is not visible. Please remember that we don’t offer any investigation or support on custom coding-related issues, I would request you please check the Theme Options settings and the custom codes before you post a new ticket. [Screenshot-2022-08-08-193758] Thanks

Thanks

[iamwithU]

I have already removed the CSS for the background - thanks to @tristup. But the grey font for the button in some product pages is still showing. That is, for some webpages, the font is grey, for some the font is correct (black).

Can someone other than @tristup help throw light on the problem? Appreciate your patience. I am hoping to learn from this journey so as to better use Pro and hopefully disturb you guys less.

[tristup]

Hi @iamwithU,

Now we can see the button, but can’t find the issue you describe here. I have also found that the CSS code to remove the Text Shadow is added, but it is not affected due to the issue in your CSS code. I tested and closed unclosed braces which resolve the problem and now the Text Shadow has been removed, can you please check if you are still seeing the same grayish font?

Thanks

[iamwithU]

Thank you @tristup for your prompt responses & alacrity.
I’ll investigate further and take it from here. Appreciate your help so far.

[tristup]

Hi @iamwithU,

Glad to help you with this. Please let us know if you need any further help.

Thanks