I'm attempting to make a printable stylesheet for our app but I'm having issues with background-color in #media print.
#media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
Everything else works, I can modify the borders and such but background-color won't come through in the print. Now I understand that y'all might not be able to answer my question without more details. I was just curious if anyone had this issue, or something similar, before.
To enable background printing in Chrome:
body {
-webkit-print-color-adjust: exact !important;
}
Edit:
For Chrome, Safari and Firefox:
body{
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.
Once that is set so it will print background colours and images, what you have there will work.
It is found in different spots.
In IE9beta it's found in Print->Page Options under Paper options
In FireFox it's in Page Setup -> [Format & Options] Tab under Options.
Got it:
CSS:
box-shadow: inset 0 0 0 1000px gold;
Works for all boxes - including table cells !!!
(If the PDF-printer output file is to be believed..?)
Only tested in Chrome + Firefox on Ubuntu...
Try this, it worked for me on Google Chrome:
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
-webkit-print-color-adjust: exact; alone is Not enough
you have to use !important with the attribute
this is printing preview on chrome after I added !important to each background-color and color attrubute in each tag
and this is printing preview on chrome before adding !important
now, to know how to inject !important to div's style, check out this answer I'm unable to inject a style with an “!important” rule
Two solutions that work (on modern Chrome at least - haven't tested beyond):
!important right in the regular css declaration works (not even in the #media print)
Use svg
If you are looking to create "printer friendly" pages, I recommend adding "!important" to your #media print CSS. This encourages most browsers to print your background images, colors, etc.
EXAMPLES:
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
There is another trick you can do without activating the print border option mentioned in other posts. Since borders are printed you can simulate solid background-colors with this hack:
.your-background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee; /* Make it fit your needs */
}
Activate it by adding the class to your element:
<table>
<tr>
<td class="your-background"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
Although this needs some extra code and some extra care to make background-colors visible, it is yet the only solution known to me.
Notice this hack won't work on elements other than display: block; or display: table-cell;, so for example <table class="your-background"> and <tr class="your-background"> won't work.
We use this to get background colors in all browsers (still, IE9+ required).
For chrome, I have used something like this and it worked out for me.
Within the body tag,
<body style="-webkit-print-color-adjust: exact;"> </body>
Or for a particular element, let's say if you have table and you want to fill a td i.e a cell,
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css which prevents table rows from being printed with background-color.
.table td,
.table th {
background-color: #fff !important;
}
Let's assume you are trying to style the following HTML:
<table class="table">
<tr class="highlighted">
<td>Name</td>
<td>School</td>
<td>Height</td>
<td>Weight</td>
</tr>
</table>
To override this CSS, place the following (more specific) rule in your stylesheet:
#media print {
table tr.highlighted > td {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
This works because the rule is more specific than the bootstrap default.
I just added to the print media query this snippet and all style was applied as intended:
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
Found this issue, because I had a similar problem when trying to generate a PDF from a html output in Google Apps Script where background-colors are also not "printed".
The -webkit-print-color-adjust:exact; and !important solutions of course did not work, but the box-shadow: inset 0 0 0 1000px gold; did... great hack, thank you very much :)
Thought I'd add a recent and 2015 relevant aid from a recent print css experience.
Was able to print backgrounds and colors regardless of print dialog box settings.
To do this, I had to use a combination of !important & -webkit-print-color-adjust:exact !important to get background and colors to print properly.
Also, when declaring colors, I found the most stubborn areas needed a definition directly to your target. For example:
<div class="foo">
<p class="red">Some text</p>
</div>
And your CSS:
.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
Tested and Working over Chrome, Firefox, Opera and Edge by 2016/10. Should work on any browser and should always look as expected.
Ok, I did a little cross-browser experiment for printing background colors. Just copy, paste & enjoy!
Here it is a full printable HTML page for bootstrap:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Both z-index are resolving recursive element containment */
[background-color] {
z-index: 0;
position: relative;
-webkit-print-color-adjust: exact !important;
}
[background-color] canvas {
display: block;
position:absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<!-- CONTENT -->
<body>
<!-- PRINT ROW BLOCK -->
<div class="container">
<div class="row">
<div class="col-xs-6">
<div background-color="#A400C1">
<h4>
Hey... this works !
</h4>
<div background-color="#0068C1">
<p>
Ohh... this works recursive too !!
<div background-color="green" style="width: 80px; height: 60px">
Any size !!
</div>
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div background-color="#FFCB83" style="height: 200px">
Some content...
</div>
</div>
</div>
<script>
var containers = document.querySelectorAll("[background-color]");
for (i = 0; i < containers.length; i++)
{
// Element
var container = containers[i];
container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');
// Color
var color = container.getAttribute("background-color");
container.style.backgroundColor = color;
// Inner Canvas
var canvas = document.getElementById("canvas-" + i);
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.print();
</script>
</body>
</html>
Best "solution" I have found is to provide a prominent "Print" button or link which pops up a small dialogue box explaining boldly, briefly and concisely that they need to adjust printer settings (with an ABC 123 bullet point instruction) to enable background and image printing. This has been very successful for me.
In some cases (blocks without any content, but with background) it can be overridden using borders, individually for every block.
For example:
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
#media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
* {
-webkit-print-color-adjust: exact;
}
Also, Enable > Emulate CSS Media From > Inspact > More Tools > Renders. Very detailed steps can be found here.
You can use the tag canvas and "draw" the background, which work on IE9, Gecko and Webkit.
If you don't mind using an image instead of a background color(or possibly an image with your background color) the solution below has worked for me in FireFox,Chrome and even IE without any over-rides. Set the image somewhere on the page and hide it until the user prints.
The html on the page with the background image
<img src="someImage.png" class="background-print-img">
The Css
.background-print-img{
display: none;
}
#media print{
.background-print-img{
background:red;
display: block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:-10;
}
}
Do not set the background-color inside the print stylesheet. Just set the attribute in the normal css file and it works fine :)
Checkout this example: The Ultimate Print HTML Template with Header & Footer
Demo: The Ultimate Print HTML Template with Header & Footer Demo
tr.group-title {
padding-top: .5rem;
border-top: 2rem solid lightgray;
}
tr.group-title > td h5 {
margin-top: -1.9rem;
}
<tbody>
<tr class="group-title">
<td colspan="6">
<h5 align="center">{{ group.title }}</h5>
</td>
</tr>
Works in Chrome and Edge
body{
background-color: #E5FFE5;
}
.bg_print{
border-bottom: 30px solid #FFCC33;
}
.orange_bg_print_content{
margin-top: -25px;
padding: 0 10px;
}
<div class="bg_print">
</div>
<div class="orange_bg_print_content">
My Content With Background!
</div>
Tested and works in Chrome and Firefox and Edge...
I have two half width divs that have the same class but are assigned posts through WordPress. Currently I have them lined up with full width posts above and below, but, I need to apply 5px of padding to both but not on the edges, i.e. left post has right padding, right post has left padding and I can't think for the life of me how to do this. I tried using different post formats and checking which format the post was and applying padding based on that but it didn't work as intended. For some reason, it pushed the divs to the center and had padding in the wrong places. Firstly here's my PHP structure with the if/else:
<?php if (has_post_format('status')) : ?>
<div class = "twocolumnpost left">
<div <?php post_class() ?>>
<?php if (has_post_thumbnail()) : ?>
<div class = "post-thumb">
<?php the_post_thumbnail(); ?>
<div class = "caption">
<h4><?php the_title(); ?></h4>
<p><?php echo get_the_date(); ?></p>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php elseif (has_post_format('gallery')) : ?>
<div class = "twocolumnpost right">
<div <?php post_class() ?>>
<?php if (has_post_thumbnail()) : ?>
<div class = "post-thumb">
<?php the_post_thumbnail(); ?>
<div class = "caption">
<h4><?php the_title(); ?></h4>
<p><?php echo get_the_date(); ?></p>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
As you can see it has padding on both the left and right sides (it should line up with the post above) and not enough in the middle. The CSS I used for this is:
.twocolumnpost .post {
float: left;
display: block;
width: 50%;
padding: 10px 0px;
}
.twocolumnpost.left {
padding-right: 0px;
}
.twocolumnpost.right {
padding-left: 0px;
}
.twocolumnpost img, .twocolumnpost iframe {
max-width: 440px;
max-height: 294px;
width: 100%;
padding: 0;
}
Now what I'd like it to be like is this:
BUT with 10px of padding in the center of the two posts but NOT the sides i.e. 5px right on the left post, 5px left on the right post. The only difference with the second image is that the max-width of the pictures are set to 450px instead of 400px and obviously have no left or right padding.
No matter what I try it doesn't line up properly, and I'm at a loss. Any help would be greatly appreciated. Ideally this could be done without the need for two different post types so it applies correctly to any twocolumnpost but the structure as is works too. Thanks!
Live sit is here: http://suburbia.comoj.com/wordpress/
There are several ways of resolving this issue, but it depends on what kind of users (and browsers) do you want to support. If you don't mind using modern standards (therefore leaving some users on legacy browsers behind), you can use the the calc property:
.twocolumnpost {
width: calc(50% - 10px);
padding: 10px 0px;
}
.twocolumnpost.left {
float: left;
}
.twocolumnpost.right {
float: right;
}
p/s: You don't need to declare the display: block property when you set floats — that's the default behavior for floats anyway.
Even better, you can take advantage of CSS flexbox, but you need to set the parent of .twocolumnpost to have flex display. Let's say the parent has the class name of .twocolumnpost-parent:
.twocolumnpost-parent {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.twocolumnpost .post {
width: calc(50% - 10px);
}
You can see the proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/DMy7r/
Update: On a related note, I have written a jQuery script to do the exact same, but with gallery images. Perhaps you can adapt it to your needs: Responsive Photosets. Not exactly relevant, but addresses the same issue that you are currently facing.
It could be just a white space issue.
You can either so something like have an html comment between your divs killing the whitespace or you can float the divs over. You might have to rework the containing elements to make sure the floats don't do crazy things. But floating the left and right columns (twocolumnpost) should have them flush against each other (unless there is padding/margin on them).
In short I think the gap is being created by the whitespace between the divs with the twocolumnpost class. If you float this two next to eachtoher or remove the whitespace you should be able to have them flush against each other.
Background
I am creating a video gallery using the ShadowBox jQuery plugin. To do this, I am creating rows of inline images using display:inline-block. The user will be able to upload a video as well as thumbnail images to accompany the video. The thumbnail's max size is 240x160 pixels.
What I want to do is have a black border around each gallery thumbnail "slot" with the user's uploaded thumbnail residing inside of that "slot", so if the user uploads a 240x160 thumbnail, the thumbnail will fill up the "slot" completely, and if they upload a smaller image, the thumbnail will still be in the "slot" with some extra spacing around it.
Here's an example of where I am right now: http://jsfiddle.net/shaunp/HvZ5p/
The problem is that there is extra spacing below my thumbnails and I'm not sure why. If you inspect the code you will see that there is an extra 5 pixels lurking below the image and I'm not sure where it's coming from. The grey part below the image should be directly BEHIND the image so that in the case the user uploads a smaller thumbnail, there will be grey-background space around it, but for some reason it is too tall. Any suggestions?
HTML
<div class="inline">
<div class="bg-thumb">
<div class="cell-thumb">
<a href="#" rev="#nvcCaption#" class="shadow">
<img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
</a>
</div>
</div>
<div class="vcCaption">Caption</div>
</div>
<div class="inline">
<div class="bg-thumb">
<div class="cell-thumb">
<a href="#" rev="#nvcCaption#" class="shadow">
<img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
</a>
</div>
</div>
<div class="vcCaption">Caption</div>
</div>
CSS
body {
overflow:hidden;
margin:0 50px 0 50px;
}
.vcCaption {
text-align:center;
font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
color:#000;
margin-bottom:5px;
}
.inline {
display:inline-block;
}
.bg-thumb {
width:250px;
height:170px;
}
.bg-thumb {
text-align:center;
display:table;
margin-bottom:5px;
}
.cell-thumb {
display:table-cell;
vertical-align:middle;
border:5px solid #000;
background-color:#7f7f7f;
}
.thumbImg {
max-width:240px;
max-height:160px;
}
Add vertical-align:top to your thumbnails:
.thumbImg {
max-width:240px;
max-height:160px;
vertical-align:top;
}
jsFiddle example
The default value of vertical-align is baseline, but for your needs you'll want the images to align to the top.
Another option would be to set the font size to zero on the containing div like:
.cell-thumb {
display:table-cell;
vertical-align:middle;
border:5px solid #000;
background-color:#7f7f7f;
font-size:0;
}
jsFiddle example
Adding vertical-align: middle; to your image will solve that.
.thumbImg {
vertical-align: middle;
max-width:240px;
max-height:160px;
}
the anchor tag is by default an inline element which gives it extra spacing, set it to a block element and give it some width and height!
.cell-thumb a {
display: block;
width: 240px;
height: 160px;
}
Images will by default display as inline-block (http://dev.w3.org/html5/markup/img.html#img-display) meaning that they will sits on an inline level block - or text line if you prefer.
Either set the font-size and/or line-height to 0 or in this case simply set the image to display at block level (display: block;).
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.