Source: Table of Content - change appearance

Themes
1

Hi Team,

I have followed the instructions to include a ToC into my source : How to add a table of contents to your Ghost site

I was successful, but I would need help to make it look a bit different:

  • How can I get rid of the underline?
  • How can I get rid of the alphabetical label “a.” , “b.” , “c.” etc.

image

Thank you for all your hard work.
Best wishes
Jann

3

Hi Dinana,

I think I’m being stupid here. Trying to add the code provided by you via Code injection (header) via copy and paste, it literally displays it at the top of the post…

image
image834×567 19.8 KB

Am I not doing this right? If you require more information, would you need me to paste the default and post hbs in here?

4

Hello @Jann ,

Paste the CSS styles within the <style></style> tags in the code injection.

It would go like this:

<style>
    .toc-link { 
        text-decoration: none;
    }
    .toc-list li::before {
        content: none;
    }
</style>

To change the look of your table of contents, add CSS styles for those elements.

1 Like
5

Thank you for the help.

I have added this in the Code Injection (Header) in the settings. But it still does not work.

Will it be better to include this code into the post.hbs or default.hbs?

6

Can you please share the website URL where you are trying to add styles?
The code injection should work as it is and it is unnecessary to add it again in post.hbs or default.hbs.

7

No problem :slight_smile:

Direct link to my testing post:

Here my code injection:
image

8

Try this code.

<style>
    .toc-link { 
        text-decoration: none !important;
    }
    .toc-list li::before {
        content: none;
    }
    .toc-list-item {
        list-style-type: none !important;
    }
</style>
1 Like
9

Tadaaaa,
image

Thank you so much for helping me. I love the result :slight_smile:

If I want to add more code injections, can I just add to it under the existent code?

10

No problem :slight_smile:

Yes, if you need to add more CSS styles, you can add within the existing <style> ... </style> tags.
If you need to add Javascript, then create <script> ... </script> tags.

1 Like
11

Amazing.

I think I am good to go and create content.

Scary!!! It’s happening!! Two years of trying to get a WordPress website as I want it to be only to then find out that the maintenance will be more work than creating content.
And then I found Ghost, and within days I am up and running. (within hours, really, but work gets in the way of life)

This is just pure magic! Need a Tea now to get my head around the fact that I am where I wanted to be >>> Creating Content!

12

Good luck with your journey with Ghost. I am sure you will never go back to WordPress :slight_smile:

If you need any developer help, feel free to contact me at Contact

1 Like
13

I really appreciate that, thank you. I have bookmarked your website, looking great. Liking a theme there already ;)