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.
Related
Is it possible to change the bullet colors in Xaringan presentation? The text should have a different color.
I have not find any option in xaringanthemer package neither going through the css file. I could not find any information remark.js documentation.
You can change the bullet point colour by adding a custom CSS to the YAML header of your Xaringan presentation.
Following is a fully reproducible minimal example.
Markdown file
title: "Example"
author: "Author"
date: "`r Sys.Date()`"
output:
xaringan::moon_reader:
css:
- default
- default-fonts
- custom.css
lib_dir: libs
nature:
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
---
```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```
## Change bullet point colour
* An item
* Another item
Custom custom.css
We have taken the relevant CSS code to theme the bullet points from here.
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: red; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
Output
xaringan output is html so you can change any parts by css (e.g. using this guide to change bullet color to a red dot. Taking this as a template, you can add this chunk soon after the YAML of the Rmd to change it to a red bullet:
```{css, echo=F}
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: red; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
```
Separate style from content
Or more preferably (since it separates out the style component from slide content), create a css file, say style.css which contains:
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: red; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
then add in the YAML, making sure that style.css is in the same path as your Rmd,
css: [xaringan-themer.css, style.css]
Tweaking the bullet shape
You can change the shape the bullet using a different unicode supplied in content (e.g. use \2023 for a triangle bullet - see other common types here).
Changing the bullet color
You just need to replace red with the color of your choice. You can replace it with the hex color code instead too.
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
I want to change the logo and main menu in the header on this page only:
https://www.maisondefemmes.com/galentines-day/
I've tried updating the css and only managed to edit the search and cart colours.
I've tried using both content and background-image, as well as using logoimg bg--dark rather than #logo but to no avail.
.page-id-3055 #logo {
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
}
I want the logo and main menu to be #b50c3f but they don't budge. I've managed to change Search and Cart.
The Logo is a html img tag and you can't change it that way. The content attribute only works for pseudo elements. One solution would be the following:
.page-id-3055 .logolink > img {
display: none;
}
.page-id-3055 .logolink:before {
display: inline-bloc;
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
width: 100%;
height: 50px;
}
You can detect url with jquery and then change logo and menu by jquery css
if (window.location.href.indexOf("galentines-day") > -1) {
// do something
}
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!
As a slidifiy newbee, I don't understand why the first slide has a pale green background and all the other slides have white backgrounds.
The example "Test for Slidify" at http://www.rpubs.com/ also shows this pale green first slide.
How can I control the background color of this first slidify slide?
The css defining the title slide is contained in libraries/frameworks/io2012/slidify.css. Here is the part that controls the title slide. You can modify it and add it to your Rmd file directly to override default styles.
.title-slide {
background-color: #CBE7A5; /* #EDE0CF; ; #CA9F9D*/
}
.title-slide hgroup > h1{
font-family: 'Oswald', 'Helvetica', sanserif;
}
.title-slide hgroup > h1,
.title-slide hgroup > h2 {
color: #535E43 ; /* ; #EF5150*/
}
To do this from within an .Rmd file, one would add the following after the YAML front matter section of index.Rmd. This applies a white background to the title slide:
---
title : title slide bg change example
author : Ramnath
...
mode : selfcontained # {standalone, draft}
knit : slidify::knito2slides
---
<style>
.title-slide {
background-color: #FFFFFF; /* #EDE0CF; ; #CA9F9D*/
}
</style>
Remember to re-run slidify("index.Rmd") to apply the change.