Chrome "Save to PDF" margins background-color? - css

When printing to PDF in Google Chrome ("Save to PDF" virtual printer), there's an option to set margins for every page in inches // cm. However, by default they are always white. Is there a way to change color to blue, or use background-image?
What I've tried:
Ensured all background graphics are printed:
#media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Tried to set bg-color for #page attribute:
#page {
size: 7in 10in;
margin: 1in;
}
Tried to set bg color for every element on page: html, body, #content .
This article shows an example, how to affect margins areas with footnotes:
#page:right{
#bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "My book";
font-size: 9pt;
color: #333;
}
}
But it doesn't work for me.
Also I've tried to inspect chrome build-in PDF previewer and found a string:
<embed id="plugin" type="application/x-google-chrome-pdf" src="chrome://print/190/0/print.pdf" stream-url="chrome://print/190/0/print.pdf" headers="" background-color="0xFF525659" top-toolbar-height="0" top-level-url="undefined">
However, it's a bit tricky to modify background-color though it's already loaded and rendered. And I'm not sure, if it affects resulted PDF or just preview:
Any other options? This feature is rather critical for me, so I'm ready for memory hotpatching or even rebuilding Chromium from source if needed at least.
Target platform: Win 10 x64

There exist no direct way, but you can fake it:
Goto Format > Page.
Set the margin to 0cm. Ignore printer warning.
Set the background to your favorite color in tab Area.
Goto tab Borders and define a border in the same color. On that tab use the setting "Spacing to Contents" to fake the margins.

Related

CSS content hexadecimal value getting trimmed when compiled

I have a series of icons whose content is set from Kendo UI React, app is CRA. I'm trying to change the first icon by changing its content, as recommended.
th.k-header[role=columnheader]:nth-child(1) .k-i-more-vertical:before {
color: #ff0 !important;
content: "\e030" !important;
}
However, when I inspect the element in a local environment, the unicode escape sequence has changed and is missing the initial backslash. It only shows up as a hexadecimal. (Formatted text and image):
.jITeNU th.k-header[role=columnheader]:nth-child(1) .k-i-more-vertical:before {
color: #ff0 !important;
content: "e030" !important;
}
Chrome DevTools
When the content value is edited directly in dev tools (content: "\e030" !important), the icon appears correctly.
Has anyone encountered this behavior before? I'm at a loss as to what is happening, since nothing else in the styles for that element has changed.

Changing the margins of a PDF document in RMarkdown

The default resume template from the pagedown package is visually not very appealing. There are quite white spaces along the borders, the sidebar is too thick, and the font is not appropriate. I guess I should be knowledgeable in CSS to make changes to manipulate the changes. This is what I have tried so far:
# Manipulating the margins
p * {
/* Override default margins*/
--pagedjs-margin-right: 0.2in;
--pagedjs-margin-left: 0.2in;
--pagedjs-margin-top: 0.2in;
--pagedjs-margin-bottom: 0.2in;
}
# Manipulating the sidebar
:root{
--sidebar-width: 10rem; /* side bar width */
--sidebar-background-color: #e2a2a2;
--decorator-border: 2px solid #a2e2e2; /* change color and thickness of timeline */
}
# Manipulate the font
/* Define the font family here */
body{
font-family: "Roboto", sans-serif;
I have inserted this code chunk after defining YAML. When I play around with the second and third options and knit the file, they work as intended. However, no matter what number I use to change the margins, it remains the same. What should I do?

script package command line output is small in Atom

I installed the script package in Atom to run python scripts. The output is a lot smaller than the editor text, and also I cannot resize the console height. It always takes up the minimum height required, so it changes based on output length which is annoying...
This does not match the "video" on the script home page: https://atom.io/packages/script. How do I get the font size to match the editor font size, and also set a fixed height for the console output?
Atom: 1.27.2 x64,
Script 3.18.1,
Windows: 7 x64 DPI 120%
With regard to small font size, I found a solution here:
https://github.com/rgbkrk/atom-script/issues/1191
That is to locate the script package script.less file and add a font-size property to it under .script-view .line
.script-view {
.panel-body pre {
background: #tool-panel-background-color;
color: #text-color;
}
.output {
}
.stderr {
color: #text-color-error;
}
.line {
border-radius: 0px;
margin: 0px;
padding: 0px;
**font-size: 14px;**
}
}
With regard to not being able to resize the output pane, this issue is also reported here:
https://github.com/rgbkrk/atom-script/issues/1125 and
https://github.com/rgbkrk/atom-script/issues/1637.
It sounds like it may relate to Atom itself and not the script package.

SquareSpace: Change section background color (Eamon / Ethan template)

Example template:
https://eamon-demo.squarespace.com/#overview-eamon
Is there any possible way to change the background color of a single white section with text in the Ethan / Eamon theme? I've had no luck with
<style>
.body {
background-color: lightblue;
}
</style>
in the Advanced section of the page editor. I am looking to change only one of the section's background colors, I do not want to change them all. Thanks.
Solution!
I was able to make it work on a section called "titles" adding the following to the CSS Editor:
section#titles {
background-color: lightblue !important;
}
Yes, it is possible by targeting via the CSS attribute selector. For example:
[data-url-id='titles-eamon'] .content, [data-url-id='titles-eamon'] .content-inner {
background-color: lightblue !important;
}
The above code would be inserted via the CSS Editor. The data-url-id value corresponds the URL Slug of the index page section (see image).
You can inspect the code of the page user your browser's developer tools (often by hitting F12 or CTRL+SHIFT+I). That will help you explore the code of the page for this and other similar issues/customization.

External & local CSS is not considered when rendering page to PDF using PhantomJS

Is there a way to force PhantomJS to read CSS styles?
I'm currently using Angular and UI-Grid to generate a table and when a value in the table meets a condition (e.g. if value > 1000) it will get assigned to a specific CSS class. Then I generate a PDF file using PhantomJS.
CSS
.data-records-alarm {
color: red !important;
text-align: center;
}
I have noticed that it recognizes "text-align: center;" property but it won't recognize the color "color: red !important;".
I have also tried "color: red;" or moving the CSS style and having it locally in my HTML file but it doesn't work.
Im currently using PhantomJS 2.0.0 and tested the Chrome & Firefox browsers.
the only way i got it to work is by using -webkit-text-fill-color instead of color
.data-records-alarm {
-webkit-text-fill-color: red !important;
text-align: center;}

Resources