{"id":4967,"date":"2009-12-08T07:06:07","date_gmt":"2009-12-08T14:06:07","guid":{"rendered":"http:\/\/css-tricks.com\/?p=4967"},"modified":"2017-12-18T08:16:48","modified_gmt":"2017-12-18T15:16:48","slug":"editable-invoice-v2","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/editable-invoice-v2\/","title":{"rendered":"Editable\/Printable Invoice, Version 2"},"content":{"rendered":"<p>I knew as soon as I released the previous version of the Editable Invoice that using some JavaScript to spiff it up would be a good idea. I was thinking of doing a screencast on it perhaps, but then multiple people stepped up and starting doing it themselves! Everyone did a great job, but ultimately the version I&#8217;m releasing as version 2 is by Vinh Pham.<\/p>\n<p><!--more--><\/p>\n<p>New features:<\/p>\n<ul>\n<li>Inserts todays date automatically<\/li>\n<li>Few extra things are editable, like &#8220;invoice&#8221; title and &#8220;terms&#8221;<\/li>\n<li><strong>Does the math automatically<\/strong> when you change quantities and amounts<\/li>\n<li>Add and remove rows of items<\/li>\n<li>Edit the logo by providing a URL path to a new logo<\/li>\n<li>Rollover colors for the textareas to indicate editability<\/li>\n<li>Print stylesheet to eliminate extra functionality bits from printing<\/li>\n<\/ul>\n<p><a href=\"https:\/\/css-tricks.com\/examples\/EditableInvoice\/\" class=\"button\">View Demo<\/a> &nbsp; <a href=\"https:\/\/css-tricks.com\/examples\/EditableInvoice.zip\" class=\"button\">Download Files<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I knew as soon as I released the previous version of the Editable Invoice that using some JavaScript to spiff it up would be a good idea. I was thinking of doing a screencast on it perhaps, but then multiple people stepped up and starting doing it themselves! Everyone did a great job, but ultimately [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":4865,"url":"https:\/\/css-tricks.com\/html-invoice\/","url_meta":{"origin":4967,"position":0},"title":"Make an Editable\/Printable HTML Invoice","date":"December 1, 2009","format":false,"excerpt":"I always like how in FreshBooks to edit invoices you literally just click and interact directly with a web page that looks like an invoice. I got to thinking it would be a kinda cool idea to create an editable HTML invoice of my own. This of course can't do\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/click-edit-print.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305081,"url":"https:\/\/css-tricks.com\/a-few-background-patterns-sites\/","url_meta":{"origin":4967,"position":1},"title":"A Few Background Patterns Sites","date":"March 18, 2020","format":false,"excerpt":"If I need a quick background pattern to spruce something up, I often think of the CSS3 Patterns Gallery. Some of those are pretty intense but remember they are easily editable because they are just CSS. That means you could take these bold zags and chill them out. CodePen Embed\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/chevron-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2979,"url":"https:\/\/css-tricks.com\/the-light-cms-trend\/","url_meta":{"origin":4967,"position":2},"title":"The &#8220;Light&#8221; CMS Trend","date":"June 29, 2009","format":false,"excerpt":"CMSs are beautiful things. Just as CSS allows us to abstract the design away from the markup, a CMS allows us to use a database to abstract the content away from the markup. There are a zillion of them, each with different backend UI's and different ways to doing things.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/light-unify.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305240,"url":"https:\/\/css-tricks.com\/creating-an-editable-site-with-google-sheets-and-eleventy\/","url_meta":{"origin":4967,"position":3},"title":"Creating an Editable Site with Google Sheets and Eleventy","date":"March 27, 2020","format":false,"excerpt":"Remember Tabletop.js? We just covered it a little bit ago in this same exact context: building editable websites. It\u2019s a tool that turns a Google Sheet into an API, that you as a developer can hit for data when building a website. In that last article, we used that API\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/11ty-sheets.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":237832,"url":"https:\/\/css-tricks.com\/building-a-jekyll-site-part-2-of-3\/","url_meta":{"origin":4967,"position":4},"title":"Building a Jekyll Site \u2013 Part 2 of 3: Adding a Jekyll CMS with CloudCannon","date":"February 10, 2016","format":false,"excerpt":"The following is a sponsored guest post by Mike Neumegen from CloudCannon. This series is all about not only building a Jekyll site but then adding simple editability through CloudCannon. Article Series: Converting a Static Website To Jekyll Adding a Jekyll CMS with CloudCannon (You are here!) Creating a Firebase-Backed\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6192,"url":"https:\/\/css-tricks.com\/gift-message-printer\/","url_meta":{"origin":4967,"position":5},"title":"Gift Message Printer","date":"April 19, 2010","format":false,"excerpt":"We have a client who sells a product in which customers specify a gift message when they check out. The site has been very successful for them and orders are coming faster than expected. The have been hand-writing the notes thus far, which, in nerd words, doesn't scale well. When\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/examplegiftnote.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4967"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=4967"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4967\/revisions"}],"predecessor-version":[{"id":263997,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4967\/revisions\/263997"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=4967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=4967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=4967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}