Hello! I’m self-hosting on Hostinger, and everything is fully up to date. I’m running Caspar.
My url: https://thisreidwrites.com
Version: 6.64.0
- Installed and configured manually, as one does
- Node.js: 22… something (it’s up to date according to my host)
- Database is MySQL 8.0.44
I doubt anyone could see mistakes in the code on this one. I have my brand color set, and it’s all working great with one exception. For some reason, the little “Already a member? Sign in” link at the bottom of posts is in that color—but without a contrasting background, so it’s freaking invisible.
It’s UNDER the button that says sign up.
I have targeted everything I can think of via CSS. Every combination of .text-md .mr-1 .rounded-md .text-sm I could think of. It’ll change in the browser when I use the inspector, but does not work when added to code injection.
I’m so sure there’s a simple answer to this. I just haven’t found it. I want it to either be a button proper, or at least a different color so it’s visible. Any help is appreciated. Thanks!
Trying to change the colour with CSS isn’t going to work as the entirety of the commenting embed is delivered via an iframe, implying that adjusting things will require some JS to inject your desired style changes. I can’t help you as I don’t know JS, so you’re either going to have to cross your fingers and hope somebody else who does know JS chimes in, or you can search around the forum to see if somebody has offered a relevant solution. Or perhaps one of those AI things can spit out the JS you need, I don’t know.
Stromfeldt is right that it lives in an iframe, which is why Code Injection CSS never reaches it. The comments box is rendered by Ghost’s comments script inside an iframe on your own domain, so a small script can add a style tag inside it once it loads. Something like this in Settings > Code injection > Site footer:
<script>
(function () {
var css = 'a, button.text-sm { color: #ffffff !important; }'; // adjust selector/colour after checking in the inspector
function patch() {
document.querySelectorAll('iframe').forEach(function (f) {
try {
var d = f.contentDocument;
if (d && d.head && !d.getElementById('my-comments-fix')) {
var s = d.createElement('style'); s.id = 'my-comments-fix'; s.textContent = css; d.head.appendChild(s);
}
} catch (e) {}
});
}
new MutationObserver(patch).observe(document.body, { childList: true, subtree: true });
patch();
})();
</script>
Use the inspector to find the exact class on that “Sign in” link and put it in the css line instead of my guess. A simpler route, if you can live with it, is picking a slightly darker or lighter accent colour in Design settings so the link has enough contrast on the background.
(I used an AI assistant to help write this and haven’t tested it on Casper 6.64, so please check it on a staging copy first.)
