Table of Contents Tutorial for Casper Version 4 - Simplified

@JustinCEO The reason for the # at the beginning of the tag is to designate it as an internal tag. The way you’ve got the tag set up in the code you’ve just shown (and therefore the way you’ve got the tag set up in the admin) is as a public tag, which means the post will display the TOC designation as one of its tags (supposing your theme displays the tags of each post).

1 Like

ahhh! I see! that is cool! and here I was wondering how I’d go about hiding tags like toc that I didn’t want to show up publicly, and private tags were already baked into the Ghost cake :slight_smile:

Another tiny issue you may run into is that the drop-in gallery card will automatically expand to 1200px wide, which isn’t ideal if you have the TOC running neatly down the side of your 720px wide main content. My simple fix was to inject this code:

.kg-gallery-container {
max-width: 720px;
margin: auto;

Yes @DonaldH I will add this (and have now added it to the code my post above) – this is from the Official Ghost TOC Tutorial (Tutorial: How to add a table of contents to your Ghost site) and also needs to be added to the CSS in the Site Header Code Injection for Casper:

/* Adjust content wrapper */
.post-content {
display: block;

/* Adjustments to wide and full width cards */
.kg-width-full {
display: flex;
flex-direction: column;
align-items: center;

.kg-gallery-card > *,
.kg-width-wide > *,
.kg-width-full > *, img {
margin-left: -50vw;
margin-right: -50vw;

.post-full-content pre {
max-width: 0;

I’m quite a n00b so I’m not sure exactly the issue you have in mind here. Maybe if you get a chance you could screenshot it if you’re so inclined.

One issue I did notice was the fixed position version of the ToC overlapping my content a bit at the right edge. Within the @media only screen and (min-width: 1400px) css that makes it float on wider devices, I added max-width: 330px; and you can see the result - this is the closest i can get the ToC to my content before it “pops over” to the top of the page due to the width being too small

I organized the ToC-related CSS and some other CSS into a custom.css file btw … the method of dumping everything into the code injection window didn’t seem like it would scale very well :slight_smile:

having an issue with the bottom of the TOC colliding into the bottom of the page in an unexpected way:

ideas? is there some simple way to make the TOC disappear once you get close to the bottom?

link: SICP 1.1 - The Elements of Programming - Part 1

another screenshot of weird TOC behavior at bottom of page

@JustinCEO – one solution is to set a z-index on the .toc in your CSS . . . ( CSS z-index property )

.toc {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    padding: 5px;
    z-index: 1;
1 Like

Thanks for the great answers. I have followed your instructions and managed to get the ToC showing perfectly. However, when fixing, is there a way to only show after a specific point on the page, e.g. after the featured image.

Try something like this…

.toc-wrapper {
    position: absolute;
    top: 0;
    right: -220px;
    height: 100%;

.toc {
    position: -webkit-sticky;
    position: sticky;
    margin-top: 50px;
    margin-bottom: 30px;
    top: 100px;
    width: 180px;
1 Like