When I create an R Markdown file and knit HTML, the following is present:
<style type="text/css">
.main-container {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
I would like to change the max-width attribute. How would I do that?
Thanks.
There's no way to change that number specifically, but you can override it. Create your own style.css file in the same directory as your document, and give it some content:
body .main-container {
max-width: 500px;
}
Then reference that CSS file in your YAML front matter:
---
...
output:
html_document:
css: style.css
---
If you are only making HTML output you can put
<style>
body .main-container {
max-width: 500px;
}
</style>
at the beginning of the .Rmd file I put mine after the front matter.
Related
I'm attempting to make a CV using R Markdown and the {pagedown} package.
Is it possible to only include the grey aside bar on the first page?
I've tried playing with the page identifiers as described here.
#page :first {
.aside{
width: var(--sidebar-width);
padding: 0.6in var(--sidebar-horizontal-padding);
font-size: 0.8rem;
float: right;
position: absolute;
right: 0;
}
}
My hope was that defining the .aside inside :first would make the grey aside bar only appear on page one, but no luck. Any suggestions?
A minimal example is here: https://github.com/wjakethompson/cv-test
with an new package updates, this previous answer wont work, you need to add this code chunk inside the rmd section:
```{css, echo=FALSE}
.pagedjs_page:not(:first-of-type) {
--sidebar-width: 0rem;
--sidebar-background-color: #ffffff;
--main-width: calc(var(--content-width) - var(--sidebar-width));
--decorator-horizontal-margin: 0.2in;
}
```
This question got solved here.
This can be achieved by adding the following to the css file:
.pagedjs_page:not(:first-of-type) {
--sidebar-width: 0rem;
--sidebar-background-color: #ffffff;
--main-width: calc(var(--content-width) - var(--sidebar-width));
--decorator-horizontal-margin: 0.2in;
}
I am using the flexdashboard Package with Rmarkdown and would like to modify the dimensions of headers, location of borders, colors, etc. that result in the webpage created by Rstudio. There are many CSS files associated with flex dashboard and Rmarkdown. Can someone please inform me what CSS files should be modified for this purpose, and where these files are located in the R or Rstudio directories?
By modifying a CSS theme (we chose to modify Lumen) in a flexdashboard subdirectory my colleague and I learned we could control the dimensions of certain elements in flexdashboard.
Specifically, we altered the CSS file in this directory:
C:\Program Files\R\R-3.4.2\library\flexdashboard\rmarkdown\templates\flex_dashboard\resources
See the annotated CSS file (again, for the Lumen theme) below for how we changed the dimensions of the border boxes. The edits shown were placed at the end of the existing lumen.css file.
/* Jeff's Edits */
.storyboard-nav {
box-sizing: border-box;
width: 100% !important; /* This prevents JS transformation on width */
height: auto; /* This overrides the height */
}
.storyboard-nav .sbnext, .storyboard-nav .sbprev {
height: auto; /* This overrides the height */
font-size: 3rem;
}
.storyboard-nav .sbframelist {
height: auto; /* This overrides the height */
}
.storyboard-nav .sbframelist ul {
box-sizing: border-box;
width: 100% !important; /* This prevents JS transformation on width */
height: auto; /* This overrides the height */
}
.storyboard-nav .sbframelist ul li {
height: auto; /* This overrides the height */
width: auto; /* This overrides the width */
}
You can always modify the defaults by adding your own CSS file, instructions here. This way you don't have to modify the default specifications (in case you ever want to use them).
If you want to check the default specifications for each theme, you can find them in the flexdashboard github repo.
At the risk of getting a couple of down votes, I have to ask this after spending a few hours this afternoon trying to unravel the css of the bookdown html document that I am working on. For the life of me I just cannot figure out the selectors to use to increase the max-width of the main text area of the bookdown document. I am working with some content that would really benefit from using more of my large monitors.
My latest attempt to get the specificity that I need is a custom css file that contains:
.book .book-body.fixed .body-inner .page-wrapper .page-inner .normal .section .level1 .unnumbered {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
I have tried numerous combinations of selectors and I just can't get that max-width to budge from the 800px default.
For testing purposes, here is an example bookdown document.
Try this:
.book .book-body .page-wrapper .page-inner {
max-width: 1200px !important;
}
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'm trying to widen the output of rmarkdown to html. I've been trying this solution with no success (although I'm using the cerulean theme, that should be responsive according to comments). Also tried adding a css element as described here - no effect.
How can I make this work?
Create a file styles.css with your styles:
<style>
.main-container {
width: 100%;
max-width: unset;
}
</style>
And include it in your rmarkdown as described here:
---
output:
html_document:
css: styles.css
---
Both options work for me.
The answer above didn't work so I spent a bunch of time sorting this out. It seems you can no longer just dump raw CSS into the rmarkdown document and have it be properly included.
This solution worked for me. Note that I had to modify the max width of both the body and the main container, this is placed as a block right after the yaml header.
```{css, echo=FALSE}
body .main-container {
max-width: 1280px !important;
width: 1280px !important;
}
body {
max-width: 1280px !important;
}
```
Here's the reference for how to properly integrate css: https://bookdown.org/yihui/rmarkdown/language-engines.html#javascript-and-css
I can't find any references for the the various properties that need to be modified, I figured everything out from the Chrome developer console.