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?

Your browser may be trying to be clever and refusing to print background colours. Check your browser settings. — sevenseacat, Mar 27 '13 at 12:11
Your user's browser settings will override this, see this answer: http://stackoverflow.com/a/3894013/1064286 — Piet van Dongen, Mar 27 '13 at 12:12
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 — jabbawock, Mar 27 '13 at 12:21

score 5 · Answer 1 · answered Nov 28 '14 at 19:08

5

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.

answered Nov 28 '14 at 19:08

phylib

148
2
10

3

It was the "-webkit-print-color-adjust:exact;" line that got this working for me. – Drellgor Aug 10 '16 at 23:31

score 2 · Answer 2 · edited May 11 '13 at 09:59

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

edited May 11 '13 at 09:59

nhahtdh

55,989
15
126
162

answered May 11 '13 at 07:34

GaryP

2,173
1
21
28

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

2 Answers2