I found instructions to add a logo to the top of my Table of Contents (TOC).
https://rstudio4edu.github.io/rstudio4edu-book/book-fancy.html
However, the edits I made are not reflected in the bookdown website.
I have made edits to
_output.yml
bookdown::gitbook:
css: style.css
config:
toc:
before: |
<li class="toc-logo"><img src="docs/images/logos/logo-transparent.png"></li>
after: |
<li>Published with bookdown</li>
edit: https://github.com/rstudio/bookdown-demo/edit/master/%s
download: ["pdf", "epub"]
bookdown::pdf_book:
includes:
in_header: preamble.tex
latex_engine: xelatex
citation_package: natbib
keep_tex: yes
bookdown::epub_book: default
bookdown::bs4_book: default
and the style.css
/*--- LOGO ---*/
.toc-logo {
width: 200px !important;
object-fit: contain;
margin: 0 auto;
}
.toc-logo img {
max-width: 100%;
margin-bottom: 10px;
}
.summary > li:first-child {
height: auto !important;
}
my index.Rmd file looks like this:
title: "Book"
author: "FH"
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
output: bookdown::gitbook
documentclass: book
bibliography: [book.bib, packages.bib]
biblio-style: apalike
link-citations: yes
cover-image: images/logos/logo-transparent.png
github-repo: FH/book
description: "Guide book."
I am not sure why the when I Build Book, the logo change is not reflected. Also it seems that maybe the "tile: "Book" in index.Rmd overrides everything else?
What it looks like now:
So apparently the code above for adding a logo works but only if you are building a bookdown::gitbook
I had been building a bookdown::bs4_book for which it is not possible to add a logo this way. To add a logo I ended up creating an template.html file and adding it to the _output.xml
_output.yml
bookdown::bs4_book:
template: template.html
css: style.css
I found an example to follow by looking at: https://github.com/jeroenjanssens/data-science-at-the-command-line/tree/master/book/2e
Alternatively you can edit the original template.html of bs4_book
https://github.com/rstudio/bookdown/blob/main/inst/templates/bs4_book.html
Related
When I add a floating Table of Contents to my R-Markdown document, it always is on the left side of the page (with the content to the right), like so:
---
title: "some title"
author: "me"
date: "3/2/2020"
output:
html_document:
toc: TRUE
toc_float: TRUE
---
However, I'd like to move the floating TOC to the right side of the page. How can I accomplish this? The image below is what I'd like:
Insert the CSS chunk below (after YAML) and try increasing/decreasing the values of px (right and margin-left) for fine-tuning:
---
title: "some title"
author: "me"
date: "3/2/2020"
output:
html_document:
toc: TRUE
toc_float: TRUE
---
```{css toc-content, echo = FALSE}
#TOC {
right: 270px;
margin: 20px 0px 25px 0px;
}
.main-container {
margin-left: 200px;
}
```
The R Hmisc package hidingTOC function does this, allows for changing some of the characteristics of the display, and provides buttons labeled 1 2 3 that the reader can click to show the table of contents to level 1, level 1-2, level 1-3. No special yaml is needed; just have require(Hmisc) in your setup chunk and have the inline text sometime after that chunk: r hidingTOC(buttonLabel="Outline") or just use the default. You can also just say r Hmisc::hidingTOC() as the inline R code. Don't need to put these commands in a chunk; they render HTML which is automatically included in the document.
I am currently working with Vuejs and routing to other pages. For my link to photos, I would like a main cover photo that covers the entire screen.
<template>
<div id="album-container">
<div class="cover-image"></div>
<section class='intro'>Lorem </section>
<div class="image-flex-wrap">
<div class="image-cell" v-for="image in images">
<img :src="image">
</div>
</div>
</div>
</template>
.cover-image {
background: url('my photo') #fff no-repeat center center;
background-size: cover;
height: 100vh;
}
This displays the page the way I want it, but the problem arises when I am routed to this page from a page where I have previously scrolled down. Instead of starting at the top of the page, it begins around the middle of my cover-image div. I believe the problem has something to do with the height: 100vh because if I replace it with position: absolute and a width of 100%, then the page will start at the top. However, I would like to refrain from using absolute positioning but don't know enough css to understand why this is occurring.
Thanks for the suggestions.
The issue turned out to be unrelated to Vuejs. I had failed to mention I was using Material Design Lite since I didn't expect it to be the cause but unfortunately it was. Due to the way it works, you no longer scroll on the window object by rather the .mdl-layout__content class supplied by MDL. This was why all scroll properties relating to window was returning 0.
I simply set up a watch method on my routes to force scrollTop.
watch: {
$route() {
document.getElementsByClassName('mdl-layout').scrollTop = 0;
}
}
It can probably be related to scrollBehaviour of your vue-router config as well, try to add following scrollBehaviour in the config:
export default new Router({
mode: 'history',
scrollBehavior: (to, from, savedPosition) => {
if (to.hash) {
return {selector: to.hash}
} else {
return {x: 0, y: 0}
}
},
routes: [
{ path: '/', component: landingView },
....
....
{ path: '/healthcheck', name: 'healthcheck', component: healthCheckView }
]
})
Since I am not familiar with css I was wondering if there is a simple way to "tell" my rmarkdown page to left align when rendering an HTML-page?
Something like this:
---
title: "My html-page"
output:
html_document:
body_placement: left
---
Maybe something like this:
---
title: "My html-page"
output: html_document
---
<style>
body {
position: absolute;
left: 0px;}
</style>
If you'd actually like some basic styles (i.e. not my theme:null suggestion), grab Skeleton and put normalize.css & skeleton.css in the same directory as your Rmd file. Then you can do:
---
title: "Title"
output:
html_document:
theme: null
css:
- normalize.css
- skeleton.css
keep_md: true
md_document:
variant: markdown_github
---
One
Two
```{r}
print("three")
```
which will result in:
You can add a third - my.css if you want to customize it a bit more.
I am looking to increase the overall width of my HTML Rmarkdown output.
When producing PDF documents from Rmarkdowns there is an option to set the margin in the YAML section of the Rmd (ex. geometry: margin=.5in).
I am looking for something similar for HTML docs. The following link is a good example of my issue: https://rstudio.github.io/DT/extensions.html
As you can see on that html webpage, there is a lot of white space to the left and right of the datatables. Is there a way to reduce this margin space and thus increase the width of the datatables?
Thanks
Put this at the top (but below the YAML) of your rmarkdown document:
<style type="text/css">
.main-container {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
</style>
Don't put it in a chunk but as plain text. It should set the max-width of the content area to 1800px.
As of rmarkdown 2.10, did get no results with the solutions proposed here or on the linked answer.
I could not get it to work with inline css in the .rmd file.
It did however work immediately when adding a doc.css file in the .rmd folder with just this entry:
div.main-container {
max-width: 1600px !important;
}
and adding it to the yaml header like this:
---
title: asd
author: abc
date: "`r format(Sys.time(), '%d %B, %Y')`"
output:
html_document:
toc: true
toc_float: true
toc_depth: 6
mathjax: null
css: doc.css
---
Something else inserts max-width into the html output, so you need to mark the width !important for it to work
<style type="text/css">
.main-container {
max-width: 100% !important;
margin: auto;
}
</style>
As explained here, you need to use this code:
datatable(..., options = list(autoWidth = TRUE,columnDefs = list(list(width = '200px', targets = c(1, 3)))))
Build a form Contact us by EMAIL me form I uploaded it to my server, and I want to change the CSS file the error location (when you click on the submit button, then all fields not filled properly marked an error - red) My question is simple: How do I can change the CSS file so that the error diaphragm on the left and not on the right? Thank you!
The form is in this link: http://lawb.co.il/HTMLPage.html
the CSS file is in this link: http://lawb.co.il/contact_us.css
You can see example for what I want here:
insted of this
Is is possible?
Add promptPosition:"topLeft" in contact.js:
EMF_jQuery("#emf-form").validationEngine({
validationEventTriggers:"blur",
scroll:true,
promptPosition: "topLeft"
});
And these lines in CSS:
.formError {
...
left: 360px !important;
...
}
.formError .formErrorContent {
...
width: 310px !important;
...
}
formError .formErrorArrow {
...
left: 70%;
...
}
It should work.
try this
align:left;
or
float:left;