CODEWITHSUNDEEP
r-markdownxaringan
jck21
jck21

Reputation: 811

How to adjust title size or banner size of a single slide in xaringan

I have encountered an issue with the size of banner title as in the following picture.

enter image description here

It is two-line title, which does not fit into the banner. Is there any way to make the banner size bigger (vertically increased) or to make font size of title smaller.

I would appreciate it if you could show me both ways. Thanks.

My code is

---
title: "Lecture"
subtitle: "subtitle"
author: "Instructor"
institute: "University"
output: 
  xaringan::moon_reader:
    css: [default, metropolis, metropolis-fonts, "styles.css"]
    lib_dir: libs
    seal: false
    nature:
      highlightStyle: arta
      highlightLines: true
      countIncrementalSlides: false
      titleSlideClass: [top, left]
 
---
class: title-slide, top, left, inverse
background-image: url(aaa.jpeg)
background-size: cover

# *`r rmarkdown::metadata$title`*
## *`r rmarkdown::metadata$subtitle`*
### `r rmarkdown::metadata$author`
### `r rmarkdown::metadata$institute`
### `r rmarkdown::metadata$date`
### `r Sys.Date()`

```{css, echo=FALSE}
<style>
.remark-slide-content.hljs-default {
  border-top: 40px solid #23373B;
}

.remark-slide-content > h1 {
  font-size: 35px;
  margin-top: -85px;
}

</style>
```

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

---

# Why people are constantly switching jobs, causing frictional unemployment?

---

The updated version of problematic page is written in the following way:


---
class: custom
```{css, echo=FALSE}
.remark-slide-content .hljs-default {
  border-top: 40px solid #23373B;
}

.remark-slide-content > h1 {
  font-size: 35px;
  margin-top: -85px;
}

.custom h1 {
font-size: 24px;
}
```
# Causes of unemployment: Why people are constantly switching jobs, causing frictional unemployment?

### .my-style1[Sectoral shifts]

### .my-style1[Structural shifts]

### Seasonal changes

### Taste shocks

---

Upvotes: 0

Views: 769

Answers (1)

Shafee
Shafee

Reputation: 20067

To define CSS rule for a specific slide (It might be to change the title font size of that specific slide or to do anything), define a class: your-class-name just after creating a new slide with the ---.

So to change the title font size of that single slide, we write class: custom just after --- and then define CSS rule in css chunk for .custom to reduce the font-size.

---
title: "Lecture"
subtitle: "subtitle"
author: "Instructor"
institute: "University"
output: 
  xaringan::moon_reader:
    css: [default, metropolis, metropolis-fonts, "styles.css"]
    lib_dir: libs
    seal: false
    nature:
      highlightStyle: arta
      highlightLines: true
      countIncrementalSlides: false
 
---
class: title-slide, top, left, inverse
background-image: url(lights.jpg)
background-size: cover

# *`r rmarkdown::metadata$title`*
## *`r rmarkdown::metadata$subtitle`*
### `r rmarkdown::metadata$author`
### `r rmarkdown::metadata$institute`
### `r Sys.Date()`


```{css, echo=FALSE}
.remark-slide-content .hljs-default {
  border-top: 40px solid #23373B;
}

.remark-slide-content > h1 {
  font-size: 35px;
  margin-top: -85px;
}

.custom h1 {
font-size: 24px;
}
```


---
class: custom

# Why people are constantly switching jobs, causing frictional unemployment?

---

# Heres another slide title

Upvotes: 2

Related Questions