CSS/SCSS/bootstrap :: override print settings in bootstrap :: change background:transparent ! important to a color

Question

I have a problem with the bootstrap CSS/print.

In bootstrap CSS (reset.css) everything is cleared for printing

@media print {
  * {
    text-shadow: none !important;
    color: black !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

But I have to print several lines in color. My table looks like this:

<div class="container">
    <div id="task-summary">
        <div id="process-summary">
            <table class="table table-condensed">
                <tbody>
                    <tr class="success">
                        <td>

I embeded this into my code, but it does not work:

@media print {

  #task-summary{
    .success{
      background-color: #DFF0D7 !important;
    }
  }
}

I've already tried if the css is excepted by using display: none .. it works (line is not displayed) and seems to be on the right place.

Does someone have an idea how I can manage to override the bootstrap css command, without editing the reset.css of bootstrap?

Solution 1

I had the same problem. When you print the page the background-color: ...; option doesn't work at table rows. Change the CSS-Selector to:

@media print {

  #task-summary .success td {
    background-color: #DFF0D7 !important;

    /* add this line for better support in chrome */ 
    -webkit-print-color-adjust:exact;
  }
}

Everything should work after this changes.

Solution 2

@media print {
    .success {
      background-color: #DFF0D7 !important;
    }    
}

Or

@media print {
    #task-summary .success {
      background-color: #DFF0D7 !important;
    }  
}

Or

@media print {
    #task-summary > #process-summary .success {
      background-color: #DFF0D7;
    }
}

Comments

[sevenseacat]

Your browser may be trying to be clever and refusing to print background colours. Check your browser settings.

[Piet van Dongen]

Your user's browser settings will override this, see this answer: stackoverflow.com/a/3894013/1064286

[jabbawock]

thanks sevenseacat, you have given me the right directions... fixed it for chrome7safari with -webkit-print-color-adjust:exact; and will now google to find a solution for IE

[GaryP]

Check your nestings...

[Drellgor]

It was the "-webkit-print-color-adjust:exact;" line that got this working for me.