# Table of Contents for Solo Theme? **URL:** \ **Category:** Themes\ **Created:** [August 9, 2024, 3:28pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438 "2024-08-09T15:28:32Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![jeremy20100](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeremy20100/32/30761_2.png) [@jeremy20100](https://forum.ghost.org/u/jeremy20100)\ **Post date:** [August 9, 2024, 3:28pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/1 "2024-08-09T15:28:32Z")
Hello everyone 🙂 I am using the fabulous Solo Theme but only thing is missing : a table of contents. I am wondering if it is possible to implement a table of contents easily (without coding) without upgrading my Starter pack subscription ? If not, is there another solution → again, without coding 😄 ? ---
**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\ **Post date:** [August 9, 2024, 6:22pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/2 "2024-08-09T18:22:13Z")
The approach here can be used in a mix of code injection and an html card in the post editor, > **[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. You’ll likely have to tweak some css selectors. ---
**Author:** ![Raki](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/raki/32/40808_2.png) [@Raki](https://forum.ghost.org/u/Raki)\ **Post date:** [August 9, 2024, 6:27pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/3 "2024-08-09T18:27:32Z")
You can try the [table of contents widget](https://rakihub.com/tool/toc), you can add TOC by simply copying code into “Code injection”. Here is the [guide](https://blog.rakihub.com/how-to-use-the-toc-widget/) on how to use it. ---
**Author:** ![jeremy20100](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeremy20100/32/30761_2.png) [@jeremy20100](https://forum.ghost.org/u/jeremy20100)\ **Post date:** [August 10, 2024, 3:00pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/4 "2024-08-10T15:00:01Z")
I already checked this method before asking the question, but they don’t really say you can insert it before your OG post. ---
**Author:** ![jeremy20100](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeremy20100/32/30761_2.png) [@jeremy20100](https://forum.ghost.org/u/jeremy20100)\ **Post date:** [August 10, 2024, 3:00pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/5 "2024-08-10T15:00:34Z")
Thanks 👍 I’ll have a look at it. But how does it display eventually? ---
**Author:** ![Raki](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/raki/32/40808_2.png) [@Raki](https://forum.ghost.org/u/Raki)\ **Post date:** [August 10, 2024, 5:32pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/6 "2024-08-10T17:32:15Z")
You can check this [link](https://ghosttest.rakihub.com/rise-of-telemedicine-amidst-health-crisis/) for eventual display ---
**Author:** ![jeremy20100](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeremy20100/32/30761_2.png) [@jeremy20100](https://forum.ghost.org/u/jeremy20100)\ **Post date:** [August 10, 2024, 5:47pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/7 "2024-08-10T17:47:58Z")
Ha okay 😅 It is not a floating TOC on desktop apparently. On the phone, it does seem not sticking to the top of the screen where we can go to any section of the blog post. Is it correct? The problem is that I wrote 3000 words articles as an average. So, it’s more convenient to make it more UX friendly. Do you think we can make it another way ? If nor, I should buy a theme accordingly. ---
**Author:** ![ROY](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/roy/32/36059_2.png) [@ROY](https://forum.ghost.org/u/ROY)\ **Post date:** [August 10, 2024, 6:23pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/8 "2024-08-10T18:23:24Z")
> [@Raki](#): > > link This is a good resource. But it does not work with most themes. I have checked Headline, Source, Journal, etc. It would have been great if Ghost team provided theme specific ToC :) ---
**Author:** ![Raki](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/raki/32/40808_2.png) [@Raki](https://forum.ghost.org/u/Raki)\ **Post date:** [August 10, 2024, 6:44pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/10 "2024-08-10T18:44:48Z")
On desktop, it is sticky alongside the content, while on mobile, it appears at the position it’s inserted. ![Screenshot 2024-08-10 at 11.39.51](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/e/3/e3acb6bf802327a5052810cddae2b14605fe6e94.png) > Do you think we can make it another way ? Of course, I can add more display options for the widget. Can you provide me with a display example? ---
**Author:** ![Raki](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/raki/32/40808_2.png) [@Raki](https://forum.ghost.org/u/Raki)\ **Post date:** [August 10, 2024, 6:45pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/11 "2024-08-10T18:45:15Z")
The TOC in my link is generated using my [TOC widget](https://rakihub.com/tool/toc). It is compatible with most themes as it automatically detects the content container and adapts accordingly. ---
**Author:** ![jeremy20100](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeremy20100/32/30761_2.png) [@jeremy20100](https://forum.ghost.org/u/jeremy20100)\ **Post date:** [August 10, 2024, 6:55pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/12 "2024-08-10T18:55:25Z")
Yeah sure 😃 ![1000015282](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/5/3/53735b2b5a69ff4d906f94f3748e3f50a489fd7f.jpeg) Sound perfect for the desktop version. ---
**Author:** ![Raki](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/raki/32/40808_2.png) [@Raki](https://forum.ghost.org/u/Raki)\ **Post date:** [August 12, 2024, 2:49am UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/14 "2024-08-12T02:49:49Z")
I added a new style option: " Always Sticky", and you can view its display effects at [“Always Sticky” Demo](https://ghosttest.rakihub.com/always-sticky-toc-copy/?ref=blog.rakihub.com) ---
**Author:** ![jeremy20100](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeremy20100/32/30761_2.png) [@jeremy20100](https://forum.ghost.org/u/jeremy20100)\ **Post date:** [August 12, 2024, 9:32am UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/15 "2024-08-12T09:32:25Z")
Thank you for the modification 🙂 I tried on both plateforms (desktop and smartphone). Here are the screenshots of how it looks. ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/5/1/5102244bb89caa9dfbfbf9c023c81cfea572269f.png) On the phone, sometimes, it goes that way. ![Screenshot_2024-08-12-11-19-56-911_com.android.chrome](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/8/6/866f85efbf39c0119005428e26e6d98514d1bd35.jpeg) A link to a video about how it behaves on the phone : > **[Screenshot\_2024-08-12-11-19-56-911\_com.android.chrome.jpg](https://drive.google.com/file/d/1hlhZja10A3B9dCTsZZmzWXXkySlY3MLc/view?usp=drive_link)** > > Google Drive file. Quick improvements (according to me) : - While scrolling down, try to make it sticky right away. Now, it goes sticky after once scrolling down AND scrolling back up. - Put grey border 1px (or 2) solid without shadows, depending on the background of the page. - Make the TOC take the whole screen. - Don’t cut off the headings, start a new line instead. - Make the font size of the whole TOC smaller. One size for the top title ‘Table of contents’ and one size for all the headings (a bit smaller). Here is the link of another video about how a TOC should behave (but it is my perspective 😄) : > **[toc-goal.mp4](https://drive.google.com/file/d/1hotmnjY7H1QXDIPxRnu4wD0WvpUHyR5V/view?usp=sharing)** > > Google Drive file. I hope it helps you to improve your TOC 🙂 ---
**Author:** ![Raki](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/raki/32/40808_2.png) [@Raki](https://forum.ghost.org/u/Raki)\ **Post date:** [August 12, 2024, 9:59am UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/17 "2024-08-12T09:59:59Z")
Thank you for your feedback. I will consider your suggestions. Regarding the screenshots: 1. You can adjust TOC to appear at the right side, so it won’t overlap with author info. 2. I will fix the overlay problem on phone screen. ---
**Author:** ![Raki](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/raki/32/40808_2.png) [@Raki](https://forum.ghost.org/u/Raki)\ **Post date:** [August 21, 2024, 12:47am UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/18 "2024-08-21T00:47:22Z")
Hi Jeremy, I have fixed the bugs, updated the styles and added more config options. You can view the new style at: [Always Sticky TOC](https://ghosttest.rakihub.com/always-sticky-toc-copy/) To make the TOC work for your site, please go to [Rakihub TOC](https://rakihub.com/tool/toc) and select: - “Always sticky” style - “Right” for “position on desktop” - Your prefered font size for TOC heading and title ---
**Author:** ![jeremy20100](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeremy20100/32/30761_2.png) [@jeremy20100](https://forum.ghost.org/u/jeremy20100)\ **Post date:** [August 23, 2024, 4:28pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/19 "2024-08-23T16:28:49Z")
Hello @Raki, I tried to set it up on one of my pages. Here’s how it looks like : ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/a/2/a260dd1e519e0d18ebe66d639f9b2baacc6618d5.png) The title of TOC appears twice as you link-logo. Personnally, I’d rather make the headings fonts smaller, like 10px (as I saw on another Ghost theme) to make it more readable. Example : ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/1/5/15b2f4f8160836c738eafc16786a7db4cc816966.png) There is another issue, but I don’t know if it is linked to my Solo theme. ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/2/4/24c59040cacff9b281bddea2bfcdca0c7d628188.png) It crosses the main pic. How to make the TOC sticky under the image ? * * * Here’s how it looks on the phone : ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/8/5/8569c20472f069975c47eb55484f0c597afb3798.png) FYI, here’s the code I used : ```auto ``` * * * Thanks for the reply. Hope it’s helping 🙂 . ---
**Author:** ![Raki](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/raki/32/40808_2.png) [@Raki](https://forum.ghost.org/u/Raki)\ **Post date:** [August 23, 2024, 6:16pm UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/20 "2024-08-23T18:16:23Z")
> The title of TOC appears twice as you link-logo Seems like you injected the code twice, please check your “Code injection =\> site header” if there is any duplicate code related with “rakihub/ghost-code-injection” > How to make the TOC sticky under the image ? Seem strange, I can’t reproduce this with Solo theme, is it possible to give me a link and let me check? ---
**Author:** ![jeremy20100](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeremy20100/32/30761_2.png) [@jeremy20100](https://forum.ghost.org/u/jeremy20100)\ **Post date:** [August 24, 2024, 8:11am UTC](https://forum.ghost.org/t/table-of-contents-for-solo-theme/49438/21 "2024-08-24T08:11:24Z")
Here’s the link of my blog : > **[Blog de JĂ©rĂ©my : Ă©crire son contenu web avec l'IA et le SEO](https://www.jeremy-vincent.com/sujet/redaction-web-seo-copywriting/)** > > Apprenez Ă  Ă©crire le contenu texte de votre site internet, de vos mails et de votre blog. MaĂźtrisez les bases du content marketing, du SEO et de l'IA. Go on any blog post and you’ll see by yourself. I just removed the TOC because of visitors coming. You can add it manually in the code I suppose.