Adding a table of contents



I was trying to follow this tutorial: Tutorial: How to add a table of contents to your Ghost site

I would like to have it the same as the example in Advanced Styling.
I added the example code in “screen.css” ( is that correct, or should I add it somewhere else? Also tried global.css)

However, I think .post-content changed to .gh-content

But can’t find what .post-full-content changed to. (Now tried both .article and .post).

The navigation menu is still below my image, and not on the side.

Do you have any advice on what to do?

(Context: I have no developing experience at all haha, just downloaded visual studio code to create this fixed side navigation menu. So probably it’s a very stupid question, but thank you so much in advance for helping me out!)

Okay, fixed it with this tutorial (combined with the other tutorial)!

Awesome you figured out!

I also put this out there as another resource for adding a TOC in case someone else sees this post:

It’s what I use on my site, too.

Great, thanks for sharing!

I’ve another question too.

The width of the text my blog post is now very narrrow (How To Repurpose Your Blog Content)

Do you have any idea how I can change the width?
Have tried every max-width in screen.css haha but nothing changes

So, the TOC is now sharing space with your content, so there’s just less room, which is why your content has become so narrow. Unfortunately, to give the page more space to work it would require some serious reworking of your CSS.

Another approach would be to always have the TOC appear in the same column as your content. That way, your content won’t have to fight for space with the TOC.

1 Like

Thanks for your response!

Hmm, so there’s no quick fix to create more space for the page?

I found this tutorial: Ghost blog page width which made it seem pretty easy to change, but I couldn’t find this code in my css.

Unfortunately, that tutorial doesn’t apply to your theme.

You could try adding the following to your Site Header in Settings > Code Injection. Because this change could affect lots of different pages on your site, you’ll want to test other pages to make sure nothing looks askew.

In the example below, I’ve increased the width by 200 px. However, you can change the 920 value below up or down to suit your needs.

.gh-canvas {
  grid-template-columns: [full-start] minmax(4vmin, auto) [wide-start] minmax(
    ) [main-start] min(920px, calc(100% - 8vw)) [main-end] minmax(auto, 240px) [wide-end] minmax(
    ) [full-end];

Yesss, this works!!! Thank you so much for your help :smile:

1 Like