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:
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?
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.
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).
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.
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 ) ?
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?
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.
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.
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
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
So should i remove the link to print.css?
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
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.
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
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
Hi Sg
Ok, then you should try removing the line where it says content: "("attr(href)")"; from the code block beneath.
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
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
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
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
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
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
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.
Thanks Jan. You are the best!!
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
is working on a reply...