Print in Color

[rpierce]

How can I make the app print in color?

When I add color in a rich text/html field, it will only print in b&w even if I use the system dialog. It is the same on any computer I print on using my app.

[jsetzer]

How can I make the app print in color?

Bootstrap and the available Bootswatch Themes change colors to black/transparent for @media print by default, as far as I know.

You should be able to overwrite those style definitions by defining your custom CSS styles.

You can open your browser's developer tools (F12), in Sources tab, find you specific CSS file or files, search for @media print.

There you will see all color- and background-color-definitions for printout.

Example

chrome_ewtQw79EwR.png (232.59 KiB) Viewed 254 times

[jsetzer]

I did some tests. First I changed background-color of <pre>-elements with the following CSS:

Code: Select all

<style>
pre {
    background-color: lightgoldenrodyellow !important;
}
</style>

In print preview, Bootstrap renders those in black/transparent:

chrome_taLYsh11XM.png (13.92 KiB) Viewed 252 times

After overwriting those styles for @media print like this...

Code: Select all

<style>
    pre {
        background-color: lightgoldenrodyellow !important;
    }

    @media print {
        * {
            text-shadow: none !important;
            color: #000 !important;
            background: transparent !important;
            box-shadow: none !important;
        }
    }
</style>

... I've seen that print preview still renders in black/transparent, unfortunately, but then I have seen the following option in browser's printing dialog:

chrome_WLl8Xf5QIz.gif (185.65 KiB) Viewed 252 times

There is an option for background-graphics. So, you may check if there is such an option in your printer settings dialog.

[rpierce]

Thank you again, Jan as usual you're such a great help to everyone!