How to change colors and attributes of Table of Contents in R Markdown HTML document?

Question

I\'ve spent an inordinate amount of time Google\'ing this and can\'t seem to figure it out.

I am making HTML documents using R Markdown (docs here: http://rmarkdown.rst

Answer 1

In order to change attributes of the floating Table of Contents via CSS, you first need to figure out the ID's of the elements. An easy way to do this is to open the HTML file in Chrome, right-click on the highlighted section in the floating TOC, and then select 'Inspect' to pull up the developer console. From there, you should see a 'Styles' tab, which will show the CSS currently used for the item, along with the item's associated ID's.

For example, the default CSS for the highlighted TOC element looks like this:

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

Here, the background-color refers to the color of the highlighted TOC element, and is currently set to the default blue color (#337ab7). To make it a different color, you can actually play around right in Chrome. Try clicking on #337ab7, and then typing in 'purple'. You should see the change occur in real time.

I don't know how R Markdown works, but the best practice is to update the class in your css stylesheet. As a quick fix though, you can just copy and paste this into your R Markdown document inside the tags, like this:

In order to change the colors of the pill buttons, you can use a similar method, and check out this answer:

https://stackoverflow.com/a/30324279