CSS help with printing my blog posts

• 

  workplacepsychology · Member · Mar 24, 2017 at 4:20 am

  • Copy link
  • Add topic to favorites

  Can I get some CSS help with printing my blog posts?

  In the Adventure theme, I want to do 2 things:

  1) Remove graphics, banner, boxes, etc. (almost everything) when I print — except for the title, author, and content.

  2) Add my website title (DiscAssessmentCoach.Net) and the URL of each blog post to the BOTTOM of the page — the first line is the website title (DiscAssessmentCoach.Net) & the second line is the URL of the blog post.

  The blog posts are located here, https://discassessmentcoach.net/blog/

  Thanks.

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

• 

  thesacredpath · Member · Mar 24, 2017 at 7:08 pm

  • Copy link

  Hi, let’s start with this and give it a try printing one of your posts.

  @media print {
  	.single #header, .single .feature-img, .single .five.columns .sidebar, .single div.sharedaddy, .single .post-navigation, .single .post-meta, .single .footer, .single .hentry .article img {
  		display: none;
  	}
  	.single .hentry .row .eleven {
  		width: 100%;
  	}
  	.single .container .row .five {
  		width: 100%;
  	}
  	.single .hentry .headline {
  		font-size: 36pt;
  		margin-top: 75px;
  	}
  	.article:after {
  		content: "https://DiscAssessmentCoach.Net";
  	}
  }

  On your request to have the URL of the post at the bottom of the content, that would require code that we cannot add here at WordPress.com, but browsers by default will add the URL of the page they are printing to either the top or bottom of the printed pages, unless the person has set their browser to not include the URL. I’ve restyled the title/tagline to show at the top above the post title. I have used the :after pseudo selector to add your site url to the bottom of the content area though.

• 

  workplacepsychology · Member · Mar 24, 2017 at 7:24 pm

  • Copy link

  thesacredpath,

  Thank you. That’s really close to what I’m trying to do.

  Just 2 things:

  1. A small portion (the top part) of my website title is cut off (I’m on Chrome) at the top.

  2. There’s a thick black line at the bottom of the post and the WP :) — I would like to delete both of these. Please.

• 

  thesacredpath · Member · Mar 27, 2017 at 5:27 pm

  • Copy link

  Super, glad we are close.

  1. A small portion (the top part) of my website title is cut off (I’m on Chrome) at the top.

  Find this rule in the @media print and add the margin-top declaration.

  .single .container .row .five {
  	width:100%;
  	margin-top: 20px;
  }

  2. There’s a thick black line at the bottom of the post and the WP :) — I would like to delete both of these. Please.

  The black line does not occur in Firefox or Safari, so I would have to assume it is a Chrome thing added by the browser itself. I checked the Chrome Print Preferences and do not see a way to turn that line off. On the stats smiley, add this to the media query before the ending curly bracket ( } ).

  #wpstats {
  	display: none;
  }

  Let me know how things go on this.

• 

  workplacepsychology · Member · Mar 28, 2017 at 1:09 am

  • Copy link

  Yes, that worked! Thank you!!

• 

  thesacredpath · Member · Mar 28, 2017 at 3:07 am

  • Copy link

  You are welcome.