# Align TOC + Content with header post image

**URL:** <https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767>\
**Category:** Themes\
**Created:** [June 13, 2022, 7:10pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767 "2022-06-13T19:10:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/joan/32/17592_2.png) [@Joan](https://forum.ghost.org/u/Joan)\
**Post date:** [June 13, 2022, 7:10pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/1 "2022-06-13T19:10:05Z")

</div>

Hi!  
It’s possible align the content with TOC with header image on posts?  
Thanks!

This is the default Casper CSS code :

```auto
.gh-canvas {
    display: grid;
    grid-template-columns: [full-start] minmax(max(4vmin,20px),auto) [wide-start] minmax(auto,240px) [main-start] min(720px,calc(100% - max(8vmin, 40px))) [main-end] minmax(auto,240px) [wide-end] minmax(max(4vmin,20px),auto) [full-end];
}

```

 ![Captura de Pantalla 2022-06-13 a las 21.07.58](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/5/a/5a7de1c5ac3f3ae398325437f9262207dcafc8ee.jpeg)

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 13, 2022, 9:32pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/2 "2022-06-13T21:32:50Z")

</div>

It would be most helpful if you could provide a link to the published page so we can inspect the totality of the code currently generating the layout.

---

<div class="post-metadata">

**Author:** ![Joan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/joan/32/17592_2.png) [@Joan](https://forum.ghost.org/u/Joan)\
**Post date:** [June 14, 2022, 1:37pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/3 "2022-06-14T13:37:12Z")

</div>

Thanks for reply me @denvergeeks ,  
My site: [Cómo instalar AdGuard Home en Synology](https://hdsplus.co/como-instalar-adguard-home-en-synology/)

I have to say that also, the official Ghost tutorial for adding TOC, doesn’t work well with Casper 5. I posted a Bug on Github but I didn’t get a response yet:

[TOC Bug with Casper 5.X](https://github.com/TryGhost/Casper/issues/866)  
It can be “fixed” by adding “margin-bottom: X-px;” to .gh-toc. But it’s a botched.

Thanks for all.

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 14, 2022, 3:37pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/4 "2022-06-14T15:37:10Z")

</div>

I’m still unclear as to what you want the result to look like, but if you want to maintain the width and spacing of both the content and your TOC, and just center them together on the page, then try this…

```auto
.gh-content {
    justify-content: end
}
```

---

<div class="post-metadata">

**Author:** ![Joan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/joan/32/17592_2.png) [@Joan](https://forum.ghost.org/u/Joan)\
**Post date:** [June 14, 2022, 4:26pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/5 "2022-06-14T16:26:34Z")

</div>

Seems not work correctly…

 ![Captura de Pantalla 2022-06-14 a las 18.23.25](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/c/e/cee7ab32b48f7c11800a7d10732b90e342cbe132.jpeg)

With this CSS code seems to work “fine”:

```auto
@media (min-width: 1300px) {

        .gh-content {
    margin-left: 220px;

}}

```

 ![Captura de Pantalla 2022-06-14 a las 18.25.31](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/d/4/d446f3545d5477f3da60a810a4aa5812ef60af6a.jpeg)

.

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 14, 2022, 5:19pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/6 "2022-06-14T17:19:52Z")

</div>

@Joan I just tested the installation instructions for the TOC here…

> **[How to add a table of contents to your Ghost site](https://ghost.org/tutorials/adding-table-of-contents/)**
>
> Let your readers know what to expect in your posts and give them quick links to navigate content quickly by adding a table of contents with the Tocbot library.

I tested on a fresh site install on Ghost v 5.2.2 and Casper v 5.1.4

Everything worked perfectly.

Changing some of the widths and spacing in the CSS to prettify your TOC (which looks very nice!) pushed around some other positioning on the page. I still don’t see everything centering or aligning consistently yet on your site when I resize the page.

---

<div class="post-metadata">

**Author:** ![Joan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/joan/32/17592_2.png) [@Joan](https://forum.ghost.org/u/Joan)\
**Post date:** [June 14, 2022, 5:40pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/7 "2022-06-14T17:40:27Z")

</div>

> [@denvergeeks](#):
>
> I tested on a fresh site install on Ghost v 5.2.2 and Casper v 5.1.4
> 
> Everything worked perfectly.
> 
> Changing some of the widths and spacing in the CSS to prettify your TOC (which looks very nice!) pushed around some other positioning on the page. I still don’t see everything centering or aligning consistently yet on your site when I resize the page.

Thanks for testing all,  
Can you test adding a lot of H1, H2 elements? TOC seems to work fine with Casper 5 but if the TOC has a lot of elements like in my image… it’s create a blank space on gh-content.

 ![Captura de Pantalla 2022-06-14 a las 19.38.22](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/f/0/f00445ffe19dc142f97588f39b632141b435c5dd.jpeg)

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 14, 2022, 5:56pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/8 "2022-06-14T17:56:08Z")

</div>

What is the URL of your page with a problem?

Yes I have the same large space issue, but only under the first **h2** , even without any of your CSS adjustments.

Also, I think the solution to your larger content layout is with the grid-template-columns…

@TheRoyalFig has worked on this…

> [@Adding a table of contents](https://forum.ghost.org/t/adding-a-table-of-contents/29588/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…

> **[grid-template-columns | CSS-Tricks](https://css-tricks.com/almanac/properties/g/grid-template-columns/)**
>
> The grid-template-columns CSS property is part of the CSS Grid Layout specification, defining the columns of a grid container by specifying the size of the

Here’s another post that might help explain what’s going on in Ghost…

> **[Table of Contents in Ghost](https://www.dingran.me/o/table-of-contents-in-ghost/)**
>
> Automatically generated table of contents in Ghost, conditionally shown when it is not empty.

---

<div class="post-metadata">

**Author:** ![Joan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/joan/32/17592_2.png) [@Joan](https://forum.ghost.org/u/Joan)\
**Post date:** [June 14, 2022, 6:44pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/9 "2022-06-14T18:44:59Z")

</div>

For example this:  
[https://hdsplus.co/como-instalar-rtorrent-rutorrent-en-tu-nas-synology/](https://hdsplus.co/como-instalar-rtorrent-rutorrent-en-tu-nas-synology/)

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 14, 2022, 7:47pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/10 "2022-06-14T19:47:34Z")

</div>

So far I’m noticing that the space is always to the right of the TOC and extends down to the bottom edge of the TOC… so, the same height as the TOC. It doesn’t seem related to headings like h2 because when I remove the first one at the top of my content, the problem persists with just the p paragraph text being bumped down after the first paragraph.

I also tried the Headline theme with the same result.

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 14, 2022, 7:52pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/11 "2022-06-14T19:52:52Z")

</div>

OK, so try adding this in the CSS… (to fix the added space problem next to the TOC)

```auto
.gh-toc > .toc-list {
    position: absolute;
}
```

---

<div class="post-metadata">

**Author:** ![Joan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/joan/32/17592_2.png) [@Joan](https://forum.ghost.org/u/Joan)\
**Post date:** [June 14, 2022, 8:21pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/12 "2022-06-14T20:21:00Z")

</div>

Yes! seems to work correctly. In my case not because the .gh-toc “background-color” it cuts. But with “default css design” without background color it’s work with “absolute” position. Something happens with relative position and the blank space… It’s strange…

If you try to add “margin-bottom: X-px” to .gh-toc in relative position it’s seems to repair, but…

Thank you for your time and help

 ![Captura de Pantalla 2022-06-14 a las 22.16.22](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/3/8/382346361ea7ae96d11f6942b48914d54c8780d1.png)

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 14, 2022, 8:50pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/13 "2022-06-14T20:50:59Z")

</div>

Try this instead for constructing your pretty box…

```auto
<style>
    
.gh-toc {
    margin-right: 4vmin
}
    
.gh-toc > .toc-list {
    box-shadow: 0 10px 50px rgb(25 37 52 / 14%), 0 2px 5px rgb(25 37 52 / 3%);
    border-radius: 2rem;
    padding: 30px
}
    
@media (min-width: 1300px) {
.gh-toc > .toc-list {
    position: absolute
    }
}

.toc-link::before {
    background-color: #fff;
    margin-left: 10px
}

html.dark-mode .gh-toc > .toc-list,
html.dark-mode .gh-toc .toc-link::before {
    background: #222128
}

html.dark-mode .gh-toc .is-active-link::before {
    background-color: var(--ghost-accent-color)
}

</style>

```

Here’s my working sample…  
[https://ghost.pub/test-for-toc/](https://ghost.pub/test-for-toc/)

(And below is a screenshot of that page)

 ![Screenshot 2022-06-14 151507](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/8/7/8775f2faa1427d55a91528756c29567e1ae528b6.png)

---

<div class="post-metadata">

**Author:** ![Joan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/joan/32/17592_2.png) [@Joan](https://forum.ghost.org/u/Joan)\
**Post date:** [June 14, 2022, 9:12pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/14 "2022-06-14T21:12:22Z")

</div>

Yes!!! Only one more thing… with your CSS code… only works with “auto” scheme color. With “Dark” scheme of Casper… your CSS shows it like this:

 ![Captura de Pantalla 2022-06-14 a las 23.10.52](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/8/f/8f29dce7054ee668d1049119dc7dea152790a236.png)  
 ![Captura de Pantalla 2022-06-14 a las 23.10.44](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/9/7/97a864f54f6d4d3e65eee285b85cae4a66cfb59c.png)

And if you view your demo site with iPhone for example Its shown wrong, but this could be fixed by applying “absolute” starting at 1300px screen .

 ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/9/1/91fa2cce092d16164674a52eca57203cd57bcc2e.jpeg)

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 14, 2022, 9:34pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/15 "2022-06-14T21:34:48Z")

</div>

You are correct… thank you for catching that… here is the whole CSS override, including Dark Mode and the fix for small screens…

```auto
<style>
    
.gh-toc {
    margin-right: 4vmin
}
    
.gh-toc > .toc-list {
    box-shadow: 0 10px 50px rgb(25 37 52 / 14%), 0 2px 5px rgb(25 37 52 / 3%);
    border-radius: 2rem;
    padding: 30px
}
    
@media (min-width: 1300px) {
.gh-toc > .toc-list {
    position: absolute
    }
}

.toc-link::before {
    background-color: #fff;
    margin-left: 10px
}

html.dark-mode .gh-toc > .toc-list,
html.dark-mode .gh-toc .toc-link::before {
    background: #222128
}

html.dark-mode .gh-toc .is-active-link::before {
    background-color: var(--ghost-accent-color)
}

</style>

```

 ![Screenshot 2022-06-14 171012](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/2/2/22ada13df59c9b27f4bd8da0166f5146841cfb28.png)

---

<div class="post-metadata">

**Author:** ![Joan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/joan/32/17592_2.png) [@Joan](https://forum.ghost.org/u/Joan)\
**Post date:** [June 15, 2022, 8:53am UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/16 "2022-06-15T08:53:22Z")

</div>

It’s work perfectly!!  
Thanks you so much!

😄

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [June 15, 2022, 9:29am UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/17 "2022-06-15T09:29:52Z")

</div>

It was my pleasure! I’m so glad I could help!

Your site is looking really great!

---

<div class="post-metadata">

**Author:** ![Joan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/joan/32/17592_2.png) [@Joan](https://forum.ghost.org/u/Joan)\
**Post date:** [October 11, 2022, 10:14am UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/19 "2022-10-11T10:14:44Z")

</div>

Hi!  
I have a “problem”. Could you help me?  
I have added a style to “.gh-content li” so that the numbers are displayed differently. But… it is also added to the ToC.

The custom CSS code:

.gh-content ol {  
margin: 0;  
padding: 0;  
list-style-type: none;  
}  
.gh-content li {  
counter-increment: step-counter;  
margin-bottom: 5px;  
}

.gh-content li:before {  
content: counter(step-counter);  
margin-right: 20px;  
font-size: 85%;  
background-color: rgb(180, 180, 180);  
color: white;  
font-weight: bold;  
padding: 3px 9px;  
border-radius: 11px;  
}

For Example:

 ![Captura de Pantalla 2022-10-11 a las 12.13.45](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/0/4/047fde6b0d26caf313ee7d762200cec201c958e2.png)

 ![Captura de Pantalla 2022-10-11 a las 12.13.22](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/f/5/f5afff774132201cd8408735511fde48e2c64990.png)

it’s possible hide on ToC element?  
I tried adding  
.gh-toc li:before { list-style-type: none!Important;}

but unsuccesful.

Thanks you so much

---

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [October 11, 2022, 1:25pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/20 "2022-10-11T13:25:05Z")

</div>

Yes @Joan – use the **CSS :not Selector**

```auto
:not(.gh-toc) {
  css declarations;
}

```

> **[:not | CSS-Tricks](https://css-tricks.com/almanac/selectors/n/not/)**
>
> The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as an argument. It matches an element that is not

[https://www.w3schools.com/cssref/sel\_not.asp](https://www.w3schools.com/cssref/sel_not.asp)

---

<div class="post-metadata">

**Author:** ![Joan](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/joan/32/17592_2.png) [@Joan](https://forum.ghost.org/u/Joan)\
**Post date:** [October 11, 2022, 6:43pm UTC](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767/21 "2022-10-11T18:43:07Z")

</div>

SOLVED! Thanks you so much!!! 🙂

[Next page](https://forum.ghost.org/t/align-toc-content-with-header-post-image/30767.md?page=2)