Remove underline in table of contents

Developer help
1

Hey,

i created a table of contents according to this tutorial: How to add a table of contents to your Ghost site

But now i want to remove the underline because it doesn’t work that well with the emojis

image
image950×538 28 KB

Can somebody help?

Thanks :slight_smile:

2

Without linking your site I can’t be certain, but these are probably unformatted hyperlinks.

Did you use code injection or follow the styling guide at the bottom of the article?

3

Hey @mjw,
thanks for your response.
I implemented it for you here: How to dimension rafters of purlin roofs? - Structural Basics
It’s not the one from the picture bc that one isn’t published yet.
I used code injection :)

4

I note that your theme underlines links contained in the body; the TOC code is inheriting this setting. If you want to override this, you’ll need to change this for toc-list.

Amend the selector .toc > .toc-list li to .toc > .toc-list li a, and insert text-decoration: none;.

PS. Your links seem to be broken on mobile. Likewise, the tables are messing with things too.

5

According to the link you have given, each TOC link has a class name toc-link, so you can add the following code in code injection to remove the link. Also added some extra code for showing underline on hover. If you don’t want that, You can remove that part from the code block.

<style type="text/css">
a.toc-link {
    text-decoration: none;
}
// show underline on hover
a.toc-link:hover {
    text-decoration: underline;
}
</style>

BTW, I also have a question for you that is not relevant to this topic. Which plugin or solution you are using for the cookie policy popup?

6

Hey @GBJsolution,

thank you very much! It works perfectly!
What resources can you recommend to learn those things? I only know python and css and javascript seem to be very different :smiley:

I am using enzuso for the cookie policy popup: https://www.enzuzo.com/

7

As you know python, You will need less effort to learn javaScript. Because some of the core concept and syntax is common between programming languages.

The solution to your problem is just plain CSS. But If you want to learn javaScript a good beginner starting point is https://www.w3schools.com/ and another is JavaScript | MDN.

BTW, If your problem is solved, you may mark the thread as solved by the answer.

1 Like