How to customize comments section?

Hi!

I’m trying to customize my comments section – font and caption.

I tried Code Injection, but nothing happens. I noticed it’s on an iFrame, that I don’t have access to edit. I’m not even able to edit the translation, that would help to.

So… How can I do it? Is there a way?

My understanding is that if you need to make any changes to comments-ui, you need to build Ghost from source and edit the comments-ui component within Ghost.

I’m not aware of an easier way to do this, and in my experience, this is an absolute pain to maintain, but if you have the time to, it is worth it. If you have no programming experience, I would strongly advise against this and ask you to consider discussing your plans with a developer.

1: Installing from source

A guide on how to get started with this can be found here: Install from Source.

Please note that when running the yarn dev commands, you will need to append the --comments flag if you are working on comments-ui.

2: Save built scripts and provide Ghost the link to them

When you have completed any changes that you have done, the umd folder inside of comments-ui will have the built scripts and styles that you can then save and upload somewhere, and then link to in your Ghost configuration as a custom comments-ui script.

You then need to specify in your Ghost config.json file the URLs to the script and styles you generated, for more information on that: Comments configuration.

Note: Regularly update the script

I would strongly recommend that you regularly pull any changes from the Ghost monorepo into your clone and go through building the scripts and section 2 to ensure you are staying on top of any updates.

…wow.

First of all, thanks for the explanation!

I must confess I was not expecting something like that. Seems a little too… protected? We should be able to edit this kind of thing. It makes me wonder if I’m keeping comments at all. :(

I’ll see what I do, hoping they allow us to customize it someday. :slight_smile:

Thanks, Carolina!

1 Like