Disable @media Print Style

[ConsortCreative]

Is there a way to disable print styles so that the webpages print as displayed. For example printing the youtube.com page is nearly identical to the screen. Or is there a way to add a “print” where the css is called. This is normally in the header but it’s not in the themes default header. I should be able to add a “,print” where the screen css is enqued so that it prints as shown.

Thanks

[friech]

Hi Joe,

Thanks for writing in.

Since Wordpress has theme and plugins from different authors, plus content that added by users along with their own styling, then it’s unavoidable. Still, the user can fix them through their own custom CSS using @media print {} block.

Example,

@media print {
/* ah, I don't want to print the navigation */
.x-navbar {
display: none;
}
/* and slider shouldn't be printed since it's intentionally made for screens (animation, effects, responsive breakpoints, etc.) */
.rev_slider {
display: none;
}
/* and hide videos */
iframe[src*="youtube.com"] {
     display: none;   
    }
}

You can add that to your global custom CSS.

Cheers!

[ConsortCreative]

Thanks. Specifically, I want images to print. I did use this to hide hero images for now as they were leaving large gaps. How can I target x theme hero sections where I have images, and force them to print. I would also like the backround images and colored sections to print. Can this be done? Can I target elements to get pages to print as they are seen?

I did find a javascript snipped but it didn’t work as I think the X element names need to be targeted.
Thanks

[friech]

Hi Joe,

You can find the proper CSS code selector using the Chrome browser Developer Toolbar

And then add the section’s styling to the @media print { } query block with !important statement so it can override the default @media print { } styling.

Hope it helps,
Cheers!