For the reproducible example, I am using the default Ioslides presentation that comes with R studio. File>New File>R markdown>ioslides presentation. The data is the mtcars data set that comes with installing R Studio. Looking at slide 2 (R Markdown), I want the margin to be about half of what it is. However, not finding success. Any thoughts on how this can be done?
My YAML is as such
title: "margin example"
author: "Tim"
date: "2/2/2021"
output:
ioslides_presentation:
css: styles.css
Next is the CSS that I am using
h2{
font-family:'Arial';
font-size:22px !important;
padding-bottom:1px;
margin:1px;
margin-bottom:1px;
}
p {
font-size: 18px;
margin:1px;
margin-bottom:0px;
margin-top:0px;
}
Add a new class to your CSS
.reduceTopMarginText p:first-of-type {
margin-top: -25px
}
and assign it to your slide
## Titel {.reduceTopMarginText}
Text closer to your title.
If the first element on your slide is not text but code, then replace p with pre in the CSS.
Related
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'm trying to create custom blocks for use in my book, written in bookdown. Unfortunately clicking Build Book in RStudio produces no output for the block. That is, the block does not appear in the output HTML but everything else in the book does.
I don't really know anything about CSS so decided to copy code from the bookdown book as a starting point. All the files below are located in the root folder of my book.
My style.css file looks like this:
.rmdcaution, .rmdimportant, .rmdnote, .rmdtip, .rmdwarning {
padding: 1em 1em 1em 4em;
margin-bottom: 10px;
background: #f5f5f5 5px center/3em no-repeat;
}
.boo {
padding: 1em 1em 1em 4em;
margin-bottom: 10px;
background: #f5f5f5;
position:relative;
}
div.boo:before {
content: "\f518";
font-family: FontAwesome;
left:10px;
position:absolute;
top:0px;
font-size: 45px;
}
p.caption {
color: #777;
margin-top: 10px;
}
p code {
white-space: inherit;
}
pre {
word-break: normal;
word-wrap: normal;
}
pre code {
white-space: inherit;
}
The first style block was copied from the bookdown book and the second was based on the SO example here.
Next, my _output.yml file looks like this:
bookdown::gitbook:
css: [style.css, fontawesome.min.css]
config:
toc:
before: |
<li>Surviving Statistics</li>
after: |
<li>Published with bookdown</li>
edit: https://github.com/rstudio/bookdown-demo/edit/master/%s
download: ["pdf", "epub"]
Finally, I call the blocks in my rmd file thus:
```{block, type='boo'}
Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block.
```
```{block2, type='rmdnote'}
If you are planning on printing your book to PDF, you will need a LaTeX distribution. We recommend that you install TinyTeX (which includes XeLaTeX): <https://yihui.name/tinytex/>.
```
As you can see, the first is a copy of the SO example above and the second is a copy of the bookdown book itself.
Any help much appreciated!
With R blogdown package, it is easy to build a personal website. I like the style of the yihui/hugo-xmin theme for its simplicity. I built a site with the R blogdown package in my folder 'c:/test' on the Windows OS:
install.packages('blogdown')
setwd('c:/test')
blogdown::new_site(theme='yihui/hugo-xmin')
and I wrote the following text into a .md file in c:/test/content/post/ folder:
---
title: "Summer Holiday in Southern France (VIII): Return to Nice (Videos) 带着俩娃游南法 (第十天): 重返尼斯 (视频)"
author: dapeng
date: "2017-08-17 15:22:06"
slug: summer-holiday-in-southern-france-viii-return-to-nice-videos
categories: [cn]
tags:
- cn
---
my text.
Then I previewed the site:
blogdown::serve_site()
However, the post title looks like this:
I was wondering how to change the line height in the title, which is too small by default. I added a line-heightcommand in /themes/hugo-xmin/static/css/style.css like this:
.menu, .article-meta, footer { text-align: center; }
.title { font-size: 1.1em; }
footer a { text-decoration: none; }
hr {
border-style: dashed;
line-height: 5em;
color: #ddd;
}
But it did not work.
Thanks for help!
The title is not in the <hr> tag but <h1>. Add something like this to your CSS should increase the line-height:
h1 { line-height: 1.2em; }
I recommend you to learn to use the Developer Tools of your web browser.
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!
I recently opened a standard Rmd file without editing anything. The default file looks like this:
Untitled.rmd
---
title: "myfile"
author: "Me"
date: "May 25, 2015"
output: html_document
fontsize: 12pt
---
This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:
```{r}
summary(cars)
```
You can also embed plots, for example:
```{r, echo=FALSE}
plot(cars)
```
Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.
I wanted to create an html file corresponding to the above file so in a separate R script I did the following:
knit('Untitled.Rmd', 'doc.md')
markdownToHTML('doc.md', 'testing.html',header = TRUE)
For some reason the font size doesn't work and the header information that I was hoping for doesn't appear in my testing.html. Anyone know why this is happening?
This is what I used to control font size and color in an R-markdown file. It basically overrides the CSS style sheets without having to create a new file. The example changes the sizes of the headers and titles, as well as the inline text and the R-code text, and sets some colors as well.
In my case I needed to pack more information into a document that had a specified number of pages so I made everything smaller.
---
title: "This is a title"
date: 25 May 2015
output:
html_document:
theme: cerulean
---
<style type="text/css">
body{ /* Normal */
font-size: 12px;
}
td { /* Table */
font-size: 8px;
}
h1.title {
font-size: 38px;
color: DarkRed;
}
h1 { /* Header 1 */
font-size: 28px;
color: DarkBlue;
}
h2 { /* Header 2 */
font-size: 22px;
color: DarkBlue;
}
h3 { /* Header 3 */
font-size: 18px;
font-family: "Times New Roman", Times, serif;
color: DarkBlue;
}
code.r{ /* Code block */
font-size: 12px;
}
pre { /* Code block - determines code spacing between lines */
font-size: 14px;
}
</style>
# H1 Header
Some body text
## H2 Header
More body text
### H3 Header
blah blah blah
```{r echo=T}
n <- 100
df <- data.frame(x=rnorm(n),y=rnorm(n))
```
### Another H3
Update:
Added more more styles, comments, and a bit of color to make this answer more useful. And a screen shot: