Override Rmarkdown Theme in Order to Change HTML Page Width

Override rmarkdown theme in order to change html page width

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.

R knitr markown: Setting HTML page width

Add a css element to your document, e.g.

---
title: "test"

output:
  html_document:
    css: "test.css"
---

and then put your new css information in that file, e.g.

body {
  max-width: 1100px;
  margin: auto;
 padding: 1em;
 line-height: 20px ; 
}   

Adjust the output width of R Markdown HTML output

Add this at the start of your document:

```{r set-options, echo=FALSE, cache=FALSE}
options(width = SOME-REALLY-BIG-VALUE)
```

Obviously, replace SOME-REALLY-BIG-VALUE with a number. But do you really want to do all that horizontal scrolling?

Your output is probably being wrapped somewhere around 80 characters or so.

Changing the maximum width of R markdown documents

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

R Markdown - changing font size and font type in html output

I think fontsize: command in YAML only works for LaTeX / pdf. Apart, in standard latex classes (article, book, and report) only three font sizes are accepted (10pt, 11pt, and 12pt).

Regarding appearance (different font types and colors), you can specify a theme:. See Appearance and Style.

I guess, what you are looking for is your own css. Make a file called style.css, save it in the same folder as your .Rmd and include it in the YAML header:

---
output:
  html_document:
    css: style.css
---

In the css-file you define your font-type and size:

/* Whole document: */
body{
  font-family: Helvetica;
  font-size: 16pt;
}
/* Headers */
h1,h2,h3,h4,h5,h6{
  font-size: 24pt;
}

How to change the color/theme on rmdformats/readthedown?

rmdformats author here.

To change the default color for titles and other elements, you have to provide a custom CSS file which redefines the default CSS elements defining color.

If think the following CSS elements should be enough :

#main .nav-pills > li.active > a,
#main .nav-pills > li.active > a:hover,
#main .nav-pills > li.active > a:focus {
    background-color: #22983B;
}

#main .nav-pills > li > a:hover {
    background-color: #22983B;
}

h1, h2, h3, h4, h5, h6, legend {
    color: #22983B;
}

#nav-top span.glyphicon {
    color: #22983B;
}

#table-of-contents header {
    color: #22983B;
}

#table-of-contents h2 {
    background-color: #22983B;
}

#main a {
    background-image: linear-gradient(180deg,#d64a70,#d64a70);
    color: #c7254e;
}

a:hover {
    color: #3d1308;
}

a:visited {
    color: #3d1308;
}

Customize and add this to a custom.css file in your Rmd file directory, and add css: custom.css in your preamble.

Insert a logo in upper right corner of R markdown html document

You can use htmltools::img with a little inline CSS for positioning. src can take a path directly, but when images aren't just handled like plots, sometimes knitting fails to convert images to a URI properly, which in turn causes them to fail to render. Using self_contained: false in the YAML is a quick solution, but it's not much harder to use knitr::image_uri to manually convert the image:

---
title: "Title"
author: "Author"
output: html_document
---

```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")), 
               alt = 'logo', 
               style = 'position:absolute; top:0; right:0; padding:10px;')
```

---

# 1. Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

How can I align the html output of a Rmd file to the left

The reason you are seeing the "centered" behavior is because of CSS, specifically the rule:

div.main-container {
    max-width: 1200px;
}

Which is being imported by something in the kniting/generation process, not sure what.

But Rmd allows you to add your own CSS rules. So you can overwrite the problematic rule with this rule taking advantage of CSS's !important:

div.main-container {
  max-width: 100% !important;
}

In a file named "styles.css" located in the same directory as your Rmd file. Then reference the CSS file in your front-matter (YAML header):

title: "Example SO"                                                        
output:                                                                    
  html_document:                                                           
    toc: true                                                              
    number_sections: true                                                  
    code_folding: "hide"                                                   
    toc_float:                                                             
      collapse: false                                                      
      smooth_scroll: false
    css: styles.css 

You will get a result with the contents shifted all the way to the left edge of the browser.

This is one path to get to your request of "no wasted space", but there are lots of other routes if you really want left-justified but fixed width content.

If you want to "soak up the space between the TOC table and the content block you could add this to 'style.css'

.tocify {
  max-width: 100% !important;
}
.toc-content {
  padding-left: 10px !important;
}

---

Related Topics