How to change the background color of title section of html report

Question

I'm creating an interactive HTML document using R markdown and I cannot figure out how to add background color only to the title section. I've seen posts about how to change the background color of different chunks, but I want to apply color only to where the title appears. I was using the html pretty package originally that did this for me but it wasn't compatible with some features I needed to add into the report so now I have to figure out a way to add the color back in manually.

This is what it currently looks like:

and I want it to look like this:

Any help is appreciated!

Answer 1

Use your own CSS code to alter the design.

1. Open your document in a browser and right click on the title. Select Inspect Element to identify it. In your case we want to alter #header and the containing h1 with class .title.

2. Alter the elements! For example:

   <style> 
     #header { 
       background: #2274cc; /* Old browsers */
       background: -moz-linear-gradient(left, #2274cc 0%, #26c5d3 36%, #61bf61 100%); /* FF3.6-15 */
       background: -webkit-linear-gradient(left, #2274cc 0%,#26c5d3 36%,#61bf61 100%); /* Chrome10-25,Safari5.1-6 */
       background: linear-gradient(to right, #2274cc 0%,#26c5d3 36%,#61bf61 100%); /* W3C, IE10+, FF16+, Chrome26+,  Opera12+, Safari7+ */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2274cc', endColorstr='#61bf61',GradientType=1 ); /* IE6-9 */
       color: white;
       height: 100px;
       display:flex;
       align-items: center;
       justify-content: center;
     }
   
     h1.title {
       margin: auto;
     }
   </style>
   

This code goes into your rmarkdown document without any wrapping. You can put it right underneath the YAML header or even include it by using an extern .css file (check out the YAML option to include stylesheets).

The code for the background gradient can easily be generated by using an online tool like http://www.colorzilla.com/gradient-editor/.

A good reference for how to use CSS is https://www.w3schools.com/Css/.