Hi I added background image for my title page but once I added the following in order to move my title to top and left, the background image was gone.
Is there any way to fix this issue?
titleSlideClass: [top, left]
---
title: "ECON"
subtitle: "Course Outline"
author: "Instructor"
institute: "University"
date: "`r Sys.Date()`"
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts, "styles.css"]
lib_dir: libs
nature:
highlightStyle: arta
highlightLines: true
countIncrementalSlides: false
titleSlideClass: [top, left]
---
You may want to create your own title slide. To do that, as per the documentation
If you'd like to create your own title slide, disable xaringan's title slide with the seal = FALSE option of moon_reader.
So seal xaringan's default title slide and create your own slide using rmarkdown::metadata and control the title position using class: title-slide, top, left
---
title: "ECON"
subtitle: "Course Outline"
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()`
---
Related
I use a simple setup of a quarto website in R. The code is on GitHub https://github.com/EUV-student/history The site is on GitHub Pages https://euv-student.github.io/history/ I use a title-block-banner. The website title overlays the banner and is unreadable and redundant, since I can see the title in the navigation bar. How can I get rid of the midway website title?
For completeness, my _quarto.yml is:
project:
type: website
output-dir: docs
website:
title: "Medienagentur Geschichte"
cookie-consent: true
navbar:
left:
- href: index.qmd
text: Home
- Aktuelles.qmd
- Fernsehen.qmd
- Hoerfunk.qmd
- Kontakt.qmd
background: "light"
sidebar:
logo: "Images/FM3_3911.jpg"
pinned: true
align: center
header: "Dr. Tillmann Bendikowski"
footer: "Leiter der Medienagentur Geschichte und erster Ansprechpartner für alle Fragen."
page-footer:
left: "2022"
right:
- href: Datenschutz.qmd
- href: Impressum.qmd
format:
html:
theme: simplex
css: styles.css
toc: false
title-block-banner: "Images/banner_books_wide.png"
title-block-style: default
title-block-categories: false
title-block-banner-color: body
editor: visual
Add the following in your styles.css file.
.quarto-title > h1.title {
opacity: 0 !important;
}
Then the rendered website looks like,
I have encountered an issue with the size of banner title as in the following picture.
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
---
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
I was wondering if there is a simple way to do the change of font size, colour and style (bold, italic, etc.) for particular words or phrases in individual xaraingan slides within rmarkdown.
The following is my code:
---
title: "Econ"
subtitle: "Week 1"
author: "Instructor"
date: "`r Sys.Date()`"
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
lib_dir: libs
nature:
highlightStyle: arta
highlightLines: true
countIncrementalSlides: false
---
# Is economics a science?
--
Probably not, maybe pseudo-science?.
I want to make "pseudo-science" bold, italicized, red, slightly bigger.
To style certain lines or phrases, you need to define your own content class (say .my-style) using CSS and wrap those lines or phrases with that content class (like .my-style[lines or phrases]) and define CSS rules for styles that you want to use in CSS file styles.css. Then attach that CSS file by specifying it in the YAML key css: along with other style files.
---
title: "Econ"
subtitle: "Week 1"
author: "Instructor"
date: "`r Sys.Date()`"
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts, "styles.css"]
lib_dir: libs
nature:
highlightStyle: arta
highlightLines: true
countIncrementalSlides: false
---
# Is economics a science?
--
Probably not, maybe .my-style[pseudo-science]?.
styles.css
.my-style {
font-weight: bold;
font-style: italic;
font-size: 1.5em;
color: red;
}
For some reason,  does not work for me.
Any solution to fix this?
My yaml heading is the following:
---
title: "Econ"
subtitle: "Orientation and Lecture 1"
author: "Teacher"
institute: "University"
date: "`r Sys.Date()`"
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts, "styles.css"]
lib_dir: libs
nature:
highlightStyle: arta
highlightLines: true
countIncrementalSlides: false
---
To scale an image in xaringan slides (in R-markdown), a safe option is using knitr::include_graphics along with chunk options.
```{r echo=FALSE, out.width="50%"}
knitr::include_graphics("test_animal.jpg")
```
Update
If you want to fill the entire slide with an image you can use background-image and background-size option in xaringan slides to do that.
---
title: "Econ"
subtitle: "Lecture 1"
author: "Instructor"
institute: "College"
date: "`r Sys.Date()`"
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts, "styles.css"]
lib_dir: libs
nature:
highlightStyle: arta
highlightLines: true
countIncrementalSlides: false
---
---
background-image: url(test_animal.jpg)
background-size: cover
Does anyone know how to increase the width of a floating table of content in rmarkdown so that it can show all titles in one line with no break.
Here is an example:
---
title: "Title"
author: "Author "
date: '`r format(Sys.Date(), "%B %d, %Y")`'
output:
html_document:
toc_float: true
toc: true
number_sections: true
code_folding: show
theme: lumen
editor_options:
chunk_output_type: console
---
# A loooooooooooooooooooooooong title
Thanks
What did the trick for me was to change the CSS style of the floating TOC. You can use a CSS code chunk to embed the CSS rules directly in your Rmd document. For example, like this:
title: "XY"
author: "XX"
date: '`r format(Sys.Date(), "%B %d, %Y")`'
output:
html_document:
toc: true
theme: united
toc_depth: 4
toc_float: true
.tocify .tocify-header {
position: fixed;
top: 50px;
left: 50px;
width: 500px;
height: 200px;
}
Or you can include this in a custom stylesheet:
output:
html_document:
css: "style.css"