I am trying to print a PHP generated document in chrome, on the browser it looks fine Link to the page I want to print But my printer will not print any coloured backgrounds, can anyone offer any suggestions please? Can I do this with CSS?
You adjust in the browser, whether the background colors and images are printed. See your browsers printing options.
Google Chrome offers this feature starting from version 26 (march 2013).
Also starting from version 17, Chrome allows changing the background print behavior programmatically by using -webkit-print-color-adjust:exact; in the element CSS to print the background.
Gordon's answer is great, but for people whose CSS skills are rusty, here's a more complete example.
Put the following in your document's <head> section.
<style type="text/css">
#media print { body { -webkit-print-color-adjust: exact; } }
</style>
By the way, although Chrome/Chromium's print dialog now has a Background graphics checkbox, it only seems to work if you do not click Print using system dialog (observed with Chromium in Linux).
Chrome > Print (cmd P) > click More Settings > Options: check Background graphics
Related
I am using the Firefox Developer Edition theme on MacOS to reduce eye strain while programming.
However, results while typing in the location bar still pop up bright white.
Does anyone know of CSS to have these results use a dark background and light text?
Generally, if you are looking for an add-on which will change this, then a theme would be appropriate. At least one of the themes I use does style the URL Bar's auto-complete results. An extension could also change the styling, if desired. However, given that you are not wanting a completely different theme, just a minor modification to the Developer Edition theme, it is easier to do this yourself by applying CSS to the profile's chrome by placing the CSS in userChrome.css.
To do it for yourself, you need to determine the appropriate elements to style. As is often the case, the add-ons DOM Inspector combined with Element Inspector are quite useful in determining the appropriate elements to style. With those add-ons installed, opening the auto-complete drop-down and Shift-Right-Click results in seeing the DOM for what we want to change:
Thus, we can put the following in the profile's userChrome.css, which needs to be located in the [profile directory]/chrome directory:
/*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the #namespace line -- it's required for correct functioning
*/
/* set default namespace to XUL */
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#PopupAutoCompleteRichResult {
background-color:black !important;
-moz-border-top-colors:black !important;
-moz-border-top-colors:black !important;
-moz-border-left-colors:black !important;
-moz-border-right-colors:black !important;
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
background-color:black !important;
}
#PopupAutoCompleteRichResult .ac-title-text,
#PopupAutoCompleteRichResult .ac-tags-text,
/*#PopupAutoCompleteRichResult .ac-url-text,*/
#PopupAutoCompleteRichResult .ac-action-text {
color:white;
}
This results in the URL Bar auto-complete having a black background with white text:
Ok, after doing quite a bit of Internet digging, I found probably the only solution, which also isn't really one.
As of writing this, there is no such Plugin/Add-on/Mod for changing the style of the search bar.
However, you could change the source code of Firefox itself. To do so start here: Mozilla Dev GUide. Its mainly written in C & C++. I mean, there really is no option for that.
There are settings, somewhere deep down in Firefox, where you can actually get such an add-on, I couldn't find it tho.
You can turn off the search bar completely, so you get your results on google, after hitting enter.
A thrid option would be, to try another browser. Just check, which browser allows you to style the search bar and apply all the other Dark Themes to that browser later on.
Hope, I didn't make it worse :/
Is there a way to remove scrollbars from QWebEngineView or can i somehow get access to it's ScrollArea?
With webkit it was as easy as
WebView->page()->setScrollBarPolicy(Qt::Vertical, Qt::ScrollBarAlwaysOff);
WebView->page()->setScrollBarPolicy(Qt::Horizontal, Qt::ScrollBarAlwaysOff);
but i don't see any similar functionality within QWebEngine. I do not even see any scroll area within qwebengine sources.. Is there a something that i'm missing?
Update: I think i can try to force scrollbars disappear from some css settings that are passed with page for chromium
Just set QWebEngineSettings::ShowScrollBars to false which is introduced in Qt 5.10
See QWebEngineSettings::WebAttribute
Changing css style of the webpage worked. I've used
<style type="text/css">
body {
overflow:hidden;
}
</style>
but bad luck for those, who do not have access for css of the webpage you are trying to show the way you want.
http://alleystoeden.org/testing3/index.html
in windows safari 5.1.7, the primary navigation, both regular and when hovered don't look right. in fact, when not hovering the main menu is practically unreadable it's so light. the drop down menu is fine and fonts there are rendering properly.
body text (visible on the contact form page) are also rendering correctly.
i've tested it on iphone and it is fine there.
is there some code i can add to this template to fix the windows safari font problem with just the primary menu?
i'm not sure what part of the code i would copy and paste to show what i'm currently using, but if you can tell me the name, i can copy and paste it here.
thanks so much
In your CSS file (styles.css, line 1197) you have the following declaration:
white .nav--primary > li > a {
color: #CCC;
}
Change this light grey to a darker colour and you should be fine.
I am using a separate print css on our website. It's been requested that we have our logo at the top of printed pages. This is the code I'm using for print.css:
body:before {
content: url(../images/logo.gif);
}
This works on Firefox, Chrome, Safari and Opera ... and of course you know what's coming next.
It doesn't work in Internet Explorer 8 which apparently supports before as a pseudo-class: http://www.quirksmode.org/css/beforeafter_content.html
In print preview there is a blank space the same size as the logo but our logo doesn't print. If I change the code to:
content: "Test Text" url(../images/logo.gif);
The "Test Text" shows, but still not the logo.
Does anyone have any ideas? It's made very difficult that I can't debug off "print preview" and simply changing the media type on the CSS links renders something completely different in the browser screen.
Cheers
Tama
You can't print background images by default. Users need to change their browser settings to print background colours and images.
Your best bet is to add some HTML like this:
<div class="PrintOnly">
<img id="PrintLogo" src="logo.gif"/>
</div>
Styling something like this to explicitly hide from non-print media configurations:
.PrintOnly { display:none; }
#media print {
.PrintOnly { display:block; }
}
Firebug is an excellent tool to to show a screen media CSS for some HTML element, but is there a way to look at the print media CSS too? Or is there any other tool to see the print media CSS?
What about Web Developer Toolbar?
https://addons.mozilla.org/en-US/firefox/addon/60
when installed go to CSS -> Display CSS by media type -> Print
Newer Firefox
Open devtools with F12.
Go to Inspector tab.
Open Rules subtab.
There will be print media button.
Old firefox
Firefox does not need firebug now.
Run developer toolbar by pressing Shift+F2
Type media emulate print
Type media reset in order to return to standard view.
I would have never expected this to work, but it does. Install -both- the 1.5 beta of Firebug and Web Developer. When you choose the print css from Web Developer, the tools in Firebug suddenly work on the new print version of the page. So far I haven't found any problems with running both at the same time.
Use the Web Developer plug in. Then you can choose from the CSS menu which media you want the page to display as.
You might want to take a look at the webdeveloper toolbar - it allows you to select what CSS you want to see. In conjunction with firebug, it should be possible to see the print media CSS.
In Firefox (and some other browsers), you can see a static display of the print stylesheet by using Print Preview. It's nowhere near as useful as the web developer toolbar, but it can also help you understand what is going to be printed.
Actually, be aware that you might see #media print CSS when you don't expect it.
Like SO uses:
[..]#media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]
...and hence one might expect the CSS panel in Firebug to somehow show:
#media print {
#sidebar, #nav, [..], div.vote {
display: none;
}
}
But instead it shows the CSS as if the #media print is actually active, like:
#sidebar, #nav, [..], div.vote {
display: none;
}
(See also the related issue report: CSS Panel does not have #media UI.)
Edit 2 After reading Arjan's answer, I realize that this solution does not address correctly sites using (or abusing) the #media print CSS. (See example below.) But I think this solution still holds valid as a "non-perfect-quick-and-dirty-trick", above all for code that you have written and that you know beforehand that it doesn't have this.
With Firebug, you also can edit the <link rel="stylesheet" type="text/css" ...> and <style> tags to your convenience.
For example, you can switch an original
<link rel="stylesheet" type="text/css" media="print">
to
<link rel="stylesheet" type="text/css" media="screen">
and the browser will apply it. You'll also have to deactivate the screen-only ones.
Of course, this is only useful if you only want to quick-check a few pages with very few stylesheet links, but at least, you do not need to install any additional plugins.
Edit 1 This trick suggests me using javascript to automate this...
(Disclaimer: I'll use JQuery for simplicity. I'm not a Javascript expert.)
// Save all stylesheet links
allStylesheets = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');
// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
printStylesheets.attr("media", "screen");
}
Note that the default media is "screen" (w3.org - media attribute). This could be used in a button to show a page preview. The only drawback is that you have to reload the page to restore the original view.
As pointed out above, this solution does not work with html code like this, because the styling inside the #media print won't be applied by the browser:
<html>
<head>
<title>Hello world</title>
<style type="text/css" media="all">
#media print { h1 { color: red; }}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Web developer toolbar has one big drawback for CSS debugging though: every time you refresh the page it reverts to the screen stylesheet.
What I tend to do these days is temporarily switch the media of the print stylesheet to screen while I'm developing, and then switch it back before going live.
Firefox 68 added a button to "Toggle print media simulation for the page" to the Rules View of the Page Inspector (Bug 1534984):
There's a video of how to use the button in "View #media rules for Print" section of the "Examine and edit CSS" page.