How to load custom styling for Ghost comments

Restyling your built-in comments is possible!

How to load custom styling for Ghost comments
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="" 
data-ghost-comments="{{@site.url}}" data-api="{{@site.url}}/ghost/api/content/" 
data-admin="{{@site.url}}/ghost/" data-key="yourContentApiKey" 
data-styles="" 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.