How to control the background color of the first slidify slide?
Asked Answered
P

1

15

As a slidifiy newbee, I don't understand why the first slide has a pale green background and all the other slides have white backgrounds.

The example "Test for Slidify" at http://www.rpubs.com/ also shows this pale green first slide.

How can I control the background color of this first slidify slide?

Patristic answered 2/1, 2014 at 2:48 Comment(1)
Here's the pale green color on this example: bl.ocks.org/ramnathv/7155433 How is the color defined in the .cmd file? How can it be changed?Patristic
F
19

The css defining the title slide is contained in libraries/frameworks/io2012/slidify.css. Here is the part that controls the title slide. You can modify it and add it to your Rmd file directly to override default styles.

.title-slide {
  background-color: #CBE7A5; /* #EDE0CF; ; #CA9F9D*/
}

.title-slide hgroup > h1{
 font-family: 'Oswald', 'Helvetica', sanserif; 
}

.title-slide hgroup > h1, 
.title-slide hgroup > h2 {
  color: #535E43 ;  /* ; #EF5150*/
}

To do this from within an .Rmd file, one would add the following after the YAML front matter section of index.Rmd. This applies a white background to the title slide:

---
title       : title slide bg change example
author      : Ramnath
...
mode        : selfcontained # {standalone, draft}
knit        : slidify::knito2slides
---

<style>
.title-slide {
  background-color: #FFFFFF; /* #EDE0CF; ; #CA9F9D*/
}
</style>

Remember to re-run slidify("index.Rmd") to apply the change.

Fibrosis answered 2/1, 2014 at 5:20 Comment(5)
Ramnath, could it be possible to implement changing first slide colour and whole presentation font in Rmarkdown?Indaba
Yes. You can add the css directly to your Rmarkdown between <style> and </style> tags, and it would override the default css.Fibrosis
where does <style> and </style> go in the .Rmd fileScurrilous
^I have the same question. I've placed it in every spot in my .rmd file and nothing changes...Catherinacatherine
@Fibrosis I tried what you said using <style> tags and it worked just fine. I added this to your already helpful answer just to explicitly get at the comments inquiring. Hopefully that wasn't overstepping my bounds and feel free to edit/update at will! Just thought it would be helpful since folks were asking.Selfpity

© 2022 - 2024 — McMap. All rights reserved.