Adding a table of contents

Developer help
1

Hi!

Hi,

I was trying to follow this 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!)

1 Like
2

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

1 Like
3

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.

1 Like
4

Great, thanks for sharing!

I’ve another question too.

The width of the text my blog post is now very narrrow (https://blog.gocontentjungle.com/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

5

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
6

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.

7

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.

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

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

1 Like
9

Hi, trying not to start a new question, a am also follow the tutorial which is now here:

However, my theme grid seems to be based on ‘flexbox’ I think rather than ‘CSS Grid’, the table of contents just overlaps.

http://170.64.148.123/home-office-setup-guide/

Any advice on how to fix the CSS most welcome!!

10

Hey @contentjungle

Can you please share what Ghost (Pro) plan and Theme are you on/using?

I’m on the Starter Ghost (Pro) plan which does not allow editing the theme in any way. I have looked at a few options including (How to add a table of contents to your Ghost site, How to setup the table of contents in ghost.org, and a few others that I found in online searches), but I have not been able to find a solution.

The errors I have run into include ToC showing up on top of content, ToC overlapping on top of Header and/or Footer (see here), or ToC not showing up at all.

I would love to have the ToC show up as sticky on the left side of the post. Feel free to let me know if you find another workaround :slight_smile:

11

In your theme, are you able to put the TOC container after the div with the class .oc-sidebar?

12

Hi, @RyanF thanks so much for replying, yes I’ll have no problem moving some HTML around in the theme, I just have no idea about modern CSS, I only did a bit of CSS many years ago.

13

I’d move it and then share the updated link. Moving it should get you 90% of the way there.

14

Actually, I’m a bit confused now - as there is not any div with a class of oc-sidebar.

15

Sorry, added a letter. You’re looking for c-sidebar

16

Thanks, so after doing that it appears at the top right of the screen:

http://170.64.148.123/home-office-setup-guide/

17

@Darren_Sherwood try putting the aside.gh-sidebar inside the div.c-sidebar

What I see currently…

Screenshot 2023-06-24 024856
Screenshot 2023-06-24 0248561380×265 30.8 KB

Try this…

Screenshot 2023-06-24 025138
Screenshot 2023-06-24 0251381314×832 122 KB

Also, this in the CSS…

.c-sidebar {
    position: absolute;
}

aside.gh-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: 4vmin;
}

.gh-toc
    position: sticky;
    top: 4vmin;
}
18

Thanks very much for the idea @denvergeeks, I did try that already by drag-drop in Chrome tools, but I did not try the additional:

.c-sidebar {
    position: absolute;
}

…that you suggested (the other CSS is there already as per Ryan’s guide), but I tried that now and it makes everything else in the sidebar bleed to the right.

Happy to wait until next week for further suggestions from @RyanF (or others), have a great weekend. :slight_smile:

19

Here’s what I’d go for (still needs fine tuning):

CleanShot 2023-06-24 at 15.17.35
CleanShot 2023-06-24 at 15.17.351239×1026 248 KB

Put the .gh-sidebar element after the c-widget-author element.

CleanShot 2023-06-24 at 15.19.33

Remove all styling from gh-sidebar.

Add padding-left: 32px; to the .toc-list class.

Finally, if you want the sidebar to stick to the top of the page on scroll, add:

position: sticky; top: 0;

to .c-sidebar.

CleanShot 2023-06-24 at 15.22.58
CleanShot 2023-06-24 at 15.22.581271×829 227 KB

20

I find it quite surprising that the development team is recommending the Table of Contents for the tutorial without thoroughly testing its impact on mobile devices. The excessive Content Layout Shifts (CLS) it causes could have been avoided with the guidance of an SEO specialist.

https://forum.ghost.org/t/casper-cumulative-layout-shift-cls-on-google-pagespeed-insights-is-0-10/39316/4

3 Likes