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!
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Thomas March 16th
I’m probably not gonna use this feauture but I can see this be helpful to other people.
( )Nick March 16th
Sweet!
( )Raul Riera March 16th
A tutorial about doing this would be nice
( )kiziel March 17th
Lol!
( )Anton Agestam March 18th
css for printing (:
css for the screen
( )Anton Agestam March 18th
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…
Danilo March 19th
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.
( )Derek Herman March 16th
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.
( )little March 16th
nice!
( )Synook March 16th
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…
( )Derek Herman March 17th
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?
( )Hev March 16th
Great. I love that. It will make my printing & pdfs (I save them to pdfs for later printing) much smaller. Thanks.
( )techietim March 16th
The Digg button is also included when printing.
( )Raul Riera March 16th
@Derek,
Thank you, I will give that a try
( )John March 16th
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.
( )Derek Herman March 17th
The intro text was overlooked and is now fixed.
( )Furley March 16th
im surprised this is happening now
( )Derek Herman March 17th
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.
( )Dan Harper March 17th
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
The Mafalian March 17th
thank a lot its really usefull
( )Mike March 17th
A verry nice option. But I advise to change the font in the print stylesheet.
( )Times new Roman isn’t a good reading font.
Vincent D'Amico March 17th
You should show an example, of this in a pdf even if its just dumby text.
( )thomaswornall March 17th
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.
( )thomaswornall March 17th
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?
invisibleloop March 17th
Great for people who love using their yellow highlighter pen, but not great for the environment…
( )We are cool March 17th
Please think of all those pretty trees before printing these tutorials! (A)
( )Meshach March 17th
Good job envato.
( )michael March 17th
nice one.. i often print something .. you never know, when a site went down or a system crash kills everything
( )Evan Byrne March 17th
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.
( )Paul Morales March 17th
Nice, That makes things very convenient
Thanks
( )Jeraldo March 17th
Hey this is great. I hope you write a tutorial on how to do this kind of stuff! Thanks
( )Taylor Satula March 18th
I never thought to print it out. I think i might try that over Command-Tab
( )Bird Yoshikawa March 19th
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.
( )Chaos March 26th
Paper is always better
( )