"clean print?"


#1

Hello, me again. :slight_smile:

Is there a way to make the theme more print-friendly? Here is a page that I would like to encourage people to print out, but as you can see, when you hit print, all of the normally hidden code shows up…

Thank you!


#2

Hello there,

I am sorry, that is out of theme’s feature. Using a plugin would be your best bet. Browse one of which fits with your need in here.

Regards,
Kharis


#3

Hi Kharis,

I figured out how to do it with CSS and I thought I would share in case anyone else with this theme would like to do it. It removes header ad, top row, footers, sidebars and all hyperlink text. Now, if anyone can figure out how to not have so much space between the title and the featured image (currently logo and title on first page, images and rest of text start on second page), that would be awesome. But this is already much better than it was before, so I’m so satisfied. :slight_smile: Here is the CSS:

@media print {
body {background:white;
font-size:10pt;
margin:0; }
#secondary { display:none; }
#header { height:75px; }
#header, .header-ad { display:none; }
#header, .top-header.row { display:none; }
#content{ margin-left:0;
float:none;
width:auto; }
a[href]:after {content: none}
.demo .red { color:black;
font-weight:bold; }
#content a { font-weight:bold;
color:#000066;
text-decoration:underline; }
#content { margin-left:0;
float:none;
width:auto; }
#colophon { display:none; }
#comments { display:none }
img.centered { display: block;
margin-left: auto;
margin-right: auto;
img.right { padding: 4px;
margin: 0 0 2px 7px;
display: inline; }
img.left { padding: 4px;
margin: 0 7px 2px 0;
display: inline; }
.right { float: right; }
.left { float: left; }

}


#4

Hello,

Great! You found the much better solution. Thank you for sharing it. We really appreciate it.

Feel free to open a new topic if you need anything else to resolve.

Regards,
Kharis


#5

Hello,

I’m having the same issue with the White Space on our site.

I’ve posted the code but it’s not working, getting errors. Any other way I can sort it out?

Regards,

EdwardWhite%20Space%20Code%20Error


#6

Hello there,

It looks like img.right line missing the closing bracket. Please correct it to:

img.right { padding: 4px; margin: 0 0 2px 7px; }

Also, } at the most button have to be removed.

To avoid CSS error, you could validate your code with this tool: https://jigsaw.w3.org/css-validator/#validate_by_input.

Regards,
Kharis