Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • sg 33 posts 83 karma points
    Jul 01, 2014 @ 17:18
    sg
    0

    How to implement a clean "Print" page functionality? Please Help!

    Hi,

     

    I want to give a button to print the webpage. When i print using File->Print, it prints all the links spelled out with the path and it is complete clutter. How can i just print the clean page ( like it is visible ) on the screen.

    I tried using a print.css that i found on the web. And added it on the master page:

    <link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

    and on the homepage template i added this:

    <a href="#" onclick="window.print();return false">Print this page</a>

    But when i print, it still give all the links and text overlap and is not clean at all.

    Please can someone help with is. this is urgent!!

    Thanks so much in advance

    Shilpi

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 01, 2014 @ 17:22
    Jan Skovgaard
    0

    Hi SG

    What is your website based on? Is it using some kind of boilerplate with some defauls print stylesheets? It's probably those print stylesheets or @print targets you need to remove from your CSS.

    Could you perhaps refer to a URL where one can see the issue? Or perhaps just post a screendump?

    /Jan

  • sg 33 posts 83 karma points
    Jul 01, 2014 @ 17:24
    sg
    0

    So should i remove the link to print.css?

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 01, 2014 @ 17:30
    Jan Skovgaard
    0

    What does it look like? And did the page look odd before you applied it?

    PS: Please don't post in more than one forum - People will respond if they think they can help double posting just makes too much noise :)

    /Jan

  • sg 33 posts 83 karma points
    Jul 01, 2014 @ 17:34
    sg
    0

    Sorry Jan...i did not realize it ...i apologize. Very sorry!

     

    Even without the print.css. It is printing the whole url whereever there is a hyperlink on the page. it is putting the URL in Parenthesis below the hyperlink text.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 01, 2014 @ 17:37
    Jan Skovgaard
    0

    It's all right just wanted to mention it :)

    So in the stylesheet that you had before adding the print.css do you have any kind of @print targets in it? Or does it import a specific print stylesheet?

    Could you perhaps display the content of the stylesheet on ghist on Github for instance? (Please don't post it in here since it will make a looong post and the formatting will be weird).

    /Jan

  • sg 33 posts 83 karma points
    Jul 01, 2014 @ 17:59
    sg
    0

    I tried to follow exactly what this post said:

     

    http://our.umbraco.org/forum/ourumb-dev-forum/features/3112-Print-A-Page-facilty

     

    Thanks

    Shilpi

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 01, 2014 @ 19:11
    Jan Skovgaard
    0

    Hi Sg

    Ok, then you should try removing the line where it says content: "("attr(href)")"; from the code block beneath.

    a:link:after, a:visited:after {
      content: " (" attr(href) ") ";
      font-size: 90%;
    }
    

    It's that part that inserts the full url - I think the though behind it is to make the link useful on print since people can then see what the link in the text is pointing to.

    Hope this helps.

    /Jan

  • sg 33 posts 83 karma points
    Jul 02, 2014 @ 17:29
    sg
    0

    Hi Jan,

     

    I tried removing this but it did not help. Even if i don't do anything special for print, File-PrintPreview shows all urls for hyperlinks.

    If i look at your our.umbraco forum website and go to File->Print Preview, it shows the page exactly like it is on browser and does not show the "url's" to hyperlinked text. 

    Do you use any speical style sheet ( print css ) ?

    I am doing something wrong..can you please help?

    Thanks

    Shilpi

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 02, 2014 @ 17:32
    Jan Skovgaard
    0

    Hi SG

    Could you perhaps show a screendump of what you're seeing? Do you have the line that's commented out in the link you posted above uncommented?

    It must be in the stylesheet somewhere. Do you reference a special stylesheet on particular pages or is there an inline stylesheet on the page targeting print?

    /Jan

  • sg 33 posts 83 karma points
    Jul 02, 2014 @ 18:08
    sg
    0

    Hi i have these stylesheets listed in my masterpage. i have commented out the print.css.


    <link rel="stylesheet" href="/css/bootstrap.css">

    <link rel="stylesheet" href="/css/bootstrap-responsive.css">

    <link rel="stylesheet" href="/css/main.css">

    <link rel="stylesheet" href="/css/content-styles.css" type="text/css">

    <!--<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">-->

     

    Thanks

    Shilpi

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 02, 2014 @ 18:26
    Jan Skovgaard
    100

    Hi SG

    Ok, so it is what I though.

    In the bootstrap.css there is a media target for print as well. Have a look at this https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css - Press ctrl+f to search the file and search for print. On line 190 it says @media print{ and there is a bunch of styles inside this section that targets print. On line 202 you will see this block

      a[href]:after {
        content: " (" attr(href) ")";
      }
    

    This is why you keep seeing the link-text. You need to find this in your own copy of bootstrap.css and remove or tweak it so it fits your liking.

    If you don't want to have any print styles at all you need to remove the entire print target from bootstrap.css.

    Hope this helps.

    /Jan

  • sg 33 posts 83 karma points
    Jul 02, 2014 @ 18:30
    sg
    0

    Actually i just did a search and find and found the bootstrap.css also has the attr(href), and probably that is causing this problem during printing.

    But bootstrap.css is pretty standard css that is available. Which makes me wonder if that is the industry trend ( to spell out hyperlinks urls ) !!

     

    Thanks for your help.

  • sg 33 posts 83 karma points
    Jul 02, 2014 @ 18:33
    sg
    0

    Thanks Jan. You are the best!!

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 02, 2014 @ 18:34
    Jan Skovgaard
    0

    Hi SG

    In short: It's an industry standard when using frameworks and print stylesheets indeed. Eric Meyer (The godfather of CSS) once made a print stylesheet for alist a part where he used this trick. It became very popular and has been ever since so that's probably why people keep using it in all those frameworks.

    Remember to mark the topic as solved.

    /Jan

Please Sign in or register to post replies

Write your reply to:

Draft