I'm trying to use a logo plus a background image on slides prepared with xaringan (rmarkdown).
I haven't found instructions on how to do that.
So far, I have this (only the logo):
---
output:
xaringan::moon_reader:
css: ["xaringan-themer.css","mi_estilo.css"]
lib_dir: libs
nature:
titleSlideClass: ["left", "bottom"]
ratio: '16:9'
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
---
And, this is in the CSS file:
/* Add image and change bg color */
.title-slide {
background-image: url(logo-ean-blanco.png);
background-position: 11% 15%;
background-size: 200px;
padding-left: 100px;
}
So, how can I add now a background image on the front page or title slide? Thanks!
You can specify paths to two images (one for logo and other for background image) in background-image css property by comma separating the url paths and also specify other background properties for the two images separating with comma. See here to know more about this.
---
title: "xaringan"
author: "None"
output:
xaringan::moon_reader:
css: ["xaringan-themer.css","mi_estilo.css"]
lib_dir: libs
nature:
titleSlideClass: ["left", "bottom"]
ratio: '16:9'
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
---
mi_estilo.css
.title-slide {
background-image: url(https://placeholder.pics/svg/100),
url(https://picsum.photos/id/870/800/600?grayscale);
background-position: 2% 2%, center;
background-size: 100px, cover;
}
Related
Just recently i found out about marp.
I want to customize it a little to have basically 4 types of slides.
The title slide and the ToC slide should have different background images.
Following this post, i was able to customize the headings for those slides:
https://www.syndikat7.de/de/post/software-engineers-approach-to-presentation-slides
section.title h1 {
font-size: 60px;
letter-spacing: 10px;
margin-bottom: 0;
padding-bottom: 0;
}
---
marp: true
theme: mytheme
---
<!-- _class: title -->
# My heading on title themed slide
Now i want to add a cutom background image for the whole slide to this Class only.
But where do i have to but the background-image: url('PAth\to\image.png);?
if i put it in
section.title {
justify-content: center;
background-image: url('PAth\to\image.png);
}
The image just shows up around the actual title. The slid backglround is unaltered.
I have a DT data table in my RMarkdown document that allows users to download to a csv. How can I shift this table to the left in my HTML file
in order to get the whole document to shift left, you can add inline CSS code in your Rmarkdown, like this
---
title: "DT table"
author: "Daniel"
date: "5/22/2021"
output: html_document
---
<style type="text/css">
.main-container {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
</style>
```{r, message=FALSE, warning=FALSE}
library(DT)
datatable(iris)
```
Which renders in the web browser all the way to the left.
If you know more CSS than me, then you can control your document with Divs and CSS selectors to get a even more specific layout
I am using the rmdformats::material package. What is the CSS to change the top banner color?
Here is my code.
---
title: "test"
date: "hi"
output:
rmdformats::material:
self_contained: no
css: style.css
---
```{r knitr_init, echo=FALSE, cache=FALSE}
library(knitr)
library(rmdformats)
```
# test
Here is part of my CSS:
.page h1, .h1 {
color: #971b72 ;
}
The banner color seems to be set as the background of the .header-panel div. You should set your CSS to
.header-panel {
background-color: #971b72 ;
}
You can control the background color of the header in your .css file with the following code:
.header-panel {
background-color: #971b72;
}
I am using the xaringan library from Yihui in R to create a custom template for a presentation.
Part of this is creating custom body slides as pictured below.
I then use custom CSS for the headers and body:
.body-yellow > h2 {
font-size: 42px;
text-transform: uppercase;
padding-left:
}
And then just type in rmarkdown something like:
---
class: body-yellow
# Hello
## world
Hello world
This then populates the slide.
My question is, is there a way to create a placeholder for the image shown in the template above that I could adjust in the rmarkdown code itself?
I am imagining code like:
---
class: body-yellow
background-images: url(./img/my_new_custom_image.png)
# Hello
## world
Hello world
And the relevant adjustment in CSS:
.body-yellow > image {
background-images: PLACEHOLDER
position:right
}
Which will change the image as follows:
Excuse my CSS ignorance, but I am only starting to dabble in this area.
You can set a global background image for the body-yellow class, and override it with the background-image attribute on a particular slide. Here is a minimal example:
---
title: "Test"
output:
xaringan::moon_reader:
nature:
ratio: "16:9"
---
class: body-yellow
```{css, echo=FALSE}
.body-yellow > h2 {
font-size: 42px;
text-transform: uppercase;
padding-left: 50px;
}
.body-yellow {
background-image: url(https://i.stack.imgur.com/OSrg8t.png);
background-size: contain;
}
```
## Default background
---
class: body-yellow
background-image: url(https://i.stack.imgur.com/X1C2Bt.png)
## A custom background
Is it possible to add an image to the title page of ioslides presentation?
I would like to add a big logo after the instead of xyz.
---
title: "Empowering Data-Driven Decisions at <br> xyz"
author: Omayma Said
date: Jan 11, 2017
output: ioslides_presentation
---
Yes. There is a standard option to include a small logo included in the ioslides bookdown documentation as well as some code to make a custom size image using css. This css can go in a separate document or it can at the start of your document after the YAML header which is typically easier when you only have a few lines to add.
Here is an example of putting the css in the document using code snippets from the bookdown documentation.
---
output:
ioslides_presentation:
logo: logo.png
---
<script>
.gdbar img {
width: 300px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 400px !important;
height: 170px !important;
}
slides > slide:not(.nobackground):before {
width: 150px;
height: 75px;
background-size: 150px 75px;
}
</script>
# Transition slide
## First slide
Yes, it is possible with the help of css.
First step is to add the css in the output of the markdown:
---
title: "Your <br> Title"
author: "Author Name"
date: "<div class = 'slide-date'>`r format(Sys.Date(),format='%B %Y')` <div>"
output:
ioslides_presentation:
css: styles.css
---
The next step is to add the image in your styles.css file
slides>slide.title-slide {
background-image: url('title_image.png');
background-size: 100% 100%;
}
Happy Coding!