What's the version number for the comments stylesheet?

Hi All!

I’m working on modifying my custom theme for a Ghost Pro installation. Because it is for Ghost Pro, I can’t modify the configurable stylesheet within the iFrame for the comments.

I would like to see what that stylesheet is though to know what variables are being pulled in and determine whether I can make some better design or color choices for any of the items that are being pulled into the commenting styles. To do that, I need to see what’s in the stylesheet.

The docs provide this URL for where the stylesheets are being hosted: https://cdn.jsdelivr.net/npm/@tryghost/comments-ui@~{version}/umd/main.css

But I’m not sure what version number my Ghost Pro installation is using. Does anyone know a good way to figure this out? I have reached out to Customer Support and they haven’t been very helpful so far. Unless Ghost Pro isn’t using a CDN for the stylesheet, then surely there must be a way for me to get my hands on that version number.

Any help would be much appreciated!

You can see what’s loading by inspecting the page source of a page with a comments box. Here’s my Ghost Pro site.

<script defer src="https://cdn.jsdelivr.net/ghost/comments-ui@~0.13/umd/comments-ui.min.js" data-ghost-comments="https://demo.spectralwebservices.com/" data-api="https://cathys-second-demo-site.ghost.io/ghost/api/content/" data-admin="https://cathys-second-demo-site.ghost.io/ghost/" data-key="fe271d7637c1e685bc13e11f21" data-title="Discussion" data-count="true" data-post-id="65a333b65c058d00015d7381" data-color-scheme="auto" data-avatar-saturation="60" data-accent-color="#185330" data-comments-enabled="all" data-publication="Demo Content" crossorigin="anonymous"></script>

(These keys are not secret, since anyone can see them by inspecting anyway.)

Version 0.13 of comments does NOT seem to load a separate comments CSS file. I checked, and no network call is being made for one. (I thought for a moment that maybe it was just hardcoded.)

Version 0.12 does load a CSS file. If you want to load a custom css file for comments on Ghost Pro, you can absolutely do that, as long as you can edit your theme. You basically replace the {{comments}} helper with the code it would have generated - and if you’re loading version 0.12, then you can specify your own CSS file, too.

I don’t know why the Ghost team removed this functionality from 0.13… I thought it was pretty useful!

Somewhere around here I have some directions for modding version 0.12 into a theme. I’ll find it and come back wtih a link.

That would be really helpful! Thank you.

Did you intend to link an example? I’m not 100% sure how you find the keys through inspection?

I would love to see your directions for modding 0.12 when you find that link.

1,800 posts in, and I still occasionally forget to wrap my code in a code block so that it’ll be visible on the forum! Post updated.

You can view the source of the page to see what Ghost is inserting where the {{comments}} helper is.

Here are my notes/sketchy write-up: How to load custom styling for Ghost comments

This is a great write up! Too bad it looks like I’m on v13 and I won’t be able to use this approach.

The thing I find weird is that the iFrame style defaults to the “dark” version of the Ghost color palette in my theme. I’m not sure why that is. It’s really obnoxious and would be great if it just defaulted to the non-dark version.

If I add a dark background, the comments section looks like it will be mostly usable. If they have a forum post or community feedback area to request new features, I will definitely be asking them to make the default styles a bit more logical and easier to find.

You can switch to version 0.12, as far as I can tell there’s nothing breaking there.

But you might also check the documentation on the comments module (linked from my post) - you might just need to set the color scheme variable (whose name I forget).

The Ideas forum is the right place to make the request. :slight_smile:

Yeah. I found the helper setting that has made things look a whole lot better. All I had to do was this:

{{comments title="" mode="light"}}

And now the styling looks way less weird!

1 Like