8

I've googled a bit but I don't seem able to find a "full" reference of RMarkdown-CSS reference.

I found the following (and useful) resources:

but I really can't find a full reference of all the customizable elements.

For instance I wanted to change the slide background color, titles color and number format. I managed to set CSS propertied of the formers (background and titles -headers btw-) by reading the HTML output (with browser inspector) but I really can't figure out what I have to do to style slide numbers.

The following is a small example:

---
title: "The title"
author: "Zamengo Bruno"
date: '`r format(Sys.Date(), "%d/%m/%Y")`'
output: 
  ioslides_presentation: 
    css: styles.css
    widescreen: yes
    theme: yeti
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## First slide 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor neque ac euismod ornare. Cras scelerisque ante velit, volutpat rhoncus massa vehicula vitae. Donec viverra tincidunt velit id egestas. Quisque a aliquam quam. Phasellus lorem lectus, imperdiet ut libero a, vulputate lobortis arcu. Sed consequat fringilla nulla sed tempor. Proin laoreet massa sed vestibulum tristique. Nulla non volutpat arcu, a semper arcu. Etiam lobortis augue in felis commodo condimentum. Quisque interdum sed lorem in varius. Sed at massa quis ipsum semper vestibulum pharetra vel nisl. 

## Second one 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor neque ac euismod ornare. Cras scelerisque ante velit, volutpat rhoncus massa vehicula vitae. Donec viverra tincidunt velit id egestas. Quisque a aliquam quam. Phasellus lorem lectus, imperdiet ut libero a, vulputate lobortis arcu. Sed consequat fringilla nulla sed tempor. Proin laoreet massa sed vestibulum tristique. Nulla non volutpat arcu, a semper arcu. Etiam lobortis augue in felis commodo condimentum. Quisque interdum sed lorem in varius. Sed at massa quis ipsum semper vestibulum pharetra vel nisl.

And this is (very very simple) CSS file styles.css:

slide {
    background-color: #E0E9E3;
}

h1, h2, h3, h4, h5, h6, h7, h8 {
    color: #99CC00;
}

Finally the question:

How can I make slide numbers green?

And more generally

Is there any complete reference to RMarkdown ioslides HTML tags which can be styled via CSS?

Bruno Zamengo
  • 800
  • 1
  • 11
  • 24

2 Answers2

4

To answer your first question:

<style>
slides > slide:not(.nobackground):after {
  color: green;
}
</style>

About the second one or how did I come up with the answer to the first question:

There is no reference per se. The problem here is that the appearance of the slide numbers is defined as a pseudo class (such as :after):

enter image description here

If you click on that line you find the corresponding styles for that pseudo element:

enter image description here

You can clearly recognize the definition of the slide numbers within the attribute content. So this CSS affects not the slide element but the space "right underneath" it. Just copy and paste the CSS selector and add or edit the styles you need.

In such situations, if I cannot see the forest through the trees, I usually check the default stylesheet which can be found at github. If you Ctrl + F for :after (knowing that it possibly is defined as such) or just slide-num you will find the corresponding lines of code pretty fast.

Martin Schmelzer
  • 23,283
  • 6
  • 73
  • 98
0

I couldn't find a tutorial tailored to ioslides (or RMarkdown in general). Nonetheless, here is a nice, friendly, very much hands-on tutorial on how to write your own CSS in general.

EA304GT
  • 634
  • 8
  • 11