Introduction: How to Enhance Your Instructables Using HTML

Instructables are an awesome way to share your knowledge and learn from others. Sometimes, a lot of text in an Instructablecan be intimidating, or an Instructable just doesn't look very interesting. To solve this, you can use HTML and CSS.

HTML is useful for organizing your instructable into sections (read more on Wikipedia).
This includes things like: lists, simple text formatting, links, tables, and much more.

CSS is used to make the HTML look appealing and easier to read (more info on Wikipedia).
This includes things like: spacing, color, font, alignment, backgrounds, and much more.

Thanks to theedisoneffect for suggesting the creation of this Instructable.

NOTE: Sorry mobile users, most of this stuff only works on a computer :-(

Step 1: What You'll Need

There is only one requirement for this instructable: an Instructables account.

There are a few ways to get a pro account:

Use this as encouragement to make an Instructable if you haven't already! =)

Step 2: Putting Code Into Your Instructable

The code box with the Arduino blink example sketch:

/*
  Blink
  Turns on an LED on for one second, then off for one second, repeatedly.
 
  This example code is in the public domain.
 */
 
// Pin 13 has an LED connected on most Arduino boards.
// give it a name:
int led = 13;

// the setup routine runs once when you press reset:
void setup() {                
  // initialize the digital pin as an output.
  pinMode(led, OUTPUT);     
}

// the loop routine runs over and over again forever:
void loop() {
  digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);               // wait for a second
  digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);               // wait for a second
}

This box is formatted using the pre tag to: keep whitespace as is, use the same font Arduino does, set the width to 600px, set the height to 300px, make the font size 11px, create a grey border, and create a light grey fill.

Code
<pre style="font-family:Monaco; width:600px; height:300px; font-size:11.0px; border:1.0px solid #6E6E6E; overflow-y:auto; background-color:#F2F2F2;">
PUT CODE HERE
NOTE: Remove the space between the "/" and the "pre" below
</ pre>

If the height is defined, a scrollbar will be created automatically if the code extends beyond the shaded area. Otherwise, the shaded area will wrap around all of the text, no matter how big or small.

Step 3: Tables

Tables are super useful as a materials organizer or to display data. HTML organizes tables using a variety of tags:

TagDescription
<table>
Table: Defines the beginning and end of a table
<tbody>
Table body: An optional tag to define the body of a table
<tr>
Table row: Creates a new row in the table
<th>
Table header: Defines the header of a column
<td>
Table data: Defines a normal cell

Example (with a bit of CSS to spice things up):

PartSource
2x 10KΩ resistorsSparkfun, RadioShack
2x 220Ω resistors

Sparkfun, RadioShack

2x 10-47µF capacitors

Sparkfun, RadioShack

2x LEDs

Sparkfun, RadioShack

2x PNP transistors

Sparkfun, RadioShack

~~ = This common part can be salvaged from almost anything

~~ = You can salvage this, or if it's bought, there will be leftovers

Code
<table border="1" style="border-color: rgb(189,189,189);border: 1.0px solid rgb(189,189,189);">
         <tbody>
            <tr>
               <th>Part</th>
               <th>Source</th>
            </tr>
            <tr>
               <td style="background-color: rgb(212,255,215);">2x 10KΩ resistors</td>
               <td><a href="https://www.sparkfun.com/products/10969" rel="nofollow">Sparkfun</a>, <a href="http://www.radioshack.com/product/index.jsp?productId=2062330" rel="nofollow">RadioShack</a></td>
            </tr>
            <tr>
               <td style="background-color: rgb(212,255,215);">2x 220Ω resistors</td>
               <td>
                  <p><a href="https://www.sparkfun.com/products/10969" rel="nofollow">Sparkfun</a>, <a href="http://www.radioshack.com/product/index.jsp?productId=2062317" rel="nofollow">RadioShack</a></p>
               </td>
            </tr>
            <tr>
               <td style="background-color: rgb(231,222,255);">2x 10-47µF capacitors</td>
               <td>
                  <p><a href="https://www.sparkfun.com/products/523" rel="nofollow">Sparkfun</a>, <a href="http://www.radioshack.com/product/index.jsp?productId=12448323" rel="nofollow">RadioShack</a></p>
               </td>
            </tr>
            <tr>
               <td style="background-color: rgb(231,222,255);">2x LEDs</td>
               <td>
                  <p><a href="https://www.sparkfun.com/products/10969" rel="nofollow">Sparkfun</a>, <a href="http://www.radioshack.com/product/index.jsp?productId=12611319" rel="nofollow">RadioShack</a></p>
               </td>
            </tr>
            <tr>
               <td>2x PNP transistors</td>
               <td>
                  <p><a href="https://www.sparkfun.com/products/522" rel="nofollow">Sparkfun</a>, <a href="http://www.radioshack.com/product/index.jsp?productId=2062585" rel="nofollow">RadioShack</a></p>
               </td>
            </tr>
         </tbody>
      </table>

Step 4: Forms

Surprisingly, Instructables lets you integrate a form into your Instructable. If you know a server scripting language like PHP or ASP, you can make a form to get information back from your readers (besides comments of course!).

This is a form made by w3schools that returns the input:

Do you like Instructables.com?

Code
<form action="http://www.w3schools.com/tags/demo_form.asp" id="Do_you_like_the_Instructables">Do you like Instructables.com?         
<select name="Do_you_like_Instructables">    
<option value="Oh_Yeah">I love it!       
<option value="Yes">Yes    
<option value="Maybe">Maybe    
<option value="How_can_you_not_like_Instructables">No</select>
<p><button type="submit">Submit</button></p></form>

Step 5: Linking Between Steps

In HTML, there is something called an anchor, which is a link that scrolls to a certain element on the screen. It searches the document for the ID you are looking for and scrolls to it for you!

InputOutput
<p id="hello">This is a paragraph with the id "hello."</p>

This is a paragraph with the id "hello."

<a href="#hello" rel="nofollow">This link sends you to "#hello"</a>
This link sends you to "#hello"

Note: Instructables' menu bar cuts off the top 100px of the page.

The most practical use for an anchor is to reference other steps within your (or someone else's) Instructable:

This scrolls to "#comment-list"

This scrolls to "#step10" of my Fingerprint Scanning Garage Door Opener Instructable

Step 6: Organize Substeps

The fieldset tag is a great way to organize anything from materials to creating a code section at the bottom of a step.

For example:

Materials
  • Arduino
  • Resistors
  • LEDs
  • Etc.
Tools
  • Pliers
  • Duct tape
  • Soldering iron
  • Etc.
Code
//Code by Nodcah

void setup(){
    Serial.begin(9600);
}
void loop(){
    Serial.println("Code");
    delay(100);
}
< /pre><fieldset>                
<legend>Code</legend><pre style="font-size: 11.0px;width: 600.0px;height: 300.0px;border: 1.0px dotted black;"><fieldset>
	<legend><strong>Materials</strong></legend>
	<ul class="curly">
	<li>Arduino</li><li>Resistors</li><li>LEDs</li><li>Etc.</li></ul>
</fieldset>
<fieldset>
	<legend><strong>Tools</strong></legend>
	<ul class="curly">
	<li>Pliers</li><li>Duct tape</li><li>Soldering iron</li><li>Etc.</li></ul>
</fieldset>
<fieldset>
	<legend><strong>Code</strong></legend>
	<pre style="font-size: 11.0px;width: 600.0px;border: 1.0px dotted black;">//Code by Nodcah

void setup(){
    Serial.begin(9600);
}
void loop(){
    Serial.println("Code");
    delay(100);
}
< /pre></fieldset>

Step 7: Using the Premade Stylesheets or Bootstrap

There are many preformatted classes you are allowed to use on Instructables.com's stylesheets (here) or anything from Bootstrap v2.3.2 (documentation here).

Some of the useful classes:

Class NameUseExample
btnStyle text as a buttonButton
img-polaroidPolaroid image
calloutTo comment on something. I can't think of another use for this, but there are definitely moreText

More text

How to define a class in HTML:

<p class="CLASSNAME">Styled text goes here</p>

Additionally, there is an added font for you to use:

Name of FontHow to use it
Complete In Him Pro
<p style="font-family:CompleteInHimPro;">Complete In Him Pro</p>

Step 8: HTML Gauge

If you've ever needed a gauge to show difficulty, cost, some sort of data, etc., this is what you're looking for!

Difficulty: easy..

Code
<p>Difficulty:  
<b style="background-color: grey;color: grey;border: 1.0px solid black;">e</b> 
<b style="background-color: grey;color: grey;border: 1.0px solid black;">a</b> 
<b style="background-color: white;color: white;border: 1.0px solid black;">s</b> 
<b style="background-color: white;color: white;border: 1.0px solid black;">y</b> 
<b style="background-color: white;color: white;border: 1.0px solid black;">..</b></p>

Step 9: List of Supported HTML Tags

HTML has many tags, but only a few are allowed to be used in an Instructable. I have done my best to show all of the useful supported tags below, but if I missed any, be sure to let me know!

Input TagOutput
<button>
<img>
Robot
<samp>
Sample computer output
<font>
Warning: "Font" is an outdated tag
But, this is the only way to color text on mobile
<fieldset>
See step 6
<form>,<select>,<option>
See step 4
<pre>
See step 2 for a possible use
<a href="URL">
A link to my last Instructable See step 5 for another use
<sup>
Normal text This text is superscripted
<sub>
Normal text This text is subscripted
<strong> or <b>
Normal text This text is strong (bolded)
<em> or <i>
Normal text This text is emphasized (italicized)
<u>
Normal text This text is underlined
<blockquote>
Normal text
This text is in a blockquote
<h1>, <h2>, ..., <h6>

h1

h6
<code>
This can be used to show code (see step 2 for another way)
<ul>
  • Unordered list item 1
  • Unordered list item 2
<ol>
  1. Ordered list item 1
  2. Ordered list item 2
<table>, <tr>, <th>, <td>
See step 3
<hr>
Some text above the horizontal rule
Some text below the horizontal rule
<span>
This can be used to style something or apply a class to text. But, a class must be defined (it can be one that doesn't exist yet)

For more information about the tags you should check out w3schools. This gives information about all of the HTML tags and how to use them.

Step 10: Styling With CSS

CSS is where stuff gets cool! You can do A LOT of different things with CSS, with only a very few being listed here.

CSS CodeExampleDescription and Notes
cursor:move;

This text is styled

Changes the cursor's look
color:red;

This text is styled

Changes the color of text
Check out this page for predefined color names
font-size:1.2em;

This text is styled

Sets the size of text
Can be used in these formats
font-family:Lucida Console;

This text is styled

Determines the font of text
Click here for more fonts
height:120px; width:120px;

This text is styled

Defines the dimensions of the element
(background is outlined in black)
padding:5px;

This text is styled

Leaves space around an element
(background is outlined in black)
overflow:auto; height: 10px;

This text is styled

Creates a scrollbar if the text extends beyond the defined height and/or width
border:2px solid grey;

This text is styled

Creates a border
More info about the border property here
background-color:#C6D7DE;

This text is styled

Changes the background color
text-align:center;

This text is styled

Aligns the text to the right, center, or left
text-decoration:underline;

This text is styled

Underlines or overlines text
text-shadow:2px 2px 1px red;

This text is styled

Creates a shadow based on the text
More info on the text-shadow property here
font-variant: small-caps;

This text is styled

Makes every character uppercase, but smaller.

Using inline CSS:

<p style="CSS_CODE_HERE">Styled text here</p>

Step 11: Example Instructable

This mini Instructable uses a few of the items you have learned. The steps are separated using multiple fieldset tags. The pictures are inserted using the img tag.

Make a Blinky Circuit

This simple circuit blinks two LEDs.

Difficulty:easy..You need to be able to read a schematic

Step 1: Materials

To make this circuit, you'll need a few components:

PartSource (pictures are clickable!)
2x 10KΩ resistorsSparkfunRadioshack
2x 220Ω resistors

SparkfunRadioshack

2x 10-47µF capacitors

SparkfunRadioshack

2x LEDs

SparkfunRadioshack

2x PNP transistors

SparkfunRadioshack

~~ = This common part can be salvaged from almost anything

~~ = You can salvage this, or if it's bought, there will be leftovers

Tools:

  • Breadboard
  • 3.5-5.5V power supply
  • Jumper wires
Step 2: The Circuit

The circuit consists of resistors, capacitors, and LEDs. The 10KΩ resistors and the capacitors do the job of keeping a steady pace, while the transistors are responsible for turning the LED on/off.

See step 1 for a list of materials required for this circuit.

Step 3: Hooking it Up

Connect all of the components as seen in the schematic and watch it blink away! =)

Step 12: Conclusion and References

Learning everything in this Instructable at once is almost impossible. This was created to inspire the use of HTML/CSS in your Instructable, and as a reference if you do use them.

Because there is so much to cover, I may have missed something or didn't explain something very well, so please ask questions or leave feedback!

References:


Thanks for reading! =D

Comments

author
rickyeatough made it! (author)2014-08-28

Hey Noah,

AWESOME Instructable! Gonna definitely use it in my next instructable!

Just wondering, but I noticed the background on both this instructable, and your me page changes colourwhen you hover over it?! How do you do that???

Keep up the great work :D

- Ricky

author
nodcah made it! (author)nodcah2014-08-28
Great question! =)

-First, you will need someone to comment on the Instructable you want to change (or your Orangeboard).
-Next, go to your backtalk page and click reply next to the comment.
-Through this reply you can click on "rich editor", then source.
-Finally use a style tag to write in CSS.

My CSS:

body:hover {
	background-color: rgb(198,203,222);
	cursor: wait;
}
*.txt.step-body:hover {
	font-family: Georgia;
}
author
bergerab made it! (author)bergerab2014-10-01

Wow thanks for the tip. I too was wondering how you changed your orangeboard. How did you even figure out how to find all of that??

author
nodcah made it! (author)nodcah2014-10-01

It was integrated automatically using the old editor, so when I saw the old editor on the balktalk page, I was like "Hey! I can use a style element in this!" =D

author
Jonathanrjpereira made it! (author)2016-11-26

Does the Instructables Editor also support CSS?

author
nodcah made it! (author)nodcah2016-11-26

It doesn't support the <style> tag, but some inline css is allowed, as seen in step 10.

Also, as seen in step 7, you can search through the pre-made classes with the style you want and use that.

Hope this helped!!

author
Diego0101 made it! (author)2016-02-07

Does anybody knows how to strikethrough text?, html editor doesn't seems to work with <del> , nor <s>.

author
nodcah made it! (author)nodcah2016-07-28

Using < s >
Test

Using style="text-decoration:line-through;"
Test

author
Diego0101 made it! (author)Diego01012016-07-29

Thanks, i´ll check it later

author
bravoechonovember1 made it! (author)2016-04-14

I come here before I publish anything Awesome instructable!

author
nodcah made it! (author)nodcah2016-07-28

Thanks!

author
Jonathanrjpereira made it! (author)2015-10-24

https://www.instructables.com/id/TWIST-DIY-Tweeting-Weather-Station/

I used this Instructable to make a table,attach files & photos too. Thanks a lot.

Screen Shot 2015-10-24 at 6.49.13 pm.png
author
Jonathanrjpereira made it! (author)2015-10-02

Is there a way that i can make a coloured rectangular box with text in it?

author
nodcah made it! (author)nodcah2015-10-12
I'm a styled 
pre tag. I also 
preserve whitespace.
Code:
<pre style="background-color: #CCF;">CONTENT</pre>
author
nancyjohns made it! (author)2015-05-11

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓███▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓█▓▓██▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓█▒▒███▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓███▒▒█▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓███▒▒█▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓██▒░▒█▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓█▓░▒▒█▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓█▓▒▒▒█▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓█▓▒▒▒██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓█▓▒▒▒▒██▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▓█▓▒▒▒▒▒██████████████████████▓▒▒▒
▒▓█▓▒▒▒▒▒▒▒▓█████████████████████▒▒
▒▓█▓▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░░░░. ▓█▓▒
▒▓█▓▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓███▒▒
▒▓█▓▒▒▒▒▒▒▒▒▒▒▒▓█████████████████▒▒
▒▓█▓▒▒▒▒▒▒▒▒▒▒▒██░░░░░░░░░░░░░░▓█▓▒
▒▓█▓▒▒▒▒▒▒▒▒▒▒▒▓█▓▓▓▓▓▓▓▓▓▓▓▓▓▓██▒▒
▒▓█▓▒▒▒▒▒▒▒▒▒▒▒▒█████████████████▒▒
▒▓█▓▒▒▒▒▒▒▒▒▒▒▒██░░░░░░░░░░░░░░▓█▓▒
▒▓█▓▒▒▒▒▒▒▒▒▒▒▒▓█▓▒▓▓▓▓▓▓▓▓▓▓▓▓██▒▒
▒▒██▒▒▒▒▒▒▒▒▒▒▒▒█████████████████▒▒
▒▒▓██▒▒▒▒▒▒▒▒▒▒██▒░▒▒▒▒▒▒▒▒▒▒░░▓█▓▒
▒▒▒▓███▓▓▓▓▓▓▓▒██▓▒▓▓▓▓▓▓▓▓▓▒▒▒██▓▒

▒▒▒▒▒▓██████████████████████████▒▒▒

author
nodcah made it! (author)nodcah2015-05-12

Haha thanks!

author
KDN Technical made it! (author)2015-04-21

<b>no html allowed</b>

author
nodcah made it! (author)nodcah2015-04-21

HTML in comments doesn't work under most circumstances. And you'll need a pro account to style instructables, as mentioned in step 1

author
KDN Technical made it! (author)2015-04-21

<html><a href="www.kdnit.com">This site</a></html>

clearly this site does not allow html as proven above

author
EvolvedAwesome made it! (author)2015-04-15

Probably one of the greatest and most useful ibles on the site!

author
nodcah made it! (author)nodcah2015-04-15

Thank you so much :-D

author
malika.zarah made it! (author)2015-04-05

Please guide me how can i minifi css and script form my website that are using so much resources
My Site is fullfreeversion.com

author
nodcah made it! (author)nodcah2015-04-06

Sorry but, tbh, I stink at making stuff efficient. I glanced at it and noticed you weren't using the Gravitar anywhere even though the script and CSS were loading. Sorry I can't be much of a help

author
rkchandigarh made it! (author)2015-01-16

Good Article. click here for awesome html tricks http://www.htmlhour.com/html-tricks/

author
Jonathanrjpereira made it! (author)2014-11-20

how did you make step 3: Hooking it up. Wherein the image changes??

author
nodcah made it! (author)nodcah2014-11-20

It's actually a GIF! The img tag supports many different types of files, one of which is the animated GIF.

author
brmarcum made it! (author)2014-11-11

Hey nodcah. I'm trying to get Lucida Console font in the middle of a line. I only see how to make a paragraph in that font using something like

<p style="font-family:Lucida Console;">for()</p>

How can I get the text in the middle of a line to be a certain font, but not the entire paragraph?

author
nodcah made it! (author)nodcah2014-11-11

You can put it in a < span > tag. A span doesn't affect the outcome of the page, making it perfect for styling!

author
brmarcum made it! (author)brmarcum2014-11-11

<span style="font-family:Lucida Console;">for()</span>

Works perfectly! Thank you!

author
Will_W_76 made it! (author)2014-10-16

Is there a way to change the color of certain text fragments within a code block? For example, I want my comments to show up in green like they do in my IDE.

author
nodcah made it! (author)nodcah2014-10-16

Your IDE might have an "copy as HTML", like Arduino, but if it doesn't, you can try http://tohtml.com/.

author
Jack Moran made it! (author)2014-10-07

Hey Noah, just finished an Instructable that used some of your tips, Thanks so much for the tips, it makes Instructables go that little bit further =)

Check it here https://www.instructables.com/id/Custom-Leather-Archer-Glove/

author
Jack Moran made it! (author)2014-10-05

Love the hidden word in step 8. Must make Instructables soo much more interesting.....

author
nodcah made it! (author)nodcah2014-10-05

Nice catch! I didn't know if anyone would see that! =D

author
brmarcum made it! (author)2014-09-23

Is it possible to insert two tables side by side, instead of top to bottom?

author
nodcah made it! (author)nodcah2014-09-23

Absolutely! The easiest way I can think of doing it is to put the two tables inside another invisible table like this (this also might be the most compatible with browsers). Technically, you shouldn't use a table for formating, but whatever... XD

author
brmarcum made it! (author)brmarcum2014-09-23

Excellent, thanks so much. Who cares what the code looks like as long as it works, right? Haha

author
brmarcum made it! (author)2014-09-23

I think Step 6 has an issue between what is displayed and the example code. If I'm reading the code right, you want two lists, one for Materials and the other for Tools. There is only the one list for Materials and everything is in that list.

author
nodcah made it! (author)nodcah2014-09-23

Great catch! Thanks for that! =)

author
bergerab made it! (author)2014-09-09

Wow, what an under appreciated instructable! Only 5k views?! This is such a great resource. I can't believe the knowledge you have a such a young age and I can't wait to see what projects you'll have in the future. (btw I've got a question that i'm going to PM you about). Thanks for sharing your knowledge!

author
aldricnegrier made it! (author)2014-08-18

Wow, great stuff ;) you got my vote!

<table border="1">

<tr>

<td>

post message test

</tr>

</td>

</table>

author
nodcah made it! (author)nodcah2014-08-18
To use html in a comment, you actually need to go to your backtalk page.
Like this:
Hey!
I'm in a table
It doesn't allow CSS though...
author
Sorunome made it! (author)Sorunome2014-09-07

Of course it allows CSS, you just have to hack the rich editor into your comments.

The backtalk has the 'rich editor' button for that, or I also wrote some script over here that, if enabled, does it for you on normal comments.

author
nodcah made it! (author)nodcah2014-09-07

Awesome stuff! I've seen your script before, but I haven't realized the full potential of it until now (after using it for a bit)!

Also, here is the display:inline-block; div (thanks for telling me about that):

 
author
Sorunome made it! (author)Sorunome2014-09-08

also, to override the guy who did the other cursor you do

#omni {

cursor:default !important;

}

author
nodcah made it! (author)nodcah2014-09-08

Yeeeaaahhh...  That was me... I must have been pretty tired... Thanks for the fix though! =)

author
Sorunome made it! (author)Sorunome2014-09-08

But night time is best programming time :P

author
Sorunome made it! (author)Sorunome2014-09-08

Yay, glad you like it!

One of my fav features about it is the inline-editor where you just have to double-click text in your 'ibles to be able to edit it ^.^

author
aldricnegrier made it! (author)aldricnegrier2014-08-18









awesome, very cool :)

thanks for the great tip, and awsome instructable

i will definitely be using html and css tags on my future indestructibles and reedit some of my old ones.
author
Sorunome made it! (author)2014-09-07

you could do an empty div with display:inline-block; and set it a width in pixels instead of doing ~~ for the color indicators, is cleaner ;)

About This Instructable

10,348views

227favorites

Bio: I am a freshman in college studying computer engineering and an alumn of a FIRST robotics team. I also love to tinker on my own ... More »
More by nodcah:Turn Your Entire Phone into a TouchscreenDIY Glowing BraceletFix Any Video Game Controller
Add instructable to: