I made a markdown in html, using kable on a dataframe. I set a background color, it works on the browser, but when i want to print paper, the color disappear... I would like to do a layout too (page break, jump line), i searched, i saw some code, i tested, but nothing works...
The code for color :
kable(tableEvo,"html",
booktabs=T,
caption=paste("Fonds et Benchmarks respectifs au",format(ajd,"%d-%m-%Y"),sep(" "))%>%
kable_styling("basic","condensed")%>%
row_spec(c(2,4,6,8,10,12,14,16,18,20,22,24,26),background="#33FFFF")%>%
column_spec(1:5,bold=TRUE)
This is actually bootstrap's fault. It will take away all your background color when print.
See Bootstrap print CSS removes background color
I will try to open up the webpage in Safari and check "print background" on the printing page.
The simple solution is to put !important behind the color name in the code.
For instance if the background color chosen is red, write:
background = "red !important"
This worked for me.
Thanks to Hao, for clarifying this for me over e-mail.
Related
I'm using R Studio's Cobalt theme, and I have found one case where in-line output in Rmd files is invisible (i.e. font is white on a white background). I would like to edit that font colour to anything visible.
Reproducible example below:
First set Editor Theme to Cobalt:
Then, a simple example of using str_view() from Hadley's R4DS, in an Rmd file:
x <- c("apple", "banana", "pear")
stringr::str_view(x, "an")
The output will render to visible HTML no problem, and the Viewer window also shows visible output:
But when if you run it as an in-line chunk (i.e. how a lot of my debugging takes place), we get some of the output as a white font on white background:
How can I edit that font colour for that particular output, so that it is visible?
I have already tried editing Cobalt here:
https://tmtheme-editor.herokuapp.com/#!/editor/theme/Cobalt
Following the advice from here:
https://towardsdatascience.com/customize-your-rstudio-theme-914cca8b04b1
Maybe it's late but i've a solution with same problem.You need to change foreground color of your preferred theme(or change html background)
Here is you can edit your preferred theme : https://tmtheme-editor.herokuapp.com
As you wrote upward,in most of dark themes foregrounds are whitish . Where you can edit in general tab .You should choose a bit darker foreground (for ex:#BEC0C2).
or
i couldn't find how to change html background in Cobalt theme but some other (ex: Material) theme allow us to change colors of popup Css
Sorry for my photo edits :D
Hopefully it will work ...
For anyone looking at this question, I've tried a lot of things, and honestly the easiest answer was to move the output of chunks out of the inline document, and move it to the console. Everything works after that:
On TinyMCE the formats previews consider the CSS class definition. But it's annoying in some cases, for instance, when the font-color is white. So I like to replace it to a custom color only on preview (or just disable it function), but keeping white color on real text.
How it works now:
How I like it to works:
I want to change the font color of the code output of knitr to black for the whole output. The standard output has a grey background and different colors are used in the output for different types of expressions like functions, objects, etc.
My goal is to have a white background and the code should be all black. I already solved the background color problem with the chunk option background='#FFFFFF', but I couldn't find a solution for the font color of the code...
Who can help me?
Thank you very much in advance for your valuabe help!!
Sincerely yours,
broesel
If you are talking about Rnw/LaTeX documents, you can turn off syntax highlighting using the chunk option highlight=FALSE. See documentation.
Google Chrome always seems to be changing the color of an image that I'm trying to match to a background color. I tried saving it in Photoshop and GIMP and even adjusted the color settings in each but it doesn't help in Chrome. FF and IE work fine (for once).
The color of my image is #282828. After I saved it as a PNG, I reopened it in both GIMP and Photoshop and used the eyedropper tool to confirm that the color was still #282828. When it renders in Chrome it's darker. I have a div with a background color of #282828, and the image is right next to it. I took a screen shot and the div's background color was #282828 and the images background color was #1d1d1d. I tried this for several different colors and each has had the same result. I even tried making the source image the color Chrome was rendering it as but Chrome still changes it. So for example, since Chrome was changing #282828 to #1d1d1d, I made the source image #1d1d1d, and when I rendered it in Chrome it was not #1d1d1d, but some other darker color.
At this point, I'm looking for either a fix or a programmatic work-around. Because the image is transparent, has curves, and a drop-shadow, there's really no way for me to avoid replacing the it, or even parts of it, with html.
Update:
I also tried saving it as a jpg and gif. gif actually works but can't preserve the drop shadow. The image I'm using is attached. If I take a screenshot of this in Chrome, GIMP's eyedropper tool says it's #1d1d1d. If I open the original and do the same, it's #282828.
PNG uses gamma correction to try to ensure that the image looks kinda the same across all monitors, and this can cause color mismatches like the one you're seeing. It's a combination of image editor issues and browser issues: image editors are not forced to embed gamma data inside images, and browsers are free to ignore the gamma correction if it's there and free to enforce some at random when it's not there. In this case, I'd rather think that Firefox ignores it.
Use a transparent PNG if you don't want its background to interfere with your page's background.
[EDIT] For your specific case, you may be able to replicate the graphics you're looking for by styling elements, using border-radius and box-shadow, two widely-implemented CSS3 properties that reasonably decay on older browsers.
I have a div with the property:
background-color: #327EB2;
When I open the page on a browser I notice that a different color is shown. If I capture the screen and open the captured image on Photoshop, I can see that the color code captured is actually #437BB6. I have nothing set with that color in my CSS stylesheet.
I've tested on different monitors, different color resolutions, different browsers and versions from FF 4+ to IE8+, Opera, Chrome, Safari, etc...
Actually I don't think that's a problem of the monitor, resolution or browser version, because the problem is that the code of the shown color is actually a totally different one!
Also, Photoshop warns me about #327EB2 which is not a "Web Safe color", but I don't think this is the problem because I often use non-websafe colors in my sheets and I've never had an issue like that.
** Fiddle: http://jsfiddle.net/286tE/
*UPDATE
The problem is that the div has a background image and a background-color. The background color has to match the last pixel's color of the background image (as usual), which is #327EB2.
Anyway, I can see a different color from the last pixel of the image to the background-color:
http://test.testblueday.eu/test/cbsissue.png
You can see the page here, the problem is shown after the "Top Marchi" list on the left side:
http://test.testblueday.eu/test/cbstest.html
I've left the plain CSS and JS (not compressed) to let you see all the properties.
** UPDATE 2
I use Mac, but we can see the problem also on Windows.
You problem has nothing to do with the CSS, the problem is in the image!
This is because the examples supplied by you show the correct #327EB2 at the extra background (the one "coloured" via CSS), and that is enough to know that the CSS part is ok.
Beware of colour corrections/management done in the file exported via Photoshop.
If you can't colour manage/revert to the desired colour, another solution is doing the opposite, change the CSS colour to match the last row of the image.
As far as I can see, everything works correctly. Your image at the bottom has color with code '#1080b3' - I just downloaded that picture (gradient_box_emboss.jpg) and took a color with colorpicker in GIMP. When I modify css like this:
.embosser {
background: #1080B3 url('/images/gradient_box_emboss.jpg') right top no-repeat;
color: white;
padding: 5px 6px;
}
Difference is missing. When I printscreen your site and paste it into GIMP, color picker shows color of that "wrong" background is #327eb2. When I open your image you have in your question, color of background is #307db7. It is in jpg and I suppose some color information were lost while compressing raw data to .jpg. Possibly, something similar happens when you are trying to get color in photoshop.
Possibly problem rise when you convert images from one format to another. Simplest fix is above - change color of background to one you have on your image.