Printing with the sidebar widget area

puffinld · Member · Apr 30, 2013 at 10:46 pm
Copy link

Add topic to favorites
I feel that the sidebar widget area is important when looking at the site. However when printing a page, I would prefer not to see it.

Is it also possible to print a different image for the header, rather than the screen header?

The blog I need help with is: (visible only to logged in users)
raincoaster · Member · Apr 30, 2013 at 10:55 pm
Copy link
Use the Share to Print button on your Settings->Sharing page.
puffinld · Member · May 1, 2013 at 7:34 am
Copy link
The Share to Print button is shown at the bottom of each page and post but it just gives the same print preview as any other means of printing a page.

How can I control what appears on the printed page?
- no sidebar, widget area
- different image header
puffinld · Member · May 1, 2013 at 9:18 am
Copy link
On a “conventional” website, I would control this by a print.css file.

For example
```
#logos, #skip, #menu, #footer, #blind_user, #no_print
{
	   display : none;
 }
```
raincoaster · Member · May 1, 2013 at 9:29 am
Copy link
Interesting: I had been told it printed the print-optimized version of the website. Do you have the Custom Design upgrade?
puffinld · Member · May 1, 2013 at 9:51 am
Copy link
Yes, I do. Have you looked at the site?
puffinld · Member · May 2, 2013 at 9:18 am
Copy link
Thought it might be useful to add that I am using the theme Fresh & Clean.
I feel sure there must be a CSS solution for this but can’t figure it out so far.
designsimply · Member · May 6, 2013 at 7:12 pm
Copy link
You can do this with a media query. Here is an example to get you started:
```
@media print {
	#content {
		width: 96%;
	}
	#sidebar {
		display: none;
	}
}
```
Here is some additional info about print stylesheets:
http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

You can get a good idea about previewing if you write the CSS without the “@media print { }” wrapper first (just to preview), and then add it back before saving and use your browser’s print preview option to see what the final outcome will look like if printed.
puffinld · Member · May 6, 2013 at 7:43 pm
Copy link
That’s fixed the sidebar! Thanks.

Can I now exclude the Menu and the Footer in the same fashion? I have tried playing with various options but can’t seem to find the correct “words”! I am wondering if the difference is WordPress?
designsimply · Member · May 6, 2013 at 7:59 pm
Copy link
The difference isn’t WordPress so much as it’s the HTML structure of the theme you’re using. In CSS, you just need to figure out the proper selector to target the areas you want to change. See http://www.htmldog.com/guides/css/beginner/selectors/ to learn more.

In your theme, which is Fresh & Clean as you’ve mentioned, you can target and hide the sidebar, header area, main menu, and post flair (sharing links and likes) all in one swoop.

Find this part of the previous example:
```
#sidebar {
	display: none;
}
```
And change it to this:
```
#sidebar,
#branding,
#access,
#jp-post-flair {
	display: none;
}
```
Note that WordPress.com requires keeping the footer credits in tact, but they don’t take up a ton of space so hopefully you’ll think they’re okay in the example above!
puffinld · Member · May 6, 2013 at 9:14 pm
Copy link
That looks great now. Many thanks

All that remains is – Is it also possible to print a different image for the header, rather than the screen header?
puffinld · Member · May 6, 2013 at 10:22 pm
Copy link
Found out how but can’t work out what size the image needs to be!
designsimply · Member · May 7, 2013 at 1:41 pm
Copy link
I think what you have looks okay.

Here is what I see in a print preview on my laptop: http://cl.ly/Om8c

Note the circled option on the left, it’s an option on the user’s side whether or not to print background images.
puffinld · Member · May 7, 2013 at 2:36 pm
Copy link
Thank you. I worked on the image sizes till the width looked OK (640px) then merged 2 images. Resolution not good but Anita has the original images and will re-work them this evening.

One last question if I may! Why is there such a large gap between the last line and the footer? Is that configurable? I tried putting a height on the @media print { #content but it made no difference. I was hoping that the Home page would be on 1 sheet of paper rather 1 and a tiny bit!
designsimply · Member · May 7, 2013 at 3:35 pm
Copy link
It might just be where the page happens to get cut off for printing, but try reducing the space inside the print media query with this:
```
#content article {
	margin-bottom: 0;
	padding-bottom: 0;
}
```
Also note that logged out users (i.e. normal readers) won’t see that “(Edit)” link, so that will reduce some of the space as well. To test that, try doing a print preview after logging out or from a different browser where you have not logged in to WordPress.com.
puffinld · Member · May 7, 2013 at 4:07 pm
Copy link
Thank you once again, that’s fixed it. It had tried after logging out but it didn’t make enough difference!

It’s just what I wanted now!

No items found.