4

Reading this introductory text, I thought it is straightforward to color the body or bullet points on a specific slide green. I created my own css file containing the following lines:

body p {
 font-size: 24px;
 font-family: Frutiger Light;
 color: orange;
}

li {
 font-family: Frutiger Light;
 font-size: 20px;
 color: green;
}

.change {
 color: green;
}

and referred to the css-class change by adding {.change} to my header in the rmarkdown file. However, this is completely ignored. I am lost and would very much appreciate a hint in how to solve this.

Here is a simple reproducible example. Please make sure that the css is located in the same folder than the rmd.

Patrick Balada
  • 1,330
  • 1
  • 18
  • 37
  • 2
    Do you have another CSS selector with greater specificity that might be over-riding this value? Where exactly did you add the "change" class in the header? It's easier to help you if you include a simple [reproducible example](https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example) with sample input and desired output that can be used to test and verify possible solutions. – MrFlick Jan 08 '19 at 18:30
  • 1
    Firefox is pretty helpful at debugging things like this. When viewing the bad page, right click on the element you thought should be green, and choose "Inspect Element". One part of the display you get will be the rules selecting properties for that particular element. Chrome does it similarly. – user2554330 Jan 08 '19 at 20:53
  • @ MrFlick Thank you for your answer. I attached a dropbox link to a (hopefully) reproducible example. – Patrick Balada Jan 09 '19 at 07:42

1 Answers1

4

This really depends on what exactly would you like to style. The ioslides manage the "content"** of each slide with an <article> that is given an id with the name of the slide. For example, if you do in your R Markdown file:

## Introduction

* Bullet 1
* Bullet 2

This will (after knit) render into a html similar to:

<hgroup> <h2>Introduction</h2> </hgroup>
<article  id="introduction">
<ul>
  <li>Bullet 1</li>
  <li>Bullet 2</li>
</ul>
</article>

This means you can use your .css to target the <li> bullets on that slide like so - very silly example, but you immediately see if you got it right (proper doc on this here):

#introduction ul li {
    font-size: 50px;
}

** I said content there vaguely, as the management of the entire <slide> is done via classes such as "current" which is variable and makes it more difficult to target a specific slide

EDIT: If you really want, you can also include the css directly in the .Rmd, using the example above you could do in your .Rmd:

<style type="text/css">
#introduction ul li {
  font-size: 50px;
} 
</style>

## Introduction

* Bullet 1
* Bullet 2
Jozef
  • 2,617
  • 14
  • 19
  • @ Jozef Thank you very much for your helpful answer. It helps me a lot to better understand how html/css works but I would actually prefer to be able to change the format for specific slides in the markdown file itself and not having to referring to them in the css. – Patrick Balada Jan 09 '19 at 07:44
  • 1
    Hi, I added to the answer a way to include the css directly in the .Rmd file. This is probably not the best way to do it, but works. Even though this is probably still not exactly what you are after. – Jozef Jan 09 '19 at 08:41
  • 1
    Thank you very much for putting in that extra effort :-) I like the solution (since it solves my problem) but as you are saying, I would prefer making the suggestion in the before mentioned link work. Anyway, thanks a lot! – Patrick Balada Jan 09 '19 at 10:36