css - R Markdown: Putting an image in the top right hand corner of HTML and moving title down

Question

I would like to put a company logo image in the top right hand side of my R markdown report, and then move the title down, say 3 or 4 cm lower than the default position. The idea being that it looks like company letterhead.

Could anyone suggest how I could code this in my .Rmd file?

Thanks for any help!

Answer 1

Option 1:

Add this script at the beginning (or somewhere else) of your RMarkdown document:

<script>
   $(document).ready(function() {
     $head = $('#header');
     $head.prepend('<img src="logo.jpg" style="float: right;width: 150px;"/>')
   });
</script>

This will look like

For the script to work, the image has to be in the same folder as the .Rmd document. You could also give the <img>tag a certain id and add more precise CSS styling with

<style>
  #myLogo {
    float: right;
    width: 120px;
    ...
</style>

Option 2:

Create an extra HTML file (e.g. extLogo.html) that contains the logo like:

<div><img src="logo.jpg" width="200px" align="right"></div>

Then modify the YAML header like this:

---
title: "Test"
author: "Martin Schmelzer"
date: "13 Juli 2016"
output: 
  html_document:
    includes:
      in_header: extLogo.html
---

This looks like

and might need some further margin/padding options...