CODEWITHSUNDEEP
cssrr-markdown
Daniel_j_iii
Daniel_j_iii

Reputation: 3252

Change the color of header in Rmarkdown Prettydoc templates

Using the package prettydoc in R Markdown, there is a template, the code is below

---
title: Nineteen Years Later
author: Harry Potter
date: July 31, 2016
output:
  prettydoc::html_pretty:
    theme: cayman
    highlight: github
---

The output look likes this

enter image description here

Was wondering where I would be able to change the colors that transcend, so maybe it could go from a red to orange or anything I declare. Where is the .css for this header located? Thank you in advance

Upvotes: 3

Views: 1922

Answers (1)

Radovan Miletić
Radovan Miletić

Reputation: 2821

The easiest way is to override the Bootswatch Cayman theme CSS.
To get the default values of the linear-gradient() CSS function, responsible for "a progressive transition between two or more colors along a straight line" you may "right-click an element on a web page and select Inspect Element":

enter image description here

Was wondering where I would be able to change the colors that transcend, so maybe it could go from a red to orange...

So, applying CSS Linear Gradients Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

---
title: Nineteen Years Later
author: Harry Potter
date: July 31, 2016
output:
  prettydoc::html_pretty:
    theme: cayman
    highlight: github
---

```{css my-header-colors, echo = FALSE}
.page-header {
    background-image: linear-gradient(120deg, red, orange);
}
```

we get the output: enter image description here

Where is the .css for this header located?

Github: https://github.com/yixuan/prettydoc/blob/master/inst/resources/css/cayman.css
Windows (PC): ..\R\win-library\4.0\prettydoc\resources\css\cayman.css

Does this help in any way?

Upvotes: 7

Related Questions