Trying to make blog printer friendly

• 

  chriswilson667 · Member · Aug 4, 2015 at 9:04 pm

  • Copy link
  • Add topic to favorites

  I’m trying to my blog up so that when somebody prints a post/page, the header, sidebar and footer ARE NOT displayed.

  I think it’s going to look something like this but I’m not having any luck…

  /* Print Styles */
  @media print {
  	body {
  		background: white;
  		font-size: 10pt;
  		margin: 0;
  	}
  
  	#sidebar {
  		display: none !important;
  	}
  
  	#header {
  		height: 75px;
  	}
  
  	#content {
  		margin-left: 0;
  		float: none;
  		width: auto;
  	}
  
  	#footer, .ad {
  		display: none !important;
  	}
  }

  The blog I need help with is: (visible only to logged in users)

• 

  auxclass · Member · Aug 4, 2015 at 9:13 pm

  • Copy link

  Have you tried the Share This Print thing?

  That gets rid of the header, sidebar etc. the only thing that printed was the body of the Post and Related Posts – when I just printed one of my Posts – – easier to add the Share button than reinvent the wheel

• 

  timethief · Member · Aug 4, 2015 at 9:19 pm

  • Copy link

  There is a print button http://en.support.wordpress.com/sharing/ in the sharing buttons that you can enable and it will appear at the end of every post/page. Both your and your visitors can use it and the theme and header are not included.

• 

  chriswilson667 · Member · Aug 4, 2015 at 9:19 pm

  • Copy link

  Even with the Share This Print button, the header, navigation, sidebar/widgets and footer are all still shown. The colors are gone, but that’s it.

  I suspect it’s something easy with the theme (I’ve gotten in touch with the designer) but am hoping it’s something somebody has had an issue with and was able to resolve.

• 

  timethief · Member · Aug 4, 2015 at 9:21 pm

  • Copy link

  Really? I’m surprised to read that. You can type modlook into the sidebar tags on this thread for Staff help. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Then please subscribe to this thread so you are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.

• 

  chriswilson667 · Member · Aug 4, 2015 at 9:26 pm

  • Copy link

  Thanks for the tip. I just added modlock to the tag.

• 

  thesacredpath · Member · Aug 5, 2015 at 6:42 pm

  • Copy link

  Hi @chriswilson667, there are a couple of print media queries in the original CSS that may be overriding your stuff because they have widths and dpi attributes. I’ve not messed much with @media print, so I’ll get with one of our developers and get the scoop on how to do it on Organization.

• 

  thesacredpath · Member · Aug 5, 2015 at 8:25 pm

  • Copy link

  Replace what you have with the following and see what you think. You had #sidebar, and it is actually a class rather than an id, so it should be .sidebar. I took out the search box at the top as well as it really isn’t needed on a printed page. I also set the content area to 100% so that it goes the full width when printed.

  I might also suggest taking out the menu unless you just want to leave it there for reference.

  @media print{
  	body{
  		background:none;
  		font-size:10pt;
  		margin:0
  	}
  
  	.sidebar, #header .three.columns, #footer,.ad{
  		display:none !important
  	}
  
  	#header{
  		height:75px
  	}
  
  	#content{
  		margin-left:0;
  		float:none;
  		width:auto;
  	}
  
  	.row .eight {
  		width: 100%;
  	}
  }

• 

  chriswilson667 · Member · Aug 5, 2015 at 9:44 pm

  • Copy link

  With your changes listed I got it to work… here’s the code:

  /* Print Styles */
  @media print {
  	body {
  		background: white;
  		font-size: 10pt;
  		margin: 0;
  	}
  
  	.sidebar {
  		display: none !important;
  	}
  
  	#header {
  		display: none !important;
  	}
  
  	#jp-post-flair {
  		display: none !important;
  	}
  
  	#footer-widgets, .ad {
  		display: none !important;
  	}
  
  	#footer, .ad {
  		display: none !important;
  	}
  
  	#content{
  		margin-left:0;
  		float:none;
  		width:auto;
  	}
  
  	#jp-relatedposts {
  		display: none !important;
  	}
  
  	.row .eight {
  		width: 100%;
  
  	.post-meta {
  		display: none !important;
  	}
  
  	.post-navigation {
  		display: none !important;
  	}	
  
  	}
  }

  Thank you for your help!
  Chris

• 

  thesacredpath · Member · Aug 5, 2015 at 10:08 pm

  • Copy link

  Awesome, Chris, and you are welcome. :)