如何在RMarkdown标题幻灯片上修改文本和徽标的位置

时间:2018-02-25 17:25:40

标签: css r r-markdown pandoc xaringan

由于我在标题幻灯片底部的图片,我想

  • 从中心位置向上移动所有titlesubtitleauthor
  • 仅删除标题幻灯片中的Rlogo(不知道该怎么做)。我现在只能使用.title-slide .remark-slide-number { display: none; }删除幻灯片编号。

任何建议表示赞赏!谢谢!

这是我可重复的例子:

tweaks.css文件

/* for logo and slide number in the footer */
.remark-slide-content:after {
    content: "";
    position: absolute;
    bottom: 15px;
    right:   8px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("Rlogo.png");
}

/* for background image in title slide */
.title-slide {
  background-image: url("slideMasterSample.png");
  background-size: cover;
}

.title-slide h1 {
  color: #F7F8FA;
  margin-top: -170px;
}

.title-slide h2, .title-slide h3 {
  color: #e7e8e2; 
  line-height: 1.0em;
  margin-top: -75px;
}

.title-slide .remark-slide-number {
  display: none;
}

第一次尝试margin-top文件中修改tweaks.css --- title: "Presentation Ninja" subtitle: "xaringan" author: "Author" output: xaringan::moon_reader: lib_dir: libs css: ["default", "tweaks.css"] nature: highlightStyle: github highlightLines: true countIncrementalSlides: false ---

<br>

结果1

xaringan wiki

第二次尝试:将title添加到subtitle以手动推送,但author<br>也被推下。将subtitle添加到author--- title: "Presentation Ninja<br><br><br><br><br><br>" subtitle: "xaringan" author: "Author" output: xaringan::moon_reader: lib_dir: libs css: ["default", "tweaks.css"] nature: highlightStyle: github highlightLines: true countIncrementalSlides: false --- 也无济于事。

<div class="header-image-inner">
    <img src="https://images.unsplash.com/photo-1492799808351-30d7d3955cac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74696345f3ca20d8a46bf6d692b78c53&auto=format&fit=crop&w=500&q=60" alt="" />
</div>

结果2

Result 1

使用的照片

Result 2 slideMasterSample.png

1 个答案:

答案 0 :(得分:17)

使用seal: false您可以创建独立于YAML标题的标题幻灯片。它通常简化幻灯片创建imo。

对于除标题幻灯片之外的所有幻灯片的R徽标,请创建自定义div并将其设置为layout

enter image description here enter image description here

CSS:

.title-slide {
  background-image: url("slideMasterSample.png");
  background-size: cover;
}
.title-slide h1, h2, h3 {
  text-align: center;
  color: #F7F8FA;
}

.title-slide .remark-slide-number {
  display: none;
}

div.my-footer {
content: "";
    position: absolute;
    bottom: 15px;
    right:   8px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("Rlogo.png");
}

Rmd:

---
title: "Presentation Ninja"
subtitle: "xaringan"
author: "Author"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ["tweaks.css", "default"]
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
    seal: false
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

class: title-slide   

# Header 1

## Header 2  

### Header 3 

---

layout: true

<div class="my-footer"></div>       

---

# new slide 1

---

# new slide 2