CODEWITHSUNDEEP
rmarkdownpresentation
Martin Schmelzer
Martin Schmelzer

Reputation: 23889

Markdown: Exclude elements on slides from "building" in ioslides

im building a presentation using RStudio, the Markdown Syntax and the ioslides format. Take a look at this example:

---
title: "Example"
output:
  ioslides_presentation:
toc: yes
widescreen: yes
---
<img style="position:absolute;bottom:75%;left:73%;width:170px;" src="http://developer.r-project.org/Logo/Rlogo-5.png">

## TOC 
<div style="position:absolute;bottom:4%;left:5%;width:450px;font-size:11pt;">FooterFooterFooter</div>

Test Test Test


## Introduction {.smaller .build}
<div style="position:absolute;bottom:4%;left:5%;width:450px;font-size:11pt;">FooterFooterFooter</div>

Test Test Test

As you can see I added a logo at the top right corner. It is placed on every slide since I included it at the very beginning.

On the slides following the title slide I have included a footer. I have to include it on every slide. If I put that line of code at the beginning (like the logo) I will have it being displayed at the title slide as well (what I don't want to happen).

So gar, so food. If I build a slide piece by pice (like the Introduction slide in this example) the footer is also one of the elements being build up. More precisely after clicking for the first time the footer will appear. That is what I don't want to happen! I want to "exclude" the div-element containing the footer from the building process.

Is there a possibility for that to work?

Otherwise, if I include the footer at the beginning of the code, how can I exclude it from the title page?

Thank you for your help!

UPDATE:

OK, I found a solution. But this one is very inconvenient. One can edit the knitted HTML file and put the div-container between the Title of the slide and the article statement:

Original:

<slide class=''>
<hgroup><h2>Introduction</h2></hgroup><article  id="introduction" class="smaller build">
<div style="position:absolute;bottom:4%;left:5%;width:450px;font-size:11pt;"> FooterFooterFooter </div>
<p>Test Test Test</p></article></slide>
<slide class="backdrop"></slide>
</slides>

Edited one:

<slide class=''>
<hgroup><h2>Introduction</h2></hgroup>
<div style="position:absolute;bottom:4%;left:5%;width:450px;font-size:11pt;">FooterFooterFooter </div>
<article  id="introduction" class="smaller build">

<p>Test Test Test</p></article></slide>
<slide class="backdrop"></slide>
</slides>

This works. But If I have 50 slides and all of them are build piece by piece I would have to edit 50 lines of code. Any other suggestions?

Upvotes: 0

Views: 880

Answers (1)

Martin Schmelzer
Martin Schmelzer

Reputation: 23889

Since I am no CSS crack I had to dig my way through the template files. I finally found out:

Adding the following lines:

background-image: url(/Users/PATHTOLOGO/logo.pdf) !important;
background-size: 200px;
background-repeat: no-repeat;
background-position: 93.1% 4%;

to the slides > slide CSS definition that follows immediately after the body tag, will add the specified logo at every slide (including the title slide) and exclude them from being built as well! Look for 

/* line 58, ../scss/default.scss */
body {
  background: black;
}

/* line 62, ../scss/default.scss */
slides > slide {
  display: none;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 26px;
  color: #797979;
  width: 900px;
  height: 700px;
  margin-left: -450px;
  margin-top: -350px;
  padding: 40px 60px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;

}

in the default.css. The only thing I couldn't figure out is how to add the logo to the sectionslides as well. I tried adding my lines to the slide.dark class but that didn't work. Maybe someone can figure out this last piece of the puzzle =)

Upvotes: 1

Related Questions