# Table of Contents Solo Theme

**URL:** <https://forum.ghost.org/t/table-of-contents-solo-theme/36728>\
**Category:** Developer help\
**Created:** [February 28, 2023, 7:02am UTC](https://forum.ghost.org/t/table-of-contents-solo-theme/36728 "2023-02-28T07:02:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![dano9258](https://avatars.discourse-cdn.com/v4/letter/d/ce73a5/32.png) [@dano9258](https://forum.ghost.org/u/dano9258)\
**Post date:** [February 28, 2023, 7:02am UTC](https://forum.ghost.org/t/table-of-contents-solo-theme/36728/1 "2023-02-28T07:02:51Z")

</div>

I’m using Ghost Pro and the Solo Theme. I followed the tutorial on the developer site to add table of contents to my site I just started. However, the table of contents is doing two things wrong:

1. Its using my name as the table of contents header. How do I avoid this?
2. The table of contents is displaying behind the author meta data on the left. Is there a way to move it below or to the right of the article?

[www.goodaspace.com](https://www.goodaspace.com)  
Using Safari and DuckDuckGo on MacOS, same results.

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [February 28, 2023, 3:29pm UTC](https://forum.ghost.org/t/table-of-contents-solo-theme/36728/2 "2023-02-28T15:29:12Z")

</div>

Because Solo has a different setup than Casper, you’ll need to do some modifications to get the table of contents working.

1. The author metadata section is included in `gh-content`, and the author name is an `h4`, which explains why it’s included in your TOC. Tocbot includes an ignore selector option that you could use to exclude author name.
2. This is again because of Solo’s layout, which includes the author metadata in the content section. You’ll need to customize the CSS for the TOC or change where it’s rendered.

---

<div class="post-metadata">

**Author:** ![dano9258](https://avatars.discourse-cdn.com/v4/letter/d/ce73a5/32.png) [@dano9258](https://forum.ghost.org/u/dano9258)\
**Post date:** [February 28, 2023, 3:36pm UTC](https://forum.ghost.org/t/table-of-contents-solo-theme/36728/3 "2023-02-28T15:36:47Z")

</div>

Thanks for getting back to me. Being new to this, do you have any suggestions on how to accomplish those things?

UPDATE: Figured out how to exclude headings H4. Still have not figured out how to make it display underneath the author metadata.

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [February 28, 2023, 6:50pm UTC](https://forum.ghost.org/t/table-of-contents-solo-theme/36728/4 "2023-02-28T18:50:53Z")

</div>

It looks like you’re trying out a new library. Let us know if that works better for you.

The first thing I would do if you want to use tocbot is to add some content to your site with headings, so it’s easier to see how things are working (or not). That way, we can test some things out and see what works and what doesn’t.

---

<div class="post-metadata">

**Author:** ![dano9258](https://avatars.discourse-cdn.com/v4/letter/d/ce73a5/32.png) [@dano9258](https://forum.ghost.org/u/dano9258)\
**Post date:** [February 28, 2023, 6:59pm UTC](https://forum.ghost.org/t/table-of-contents-solo-theme/36728/5 "2023-02-28T18:59:06Z")

</div>

I was playing around with this tutorial:

> [@Table of Contents Tutorial for Casper Version 4 - Simplified](https://forum.ghost.org/t/table-of-contents-tutorial-for-casper-version-4-simplified/22584/3):
>
> Also I think somebody else will probably respond, but if they don’t, I’ll have a go at building this and then share the code with you. I’m certainly not the most experienced or skilled developer here but I have implemented exactly this on a non-Ghost website before and I can’t imagine it will be much more difficult.

But I went back to the [Ghost.org](http://Ghost.org) tutorial and implemented that. I’m glad I figured out the H4 thing which is below for anyone else who is having that issue.

```auto
<script>
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.gh-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.gh-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h2, h3',
        // Ensure correct positioning
        hasInnerContainers: true,
    });
</script>

```

Now I just need it pushed below the author metadata somehow, or shown to the right of the article (preferred).

---

<div class="post-metadata">

**Author:** ![dano9258](https://avatars.discourse-cdn.com/v4/letter/d/ce73a5/32.png) [@dano9258](https://forum.ghost.org/u/dano9258)\
**Post date:** [February 28, 2023, 7:23pm UTC](https://forum.ghost.org/t/table-of-contents-solo-theme/36728/6 "2023-02-28T19:23:23Z")

</div>

I figured it all out. For others who wish to do this:

```auto
@media (min-width: 1300px) {
     .gh-sidebar {
        position: absolute; 
        right: 0;
        top: 0;
        bottom: 0;
        margin-top: 4vmin;
        grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
    }
   
    .gh-toc {
        position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
        top: 7vmin;
    }
}

```

Now I just need to figure out how to make the vertical list lines go to the right of the wording and add a table of contents header text above the list…

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [February 28, 2023, 8:53pm UTC](https://forum.ghost.org/t/table-of-contents-solo-theme/36728/7 "2023-02-28T20:53:51Z")

</div>

Nice! Glad you figured it out.

Tocbot also has an ignore selector:

```js
ignoreSeletor: ".gh-author-name"

```

You could add that to the tocbot configuration, which would make it ignore the author name but let you keep `h4`s in the mix.

---

<div class="post-metadata">

**Author:** ![Vincent\_Yuan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vincent_yuan/32/24729_2.png) [@Vincent\_Yuan](https://forum.ghost.org/u/Vincent_Yuan)\
**Post date:** [July 28, 2023, 12:07am UTC](https://forum.ghost.org/t/table-of-contents-solo-theme/36728/8 "2023-07-28T00:07:12Z")

</div>

Hi @dano9258

Have you figured out how to put the TOC on the right. I firstly thought the trick is on the grid-column of the below block. It turns out that modifying this is not enough. I am not very familiar with the Ghost template languages. Hopefully you can advise if you or anyone else figure it out. THX.

```css
@media (min-width: 1300px) {
            .gh-sidebar {
                position: absolute; 
                top: 0;
                bottom: 0;
                margin-top: 4vmin;
                grid-column: main-end / wide-end; /* Place the TOC to the left of the content */
            }

```