Keep text original color in print

I would like to keep the original text colors on the web pages when printing. However, the css in your theme override the colors:

@media print

  • {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    }

For example, some important messages we use red colors. Although it may not be the best practice for accessibility, but it is nice to keep the original colors anyway.

Do you have any recommendation? Since I can’t find a way to undo “color: #000 !important;”.

Hi Joannhu,

Thank you for writing in, we could override that default CSS with another stronger (more specific) CSS.

e.g.

@media print {
 body .x-main {
 	color: red !important;
 }
}

If your messages have a CLASS on it, you could use that class to make the selector even more specific.

e.g.

@media print {
 body .x-main .my-class {
 	color: red !important;
 }
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

Hi @friech,

Thank you for your recommendation. I understand that we can override the CSS with another stronger css. But it is a challenge to go through hundreds of pages to add a class to all the text or words that have colors.

Can X Theme consider giving the website admin options on how the pages are printed, such as print black text vs. the original text color?

Hello @joannhu,

Thanks for updating the thread.

I can take this as a feature request and is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thanks!

Thank you, @Prasant !

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.