style.Rmd

---
title: "Style"
output: html_document
---

## Navigation bar

To change the part of the navigation bar that says "OTTR Web", modify the title within the `_site.yml` file.


```{r, fig.align='center', fig.alt= "Change nav bar", echo = FALSE, out.width="40%"}
knitr::include_graphics("resources/images/navbar.png")
```


## Overall theme

To change the color scheme/fonts of the website modify the `theme` in the `_site.yml` file (see [here](https://www.datadreaming.org/posts/2018-04-11-r-markdown-theme-gallery/2018-04-11-r-markdown-theme-gallery) for options):

```{r, fig.align='center', fig.alt= "Change theme", echo = FALSE, out.width="40%"}
knitr::include_graphics("resources/images/theme.png")
```

## Change the favicon

The small image that shows up on the browser can also be changed.

You can make a small image to replace the existing one by going to https://favicon.io/favicon-converter/ and uploading an image that you would like.

Next, simply replace the image called `favicon.ico` in the `images` directory within the `resources` directory with the image you just created and downloaded from the favicon converter website.

## Additional changes

To make additional changes to the style, you can modify the `styles.css` file with css code. This [website](https://www.w3schools.com/css/) has great information about css code.

As an example if you wanted to change the color of the blue line to green you could change where it says lightblue to lightgreen in the `styles.css` file.


```{r, fig.align='center', fig.alt= "Change color of line", echo = FALSE, out.width="80%"}
knitr::include_graphics("resources/images/blue.png")
```

Note that if you change the css file with a new element that is not already defined like `body` then you would need to do it as done with the `banner` element. This was then added to the index.Rmd file by using:

```
<div class = "banner">
Banner text!  
</div>
```

Also checkout the [R Markdown cheatsheet](https://www.rstudio.com/wp-content/uploads/2015/02/rmarkdown-cheatsheet.pdf) for more customization of the pages.