- This topic has 7 replies, 3 voices, and was last updated 2 years ago by
David.
-
AuthorPosts
-
April 19, 2020 at 7:43 am #1245319
David
Hi! I have been struggling trying to find out how to make a TOC like the one seen here:
https://www.indietraveller.co/cambodia-travel-guide/
Where you can see the different headings such as: Map & Route, Angkor Wat and so on. I really like the look of it and want to make the same on my website but i can’t figure it out
I have the Easy TOC plugin installed
I hope you can help!
April 19, 2020 at 9:05 am #1245538Leo
StaffCustomer SupportHi there,
Unfortunately it looks like the example site custom coded the TOC and not using a plugin.
It would certainly require a custom solution to make something like that which is outside of this forum scope.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 20, 2020 at 1:30 am #1246196David
Hey Leo! Thanks for the answer.
How about this example? Is it also custom coded?
https://www.thebrokebackpacker.com/backpacking-south-america-travel-guide/
The section “Jump to” is what interests me.
Can this be done by adding CSS in the “additional CSS” section or how does it work? I have also downloaded the “Simple CSS” plugin.
I found this on Wikipedia but i have no idea how and if it works .
/* {{pp-template}} */
.horizontal-toc-align-center {
margin-left: auto;
margin-right: auto;
clear: none;Hope you can give me a hint on this one. I have never worked with CSS but i guess it’s time to learn!
Best
DavidApril 20, 2020 at 5:42 am #1246470David
StaffCustomer SupportHi there,
the art of understanding CSS is knowing the HTML you’re working with. View one of your posts, now right click over the TOC and Inspect – you’ll see something like this in the Elements panel of the browser developer tools
The
#ez-toc-container
should be what you’re looking for.
And we need to target the Unordered List element:<ul>
and the list<li>
within it like so:/* Make the list a horizontal flex */ #ez-toc-container ul { display: flex; } /* Add some space between list items */ #ez-toc-container ul li { margin-right: 10px; } /* Add some padding to the list item */ #ez-toc-container ul li a { padding: 5px; } /* remove the counters if they are visible */ #ez-toc-container ul li a:before { content: '' !important; }
That should point you in the right direction
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 21, 2020 at 8:12 am #1248130David
Hey David.
Thank you so much. This really helped me.
Last questions:
Do i have to do this on every single page? and how do i save the changes?Right now i have been clicking “Inspect” and editing in there. But when i reload it goes back to normal..
Thanks!
April 21, 2020 at 8:24 am #1248149David
StaffCustomer SupportAdd the CSS to the Customizer > Additional CSS and publish it.
Then it will apply to all pages where a TOC exists.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 22, 2020 at 3:44 am #1249012David
This was super helpful. I learned a lot of new stuff right there.
Thanks a lot!
David
April 22, 2020 at 9:23 am #1249507David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.