Theme X Pro format for printing on a standard home printer

[plantsonwalls]

Is there a way I can design my web pages in Theme X Pro so they will look great when they are printed on a standard printer. Currently when I go to print the page the page looks like a garbled mess.

Is there a way to format the body, header and footer to look good when being printed?

For example see my site: http://plantsonwalls.com. My header is shown in plain text that overlaps the text and images. Also the footer takes an entire page and shows the links written out. The body does not format well either.

Our site has some instructional pages that we would like to show formatted nicely for a customer when they go to print it out.

[ruenel]

Hello There,

Thanks for writing in! Cornerstone and the Pro theme’s Header/Footer builder can only be used to design and layout your site for most desktop and mobile screens. This cannot be use to design how your site would look like when being printed. What you can do instead is that you may add a printer-friendly style-sheet or media query to remove unnecessary elements. Please review the following video tutorial (https://www.youtube.com/watch?v=JwfAGlYoKbo5).

You may also try out this plugin: https://wordpress.org/plugins/printfriendly/#installation

Hope that helps.

[plantsonwalls]

Thanks for your help. The CSS how-to video was great!

I was able to easily remove the header and footer elements, make the images 50% and align left. Embedded videos and woo products looked strange so I pulled those too. Now we have printable guide pages for our customers. Love it.

Here’s what I added to my css:

@media print {
.x-masthead {display:none !important;}
.x-colophon {display:none !important;}
.embed-youtube {display:none !important;}
.products {display:none !important;}
img {max-width:50% !important;}
.wp-caption {
border:0px !important;
text-align: left !important;
}
}

I was not able to remove the Wordpress header. We set this not to show for our customers anyhow. But if anyone can let us know how to make that messy code vanish for printing, that would be awesome.

[nico]

Hi @plantsonwalls,

Not sure what is the messy code that you want to remove.

Would you mind sharing us a screenshot.

Thanks.