How to hide website title in quarto when using a title-block-banner? - r-markdown

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,

Related

How to change font style, size and color in xaringan slide

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;
}

Slides written in Rmd missing pages when converting from HTML to PDF

I'm trying to convert a set of slides written in Rmarkdown and outputted in HTML with xaringan::moon_reader into PDF, and I used pagedown::chrome_print() to convert to PDF.
The issue is, the converted PDF has its title page missing as well as random pages throughout the slides. I tried to manually print the HTML file with Chrome and other browsers in an attempt to save to PDF, but they have the same missing pages.
I'm open to any advice on how to export to PDF without any pages missing. It doesn't have to be chrome_print() as long as the slides can be exported in PDF successfully.
Here's a reproducible pseudocode of the slides:
---
title: document_title
author: author_name
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
lib_dir: libs
nature:
ratio: '4:3'
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
editor_options:
chunk_output_type: console
---
count: false
<style>
.center2 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
pre.sourceCode {
max-height: 200px;
overflow-y: auto;
}
/*
.remark-slide-number {
position: inherit;
}
.remark-slide-number .progress-bar-container {
position: absolute;
bottom: 0;
height: 4px;
display: block;
left: 0;
right: 0;
}
.remark-slide-number .progress-bar {
height: 100%;
background-color: blue;
}
*/
</style>
# only using two backticks for codechunks in rmd to escape ending the codeblock on stackoverflow
``{css, echo=FALSE}
#media print {
.has-continuation {
display: block !important;
}
}
``
``{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
library(knitr)
opts_chunk$set(
fig.align="center",
fig.height=4,
dpi=300,
cache=T ,
echo=F
)
library(tidyverse)
library(hrbrthemes)
library(fontawesome)
``
count: true
# Slide 1
</br>
.font130[
1. Content 1
2. Content 2
]
---
count: false
# Slide 2
</br>
.font130[
Content for slide 2
]
---
``{r gen_pdf, include = FALSE, cache = FALSE, eval = TRUE}
pagedown::chrome_print("slides.html", output = "slides.pdf")
``
We have count:true and count: false throughout the documents but it doesn't seem to relate to whether the page is missing or not.
Thank you so much in advance!
I've figured out what went wrong with my slides for anyone having the same issue:
So in the end it does have something to do with count: true or count: false
count: true indicates the start of a page, but count: false adds on new information on the same page on html format, but all the intermediate results are covered by whichever section that is your last count: false section.
An example would be :
---
count: true
Content 1
---
count: false
Content 2
---
count: false
Content 3
In this case Content 1 would be the start of a new page and everything will show up fine in .html, but on the pdf it was converted to, only Content 3 will show up, and not Content 1 or 2.
Title page was set to count: true automatically, but if you have a count: false section right after it, it will not show up.
Hopefully this explains it!

fonts to html output Rmarkdown

When I used \textsf{what} in the following document, "what" disappears in the output file. What should I do to prevent the problem while changing the font of "what"? Thanks!
title: "test"
author: test
date: 11/23/2020
link-citations: yes
output:
bookdown::html_document2: default
---
\textsf{what}
If you want to change the font when rendering to html output you colud use some inline CSS e.g.
<p style = "font-family: Times New Roman; color: red;">what</p>
will print "what" in red using Times New Roman.
I believe \textsf{what} is latex syntax, which is for PDF output. You are rendering to HTML in your example.
as the #stefan suggested inline CSS in your Rmarkdown it would look like this
---
title: "test"
author: test
date: 11/23/2020
link-citations: yes
output:
bookdown::html_document2: default
---
<style>
body, p {
background-color: lightgray;
color: black;
font-family: Arial Black;
}
</style>
what
I used Arial Black for the example to showcase the effects below.

Increase width of table of contents in rmarkdown

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"

xaringan metropolis theme slide title font size

When using the metropolis theme in xaringan (RStudio 1.2.1070)
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
I wish to have a smaller font for the title of each slide. If I use h1 for a slide title i.e.
---
# The title of this slide
content
it works as expected, but if I try to use h2 i.e.
---
## The title of this slide
content
the text appears in the body of the slide and not the banner.
Suggestions?
Update
Thanks for the prompt answer Martin. I modified your suggestion slightly.
Including:
.remark-slide-content.hljs-default {
border-top: 40px solid #23373B;
}
adds the border to the title slide (which I didn't want).
For me, just adding this works fine:
<style>
.remark-slide-content > h1 { font-size: 35px; margin-top: -88px; }
</style>
Nevertheless, I must say my original question about using ## was prompted by the entry on xaringan Presentations in R Markdown: The Definitive Guide https://bookdown.org/yihui/rmarkdown/xaringan-format.html where it states:
7.3.1 Slides and properties
Every new slide is created under a horizontal rule (---). The content
of the slide can be arbitrary, e.g., it does not have to have a slide
title, and if it does, the title can be of any level you prefer (#,
##, or ###).
Try the following:
---
title: Test
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
---
<style>
.remark-slide-content.hljs-default {
border-top: 40px solid #23373B;
}
.remark-slide-content > h1 {
font-size: 20px;
margin-top: -55px;
}
</style>
---
# The title of this slide
content
I guess you have to play around with the settings to achieve exactly the layout you want.