Create Tables of Contents with Custom Design

Hello guys,

Today I bring you a very cool tutorial, we are going to see how we can turn a boring WordPress table of contents into a very cool table of contents.

Browsing the internet I came across the following table of contents from MyThemeShop:

Compared to the typical table of contents that we are used to seeing, it has nothing to do with it:

I set out to reach that result and as you can see below we achieved it:

Changing the design of a table of contents is not difficult, with a bit of CSS we will achieve it.

Video Walkthrough:

Everything you need to follow the tutorial

The first thing you need is to have the plugin to create the table of contents Easy table of contents

And then you have to add the following css code in Customize –> Additional CSS:

p.ez-toc-title {
    color: black;
    font-weight: 700 !important;
}

div#ez-toc-container {
    background: linear-gradient(to right, #B06AB3, #4568DC);
    padding: 48px;
}

.ez-toc-title-container {
    background: #f7f7f7;
    padding: 20px;
}

#ez-toc-container nav li a{
	padding: 8px 0 8px 25px;
	border-bottom: 1px solid #ddd;
	display:block;
	color: #000;
	font-size:18px;
}



.ez-toc-list li:nth-child(odd){
	background:#fff !important;
}

.ez-toc-list li {

		background: #f7f7f7 !important;
}

#ez-toc-container nav li:hover >a{
	text-decoration: none;
	background: #FFFCCD;
	
}

And if all goes well you will get a wonderful table of contents 😉

I hope you liked the tutorial.