How to customize css not to print links as urls?

• 

  zeynel1 · Member · Oct 16, 2013 at 9:41 am

  • Copy link
  • Add topic to favorites

  I am using The Truly Minimal theme. When I print a post, everything inside the tag is printed. How do I stop this? I think it is related to CSS. Where is the CSS and how can I change it? I bought Custom Design already. I also like to change the title font size, margin etc.

  Note: I first posted this to the general forum: https://en.forums.wordpress.com/topic/how-to-customize-css-not-to-print-links-as-urls?replies=5#post-1479716

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

• 

  cristovaov · Member · Oct 16, 2013 at 12:29 pm

  • Copy link

  Hi,

  can you try this bit of code in your custom css panel:

  @media print {
  .entry-content a[href]:after, .entry a[href]:after{content:" (" attr(href) ")"; display: none !important;}}

  Go to your website and refresh your cache
  (ctrl+F5 in win, apple/cmd+R on mac)
  Let me know if this works,

  rgrds~

• 

  zeynel1 · Member · Oct 16, 2013 at 10:56 pm

  • Copy link

  @cristovaov. Thanks, but this did not work. I still see the links when I try to print.

• 

  cristovaov · Member · Oct 17, 2013 at 6:41 am

  • Copy link

  Hi there,
  did you copy-paste the code above?
  I’ve checked your custom css and it seems you are missing a “;” after the following bit .entry a[href]:after{content:" (" attr(href) ")"

  cheers~

• 

  zeynel1 · Member · Oct 17, 2013 at 8:41 am

  • Copy link

  Great, thanks. I don’t know how I missed that “;” but I copied and pasted the code again and now it is working.

  I also tried to add “font-size:12pt” but couldn’t make it work. How can I play with font size, line height and margins, or title fonts etc.? I found this page http://codex.wordpress.org/Styling_for_Print but it is for WordPress.org. Is there a page like that for WordPress.com? Thanks, again.

• 

  cristovaov · Member · Oct 17, 2013 at 10:22 am

  • Copy link

  Make sure to include your CSS rules for print between the print query,
  An example for the font size and line heights of paragraphs with what we have added:

  @media print {
  .entry-content a[href]:after, .entry a[href]:after {
  content:" (" attr(href) ")"; display: none !important;
  }
  /*add your custom print rules under this comment.*/
  p {
  font-size:12pt;
  line-height:1.6em;
  }
  
  }

  I haven’t seen a page like the one you are referring to for WP.com.
  It’s a good reference point to observe the structure of a print style, though.

  Not wanting to disappoint but in honesty I think print styling is an advanced and specific topic: the understanding of CSS+HTML properties and their relationship is paramount and perhaps out of the scope of the “Custom Design” module offered on WP.com

  -greetz~

• 

  thesacredpath · Member · Oct 17, 2013 at 5:03 pm

  • Copy link

  @cristovaov, nice job on the CSS solution! Glad to have you around. :)