Those of you who like to follow tutorials on paper while you code will be pleasantly surprised today: we’ve added a print stylesheet to the Tuts+ theme. This means that if you navigate to a tutorial and click File > Print in your browser menu-bar the final product will be free of all the extra stuff (sidebars, comments, and so on). We hope you enjoy the new feature and encourage you to try it out!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Skellie
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Breezi Comming Soon page - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I’m probably not gonna use this feauture but I can see this be helpful to other people.
Sweet!
A tutorial about doing this would be nice
Lol!
css for printing (:
css for the screen
Wooops! I wrote some html code and it obviously disapeared… You guys should use htmlentites() instead of whatever you use!
Sorry for the double entry…
http://www.alistapart.com/articles/goingtoprint/
The article is quite old already, but still the ultimate guide in my opinion. Makes you really understand what needs to be done.
I created the print.css for all the sites and it really is all about making things like the navigation and sidebar disappear using display: none; and then playing with the header sizes and what not. There is not a lot too it and it would be a very short tut.
You could always just looking at the print.css file and see how things are hidden in there.
nice!
This is good… but why is the login box still appearing in the print style? I understand about the TUTS+ advert, but you can’t type on paper…
Tuts+ sites do not have login forms except for tutsplus.com and why would you print that site, what is the URL of the page you’re talking about?
Great. I love that. It will make my printing & pdfs (I save them to pdfs for later printing) much smaller. Thanks.
The Digg button is also included when printing.
@Derek,
Thank you, I will give that a try
People still print stuff?
All joking aside, you ought to show the introductory text in the print stylesheet. I hit print preview in Firefox 3, and only the heading shows, which is pretty useless, if you ask me.
Other than that, good work on it – I’m sure it’ll save some paper by not having a separate page for the sidebar and stuff like that.
The intro text was overlooked and is now fixed.
im surprised this is happening now
There was another print.css previous to this one, but it was causing weird things to happen and with so much development happening at once, it got put on the back burner and forgotten sadly.
I actually feel quite stupid now. I’ve always found it difficult following a tutorial as I only have one screen; never even thought of printing them!
Going to try it out later today, thanks
thank a lot its really usefull
A verry nice option. But I advise to change the font in the print stylesheet.
Times new Roman isn’t a good reading font.
You should show an example, of this in a pdf even if its just dumby text.
YAY easy pdf printing! however i disagree on not having the comments print some times there are code corrections to be found in them or something better explained or links to different examples others have done. it isn’t always “wow what a great tut!” Let me decide if i want the comments by setting number of pages to print. just my humble opinion.
2 other small things
1:”view plain” “copy” “print” and “?” are showing up.
2: and probably the thing i care more about. outside of the numbering the code doesn’t stand out. maybe a shade of gray and/or different size font?
Great for people who love using their yellow highlighter pen, but not great for the environment…
Please think of all those pretty trees before printing these tutorials! (A)
Good job envato.
nice one.. i often print something .. you never know, when a site went down or a system crash kills everything
Yippie! Wait a second, isn’t this something you would just expect to be done?
I shouldn’t be the one to talk though, my personal website doesn’t have a print stylesheet… Yet.
Nice, That makes things very convenient
Thanks
Hey this is great. I hope you write a tutorial on how to do this kind of stuff! Thanks
I never thought to print it out. I think i might try that over Command-Tab
I have a two 2-hour train rides everyday, and no laptop (I have an elaborate desktop setup and no extra cash). This function is VERY helpful. Sorry to the tree huggers. As for printing the comments, I’m not sure if thomaswornall tried to print from this website before – I understand your point, but it’s literally 5 pages of content and 42 pages of comments. You really never ever want to print the comments.
Again, VERY useful, and thank you.
Paper is always better