Spectral Web Services
How to load custom styling for Ghost comments
Restyling your built-in comments is possible!
💡
Self-hosters, you don't need this document. You can just follow the directions for loading custom comments
Verision 0.12 of the Ghost comments app takes a data-styles parameter that'll load a style sheet.
Here's the code that loads the comments script, which runs in Ghost head. (When you have a {{comments}} helper, it causes this code to appear.
<script defer src="https://cdn.jsdelivr.net/ghost/comments-ui@~0.12/umd/comments-ui.min.js"
data-ghost-comments="{{@site.url}}" data-api="{{@site.url}}/ghost/api/content/"
data-admin="{{@site.url}}/ghost/" data-key="yourContentApiKey"
data-styles="https://cdn.jsdelivr.net/ghost/comments-ui@~0.12/umd/main.css" data-title="" data-count="false" data-post-id="{{id}}" data-sentry-dsn="" data-color-scheme="auto" data-avatar-saturation="60" data-accent-color="#000000" data-app-version="0.12" data-comments-enabled="all" data-publication="Your site's name" crossorigin="anonymous"></script>What can you do with this? Lots! Removing the {{comments}} helper and replacing it with the code above, and then replacing the .css file url with your own version of that css file lets you:
- Hide deleted/removed posts (rather than them still being visible). Inability to do this is a common complaint over on the forum.
- Hide the link that prompts people who aren't members to sign up, which you can replace with links to your own theme's sign up. If you are using a custom membership flow and comments, this is how you get your users into the custom flow, instead of having them directed to the portal when the click the comments box CTA.
- Change the styling!
Interestingly, version 0.13 does not seem to take a css file parameter, but it does take some arguments about light/dark mode.
