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.
Related
I am trying to create a printable document using CSS in my angular project.
For my print document that runs into multiple pages I need automatically to avoid printing the date and title in the header. At the same time I want to make sure that the document is printed with some margins. To achieve this I am using the approach suggested in this answer on SO. However I am not able to get the styling to apply.
My CSS Code looks like this
#media print {
#page {
size: auto;
margin: 0;
}
body {
margin: 2cm !important;
}
}
I have tried pasting this code in both the app.component.scss file as well as the styles.scss file. Both approaches don't seem to work. Any suggestions?
You need to put the following css in your styles.css file
#media print {
#page {
size: auto;
margin: 0mm; // added mm
}
body {
margin: 2cm;
}
}
And if you need component specific styling, you can add that to your component's css file as well:
#media print {
section {
color: orange;
}
}
Here is a Stackblitz example.
You can also try to print this page (https://angular-j4ab2g.stackblitz.io), and you will see that the date from the header is gone, and my custom section has orange text.
EDIT
I think the best option to remove the footer and header is to un-check the box in the print settings
Then you do not need to add the 0mm margin to the #page selector and the 2cm margin on the body selector.
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;
}
This is the markdown code effect of stackoverflow:
Code from stackoverflow
Nearly no extra space at the beginning
And this is the markdown code effect of gitbook:
The extra blanks at the beginning is confusing for me. So I decided to change it by myself.
I did:
cd /usr/local/lib/node_modules/gitbook/theme/stylesheets/base
vim markdown.less
In which there is a code block which looks like:
code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: #f7f7f7;
border-radius: 3px;
}
I changed the font-size to 385% and border-radius to 0px. I used git serve . to restart my gitbook server, but the code effect didn't change.
I got these files which havs code keyword in the theme directory, which should I modify?
.//assets/app.js
.//assets/fonts/fontawesome/fontawesome-webfont.svg
.//assets/fonts/fontawesome/fontawesome-webfont.ttf
.//assets/fonts/fontawesome/FontAwesome.otf
.//assets/print.css
.//assets/style.css
.//javascript/utils/sharing.js
.//stylesheets/base/markdown.less
.//stylesheets/base/normalize.less
.//stylesheets/website/highlight/night.less
.//stylesheets/website/highlight/white.less
.//stylesheets/website/markdown.less
.//templates/book/includes/exercise.html
.//templates/ebook/includes/exercise.html
What else should I do?
This should be a comment, but you can't fiddle in comments.
As you can see below, the style information you've given doesn't include the styles you want to change, you've left out some important information from somewhere.
The code you've included is shown on the left, the problem you've described is on the right.
code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: #f7f7f7;
border-radius: 3px;
}
.described {
padding: 20px;
}
<code>fprintf(...);</code>
<code class="described">fprintf(...);</code>
To over-ride the Gitbook default styles, create a file called 'styles/website.css` in the root of your gitbook project.
Edit the book.json file and add the following to define the source of your own custom styles
{
"styles": {
"website": "styles/website.css",
"ebook": "styles/ebook.css",
"pdf": "styles/pdf.css",
"mobi": "styles/mobi.css",
"epub": "styles/epub.css"
}
}
Anything in this file will over-ride the Gitbook styles (if you get the names right).
Then find out the names of the html elements you wish to apply or change styles to using your browser inspector. Open your Gitbook project in a browser and right click on a code block, this brings up a menu with Inspect or Inspect Element.
You will need to restart gitbook serve when changing styles as it only reads the styles/website.css file on startup.
The styles I defined to over-ride the Gitbook ones can be seen in this Github Gist
https://gist.github.com/jr0cket/9cc41eb9dd0b6c6d091831be43fa3e42
The results of these can styles can be seen at:
https://practicalli.github.io/clojure/basic-clojure/
Thank you
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.
I added a Google Translator widget to a site (using the code provided here: http://translate.google.com/translate_tools) and have the following issue:
It automatically adds a style attribute to the html tag whose value includes:
height: 100%
This is "breaking" the page layout. For example, CSS backround images that were positioned to "bottom" are now (incorrectly) positioned at the bottom of the view port.
Is there any way to prevent or fix this?
This resolves the issue:
/* Google Translate Overrides */
html, body{
min-height: 0!important;
height: auto!important;
position: inherit!important;
}
I was able to solve this by setting the body min-height attribute in css as !important to prevent override.
body {
min-height: 0 !important;
}
UPDATE - Unfortunately, this no longer works. The Google Translation script will strip out any attempts you make to counter it's min-height style. I have both the above CSS in my stylesheet AND an inline style on the body tag.
The Google Translation script is pretty aggressive and I'm not seeing any way to disable this.
This should work:
html {
height: auto !important;
}
body {
position: initial !important;
min-height: initial !important;
top: auto !important;
}
maybe it's like
body{ height: auto !important; }
do not write css in head part, write in a css file. this will preventing automatic translation by google.
I tried using the solutions provided by the other answers, but they didn't work for me. If anyone else is having this issue, I did have success with this solution.
body { position:static !important; min-height:100%; top:0; }
I found a way to solve this issue, it's not bulletproof I guess but works for now:
Plugin: http://darcyclarke.me/dev/watch/
with this code :)
$(window).load(function(){
$('body').watch('min-height', function(){
var style = parseInt($('body').css('min-height'));
if(style > 0){
$('body').css({
'min-height' : '0',
'position' : 'static',
'top' : 'none'
});
}
});
});
The only way I can see to combat this is to put a timeout of 500ms on code to reset the body min-height property. If you're not to bothered about your page jumping around a little for half a second on load, it works. Using jquery, it would look something like this:
$(function(){
var myMinHeight = 950;
setTimeout(function(){$('body').css('min-height',myMinHeight)},500);
});
Set the value of myMinHeight to whatever you wish it to be.