I’m testing out Charitable however there seem to be some loading issues when previewing or displaying a new campaign page. The text element (layout?) and campaign description element, when added to a page, always render on my browser with the placeholder CSS class. Among other styling effects, it has low contrast and displays the locks the mouseover pointer as “wait”. This is tested on a mostly vanilla WP setup with a handful of basic plugins such as elementor
@mileswhiticker Thanks for reaching out and providing those details.
To help our team review the styling issue you’re seeing, we’ll need a bit more information to narrow down the cause.
The symptoms you described (placeholder class, “wait” cursor) often point to a script or style conflict. Do you see any errors in the web console? We see you mentioned using Elementor. As a key troubleshooting step, could you please check if this issue persists after:
Temporarily deactivating Elementor?
Temporarily switching to a default WordPress theme (like Twenty Twenty-Four)?
Please navigate to Charitable > Tools > System Info, click the “Download System Info” button, and send that information. Also could you please provide a direct URL to a campaign page where we can see the “placeholder” styling in action? This will give us a complete picture of your site’s environment and get a clearer idea of what’s happening. Thanks!
Thanks David. Temporarily switching to Twenty Twenty-Four resolved the issue, which suggested it’s a problem with the theme (Green Farm Elementor). Unfortunately I’ve designed the site around that theme, and I prefer it to the default ones. Do you have any suggestions for debugging the theme? I’m comfortable with PHP and Javascript.
@mileswhiticker Thanks so much for running that test and getting back to us. That’s incredibly helpful.
While we can’t provide direct support for debugging third-party themes, since you mentioned you’re comfortable with PHP and Javascript, we can offer the general approach our team takes to identify these kinds of conflicts.
The “wait” cursor and “placeholder” class are almost certainly being applied by a CSS or JavaScript file from your theme.
The best place to start is your browser’s “Inspect” tool. Right-click the element that has the “placeholder” class and inspect it. The “Styles” panel will show you exactly which CSS file is applying that rule. This often points directly to the cause.
It’s also possible a theme script is adding this class incorrectly. Check the browser’s JavaScript Console (in the same developer tools) for any errors that appear when the page loads.
Your most direct path to a permanent solution will be to contact the support team for the Green Farm theme and share these findings with them.
In the meantime, if you could still provide the two items from our original request, we’d be happy to take a quick look to see if we can spot anything obvious.
A direct URL to the campaign page.
The report from Charitable > Tools > System Info (click “Download System Info”).
We can’t guarantee a fix from our end, as the issue is in the theme, but it’s worth a look.
I’d already begun debugging using those steps 😀 but I realised I could save myself a lot of hassle by opening a job ticket. I have to get back to some other projects now, I’ll look at this again later this week.
We are going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation (since i know you were getting back to this).
I’ve found the problem and put up a hacky fix. Somewhere that obnoxious styling is added to bootstrap for “placeholder” class elements, see image. I put up a hacky fix in the custom WP styling to override bootstrap and it displays ok now https://ader-cov.org/campaigns/support-girls-in-rural-mali-to-finish-school/
If I’m reading the PHP correctly, it looks like Charitable adds the placeholder class to the text element and neglects to remove it (despite what you’ve said earlier in the thread) (unless there is Charitable code somewhere which is meant to remove the class). So it’s a combination of both the theme and charitable which caused this display bug.
