Tuts+ is Now Print-tastic!

on Mar 16th 2009 with 34 comments

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

Rollover to read this author's bio or click through to see a full list of posts by this author.

Skellie is Tuts+ Manager. She makes sure all the Tuts+ sites are awesome. You can follow her/the Tuts+ Network on Twitter via @tutsplus.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Thomas

    I’m probably not gonna use this feauture but I can see this be helpful to other people.

  • http://elitenick.com Nick

    Sweet! :)

  • http://www.hipervinculo.net Raul Riera

    A tutorial about doing this would be nice :)

    • http://themeforest.net/user/kiziel kiziel

      Lol!

    • http://www.antonagestam.se/ Anton Agestam

      css for printing (:

      css for the screen :)

      • http://www.antonagestam.se/ Anton Agestam

        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

      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.

  • http://valendesigns.com Derek Herman

    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.

  • http://yeqing.woxihuanni.com little

    nice!

  • http://www.aspektas.com/ Synook

    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…

    • http://valendesigns.com Derek Herman

      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?

  • http://blog.tigerwhispers.com Hev

    Great. I love that. It will make my printing & pdfs (I save them to pdfs for later printing) much smaller. Thanks.

  • http://techietim.ca/ techietim

    The Digg button is also included when printing.

  • http://www.hipervinculo.net Raul Riera

    @Derek,

    Thank you, I will give that a try

  • http://john010117.com/ John

    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.

    • http://valendesigns.com Derek Herman

      The intro text was overlooked and is now fixed.

  • http://twitter.com/furley Furley

    im surprised this is happening now

    • http://valendesigns.com Derek Herman

      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.

  • http://danharper.me Dan Harper

    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

    thank a lot its really usefull

  • Mike

    A verry nice option. But I advise to change the font in the print stylesheet.
    Times new Roman isn’t a good reading font.

  • http://www.endyoursearch.com Vincent D’Amico

    You should show an example, of this in a pdf even if its just dumby text.

  • http://www.thomaswornall.com/ thomaswornall

    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.

  • http://www.thomaswornall.com/ thomaswornall

    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

    Great for people who love using their yellow highlighter pen, but not great for the environment…

  • http://www.wearecool.org We are cool

    Please think of all those pretty trees before printing these tutorials! (A)

  • Meshach

    Good job envato.

  • http://www.zitrox.com michael

    nice one.. i often print something .. you never know, when a site went down or a system crash kills everything ;)

  • http://www.evanbot.com Evan Byrne

    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. :-P

  • http://www.makemoneyonline-guide.com Paul Morales

    Nice, That makes things very convenient :) Thanks

  • Jeraldo

    Hey this is great. I hope you write a tutorial on how to do this kind of stuff! Thanks

  • http://satula.co.cc/ Taylor Satula

    I never thought to print it out. I think i might try that over Command-Tab

  • Bird Yoshikawa

    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

    Paper is always better :)