How do you style a table of Contents to look like this
You need to inspect the HTML code in Ali’s website to see what HTML tags he is using for the table of contents. See how:
Then make a note of all the tags that you see in the HTML code that appears when you select the table of contents.
Put all those tags that you found in Notepad (if Windows) or TextEdit (if Mac)
Then open his style.css file by visiting this link:
view-source:https://aliabdaal.com/assets/styles.css?v=ed88e17287
(copy the above line and paste it on a new tab)
Then search for each HTML tag that you found earlier and check what CSS he is using for each tag.
Presumably, the HTML tags associated with the table of contents appear as toc.
So you may want to search for that in his style.css file.
@hkalant I’m still a bit confused in my code injection I have put the following in header and footer as instructions on ghost help centre says
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js"></script>
I have also put this in my default.hbs before </body>
<script>
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
hasInnerContainers: true
});
</script>
and before {{content}} in post.hbs I have put this
<aside class="toc"></aside>
what do I need to change?
In your code injection, put this CSS code:
.toc {
padding: 2rem;
background-color: #f8fafc;
}
@hkalant This is what it looks like
Almost there just how do you include more headings other than just h1s and also is there a way to make the green line blue.
P.S where is the best place to put <h6>TABLE OF CONTENTS</h5> so it appears in the box at the top
Thanks
To include more headings, change this:
to this:
<script>
tocbot.init({
// Where to render the table of contents.
tocSelector: '.toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.post-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: true,
});
</script>
It’s best to keep the developer’s comments that are shown in gray and start with //. The comments will help to know what each setting does and where you will need to make changes should you need to in the future.
To include a ‘Table of contents’ title, change this:
<aside class="toc"></aside>
to this:
<aside class="toc">
<h5>Table of contents</h5>
</aside>
then in your code injection put:
.toc h5 {
margin-bottom: 15px;
text-transform: uppercase;
}
And to change the green border on the left, add this to code injection:
.is-active-link::before {
background-color: #put-your-color-here;
}
@hkalant Very sorry about this but I have done the following I have added the header selector h1.2,3
in the default.hbs as you can see
I have put the css files in code injection and here is a screenshot of my post.hbs
but here is a screenshot of one of my posts
no table of contents?
First, change the script in your default.hbs to:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js"></script>
<script>
tocbot.init({
// Where to render the table of contents.
tocSelector: '.toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.post-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: true,
});
</script>
then in your post.hbs, give {{content}} the post-content class, like this:
<div class="post-content">
{{content}}
</div>
@hkalant Thank you very much but as you can see in this post here I have h2s but there not appearing in the table of contents?
Make sure that this code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js"></script>
<script>
tocbot.init({
// Where to render the table of contents.
tocSelector: '.toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.post-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: true,
});
</script>
only appears in default.hbs or in the code injection. Not in both places.
Generally, choose one place for the code and make sure that you haven’t put it anywhere else in your theme.
Because I’m looking at the page source of your website:
view-source:https://www.conornee.com/
and I can see that the tocbot screen is duplicated a few times.
The h2s appear. The h3s don’t appear.
“1. Treat Your Exams As A Game” is h3, not h2.
You sure you put the code only default.hbs?
Because looking at your page source, I can see this:
The tocbot.min.js script appears twice.
And also the contentSelector appears as .gh-content, even though above you put it as .post-content.
Sorry, man, I can’t help further if I don’t see your theme files and your code injection.
in your post.hbs, what do you see after </aside>?
it needs to be:
<div class="gh-content">
{{content}}
</div>
OK I just realised that h3s are showing when you scroll the page and you read the text below each h3.
But because your TOC doesn’t follow you as you scroll, you don’t see the h3s that appear.
Not sure how you change that.