0

The bootstrap css file I'm using contains this:

@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    background: transparent !important;
  }
}

which unfortunately is messing up the CSS coloring of my content (which includes a 3rd party Javascript widget library). I.e., I'm seeing something that's black and white and not colored. What can I do in my html page so that my page is styled as if I deleted those lines from the bootstrap css file?

I thought this might work:

@media print {
    *,
    *:before,
    *:after {
        color:initial !important;
        background:initial !important;
    }
}

but that doesn't seem to be having any effect. I could set the color (e.g. red), but that would set everything to be red whereas I want the colors that would take effect if Bootstrap hadn't set anything.

Is this possible?

Here's an example of the problem I'm describing: https://jsfiddle.net/ty59susm/3/

amos
  • 5,092
  • 4
  • 34
  • 43
  • unless I'm mistaken `@media print` shouldn't affect how a browser displays your markup. It is for print styles. Are you sure this is the culprit? – OrderAndChaos Feb 13 '17 at 18:00
  • The principle is more general, but in most other cases I've been able to figure out to do it. But yes, this is the property I'm trying to undo. – amos Feb 13 '17 at 18:03
  • please go check: http://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview/15141886#15141886 – Riskbreaker Feb 13 '17 at 18:04

1 Answers1

1

@Sarcoma is correct about the print query, is your colouring issue occurring when you try to print the file? If the problem occurs when viewing the file normally in your browser it has to be another CSS rule that is tripping you up.

The initial color and background values are black and transparent respectively, so the rule you have written will still declare black and transparent values.

As far as I know, the only way to remove print styles from Bootstrap is to remove them from the stylesheet. Download a customised version of Bootstrap by unticking the print styles and link it from your development folder. http://getbootstrap.com/customize/

Digedu
  • 233
  • 1
  • 7
  • I added an example to demonstrate what I'm asking. It seems to be more of a css question than bootstrap or print-mode specific. – amos Feb 13 '17 at 20:04
  • Due to specificity, there is nothing you can put there. There should not be an !important property attached to the universal selector in that way. In fact, that is a very poorly written stylesheet to use. You can use specificity to overwrite that rule by adding an !important property to your .myStyle rule's background-color, but you would have to constantly declare every background-color as !important throughout your stylesheet. This would equate to badly written CSS. – Digedu Feb 14 '17 at 10:59
  • The proper solution is to remove the !important property from the universal selector. Bootstrap would not have !important attached to a universal selector like in your example. That must be a (poorly) customised Bootstrap stylesheet. You should remove that stylesheet and grab one from another source. Otherwise, your only solution is to constantly add !important properties to all other background-color declarations. – Digedu Feb 14 '17 at 11:02
  • Those `!important` tags are present even in the latest css from getbootstrap.com/customize. I checked, and BS4 doesn't have those specific tags in their `media print` section. – amos Feb 14 '17 at 13:21