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.rstudio.com/html_document_format.html).

I want to change the color, and other attributes, of the floating table of contents. Preferably, I would like to do this via embedded CSS in the Rmd file itself. For example, I can already change the color of the text that appears in the TOC if I put this in my Rmd file:

---
title: "Untitled"
output:
  html_document:
    keep_md: true
    css: styles.css
    toc: true
    toc_float: true
    number_sections: true

---
<style type="text/css">
#TOC {
  color: purple; 
}

</style>

output looks like this:

As you can see, the text inside the TOC is now purple. How can I find out what other attributes are available to change this way? How can I change the color of the highlighted TOC section?

I would like to do a lot more customization to these interactive elements but I can't seem to find any documentation on how to program them. It would also be nice to be able to change the tab pill buttons that you can get with {.tabset .tabset-pills}.

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:

<style>
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    background-color: purple;
}
</style>

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

Answer 2

You can open the generated html file and study the style elements there: For a simple example like the Rstudio's default which you have shown as an example there are different style elements in the html files such as the ones below. You could change each of these here and I believe you can change any css in markdown like with html. Anything you can do in normal html/css, you should be able to do that in shiny.

<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>


<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>


<style type="text/css">

#TOC {
  margin: 25px 0px 20px 0px;
}
@media (max-width: 768px) {
#TOC {
  position: relative;
  width: 100%;
}
}


.toc-content {
  padding-left: 30px;
  padding-right: 40px;
}

div.main-container {
  max-width: 1200px;
}

div.tocify {
  width: 20%;
  max-width: 260px;
  max-height: 85%;
}

@media (min-width: 768px) and (max-width: 991px) {
  div.tocify {
    width: 25%;
  }
}

@media (max-width: 767px) {
  div.tocify {
    width: 100%;
    max-width: none;
  }
}

.tocify ul, .tocify li {
  line-height: 20px;
}

.tocify-subheader .tocify-item {
  font-size: 0.90em;
  padding-left: 25px;
  text-indent: 0;
}

.tocify .list-group-item {
  border-radius: 0px;
}


</style>



<style>
#TOC {
  color: purple; 
}

</style>

Update You would need a little knowledge of html and css to change the styles and know the styles that are in use. For example, table of contents when ues as toc_float = false is also a link; you can change the color attributes of the link such as below which shows unclicked link, clicked link as green and if you hover over the link, color changes to hotpink. This example to justify any html/css element can be changed in shiny.

---
title: "Untitled"
output:
  html_document:
    keep_md: true
    toc: true
    toc_float: false
    number_sections: true
---

<style>
a:link {
    color: red;
}

a:visited {
    color: green;
}

 a:hover {
    color: hotpink;
}

</style>