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?

Answer 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.

Answer 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;     } }