-
Issue description:
I would like to have the text for the feature with the cross or circle cross icon to be a different color. Is it possible with CSS? The goal is to easily show what features are not included in certain plans… maybe by greying out the cross or circle cross icon and the next next to it. -
Link to the page with the widget in question:
Testing Page — Hathaway Accounting Services
1 Like
Hi @Chad! Thank you so much for joining our forum, I’m happy to welcome you here!
My apologies for such a late reply—it was a local holiday here, hence such a delay. But we’re back to work, and I’ll be delighted to help you now 
As for your question, we’ve got a CSS code to color check icons green, and color cross icons red. You’re welcome to change the colors to your liking, of course:
.eapps-pricing-table-column-features-item-icon.eapps-pricing-table-column-features-item-icon-check {
fill: green !important;
}
.eapps-pricing-table-column-features-item-icon.eapps-pricing-table-column-features-item-icon-cross {
fill: red !important;
}
Could this code work for you?
Hi @Helga! No worries on the response time… hope you had a good holiday!
Is there a CSS code to change the color of the text next to a certain icon (such as a “crosscircle”)? Or a CSS code to have a strikethrough of the text next to such an icon?
Chad
1 Like
Hello @Chad 
This is Maksim stepping in for Helga!
I’ve forwarded your request to our devs and, hopefully, they’ll come up with a proper solution really soon! Please do not worry, I’ll keep you updated 
Hello @Chad!
Great news!
Our devs have created a special script to change the color of the text near the crosscircle:
<script>
window.addEventListener('load', () => {
let i = 0;
function checkElem() {
const widget = document.querySelector('.eapps-pricing-table-columns-container');
if (widget) {
const icons = widget.querySelectorAll('.eapps-pricing-table-column-features-item-icon-crossCircle');
icons.forEach(icon => {
icon.parentNode.classList.add('crossCircle-feature');
})
} else if (i !== 50) {
setTimeout(checkElem, 100);
i++;
}
}
checkElem()
});
</script>
<style>
.crossCircle-feature + span {
color: red;
}
</style>
You can change the color to the needed one in the <style>.
Please add this script right after your installation code and let me know if it helped
Thanks @Max … that worked but only for desktop (not mobile). Is there an additional change I need to make for it to work on mobile?
Hello @Chad!
I am so sorry for this inconvenience!
Sure thing, I’ve forwarded your request to our devs and, hopefully, they’ll find a proper solution really soon.
Please do not worry, I’ll keep you updated!
Hello @Chad!
Thank you for waiting!
We’ve checked everything and the script is working fine on mobile:
Could you please check it and let me know if everything is fine on your side?
However, if the issue still persists, please specify what device and browser you are using and provide me with the screenshot of the issue.
I think the issue might be with Apple? I have tried the following browsers on iPhone: Google search, Chrome, Safari and DuckDuckGo and on all of the browsers the text isn’t greyed out (but the icon is greyed out). I had a friend with an Android try though, and the text is greyed out. On your screenshot, what type of phone were you using @Max ?
Hello @Chad!
I am so sorry that you are still experiencing issues!
Previously, I checked it on Android, but, I’ve just checked it on iPhone and everything seems to be working correctly:
Could you please double-check it and let me know if everything is fine on your side?
However, if the issue still persists, please specify the version of your device and browser.
Sorry for the delay… it doesn’t work on any of the iPhones I have tried or others have tried (iphone 11, 13 and a recent SE). All running iOS16.1.1 (latest as of this writing). Multiple browsers were tried too (safari, duckduckgo and Google’s iphone app to name a few).
What version of iphone and browser did you get it to successfully update? I have seen briefly a couple times where it did the change right at the load of the table but then disappeared.
1 Like
Hi Chad!
I’m really sorry that the code didn’t work on your end 
Our devs have adjusted it a bit, so this code version should work fine now. Could you please replace the current code with this one:
<script>
const checkerFunc = (e) => {
console.log(e)
let i = 0;
function checkElem() {
const widget = document.querySelector('.eapps-pricing-table-columns-container');
if (widget) {
const icons = widget.querySelectorAll('.eapps-pricing-table-column-features-item-icon-crossCircle');
icons.forEach(icon => {
icon.parentNode.classList.add('crossCircle-feature');
})
} else if (i !== 50) {
setTimeout(checkElem, 100);
i++;
}
}
checkElem()
}
window.addEventListener('load', checkerFunc);
window.addEventListener('resize', () => setTimeout(checkerFunc, 300));
</script>
<style>
.crossCircle-feature + span {
color: #b7b7b7;
}
</style>
Please let me know if it helped 
It now loads with the text greyed out… thanks! The only thing now that is different from desktop, is if you are scrolling down / up and one of the pricing tables is on the screen, the greyed out text next to the cross circle will flicker back to black briefly before showing grey again. Can that be resolved?
1 Like
Thanks for the reply, @Chad!
I hope this code will now eliminate all the nuisances
Could you please try this one out:
<script>
const checkerFunc = (e) => {
let i = 0;
function checkElem() {
const widget = document.querySelector('.eapps-pricing-table-columns-container');
if (widget) {
const icons = widget.querySelectorAll('.eapps-pricing-table-column-features-item-icon-crossCircle');
icons.forEach(icon => {
icon.parentNode.classList.add('crossCircle-feature');
})
} else if (i !== 50) {
setTimeout(checkElem, 100);
i++;
}
}
checkElem()
}
window.addEventListener('load', checkerFunc);
window.addEventListener('resize', () => setTimeout(checkerFunc, 50));
</script>
<style>
.crossCircle-feature + span {
color: #b7b7b7;
}
</style>
Please let me know if it worked as expected!
The new code flipped it… so now it starts with black colored text and then flickers to grey text as you scroll on an iPhone.
@Chad I’m really sorry for all the trouble, but we’re not going to give up trying!
Could you please try this one? I really hope it will be a solution:
<script>
const checkerFunc = (e) => {
let i = 0;
function checkElem() {
const widget = document.querySelector('.eapps-pricing-table-columns-container');
if (widget) {
const icons = widget.querySelectorAll('.eapps-pricing-table-column-features-item-icon-crossCircle');
icons.forEach(icon => {
icon.parentNode.classList.add('crossCircle-feature');
})
} else if (i !== 50) {
setTimeout(checkElem, 100);
i++;
}
}
checkElem()
}
window.addEventListener('load', checkerFunc);
window.addEventListener('resize', () => setTimeout(checkerFunc, 50));
</script>
<style>
.crossCircle-feature + span {
color: #b7b7b7 !important;
}
</style>
Unfortunately same result… will load black text but then flicker to grey text as you scroll on an iPhone. I’ve kept the code that loads grey but flickers black for now on the website, as that gets the closest to the desired result.
@Chad I’m really sorry this code didn’t work as expected
You know, I’ve passed your request to our Support Team so that they have a closer look at it. I really hope everything will be sorted
Thank you for your patience!
Hey! Any code for strikethrough?
Hi @Bianca_Asiya_Saeed and welcome to Community 
I’m so sorry for taking this long to write you back.
I’ve checked your account and see that you have only Countdown Timer widget. Could you please describe your use case in more detail and specify where you’d like to add strikethrough?