Footer and header lines

Credit: https://github.com/gnab/remark/issues/229#issuecomment-148061289

1. Create custom <div> classes within the respective .css file

The .css file is named footer-header.css and saved within the directory of the presentation.

div.my-header {
    background-color: #F77A00;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffb76b), color-stop(0%,#ffa73d), color-stop(0%,#ffffff), color-stop(10%,#ffffff), color-stop(25%,#F77A00), color-stop(100%,#F77A00));
    position: fixed;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 100%;
    text-align: left;
}

div.my-footer {
    background-color: #272822;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 20px;
    width: 100%;
}
div.my-footer span {
    font-size: 10pt;
    color: #F7F8FA;
    position: absolute;
    left: 15px;
    bottom: 2px;
}

2. Reference the class in the presentation and add the custom CSS file to the YAML header:

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    css: ["footer-header.css", "default"]
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

layout: true
  
<div class="my-header"></div>

<div class="my-footer"><span>xaringan power    
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
yolo</span></div> 

---

# new slide

3. Example