loading
The instructables admin really deserve an extra dimension of respect... they have elected to keep their site open thus bringing functionality to a whole new level. ***This feature has since been removed for completely rational and understandable reasons (see below)***

Before you flame on - I really don't care what you think. The purpose of this instructable is to seek out new functionality by utilizing the triple curly bracket "tag" -- {{{

Simply place an open and close triple curly bracket on separate lines and include whatever html, javascript and likely more inside (but not on the same line as the brackets).

Rules... Post the code without the brackets -- then post the code with the brackets to display. Should you find something amazingly great - I will add a step to the topic. Do explore areas that have not been tapped (I'm curious if CSS will work).

<table width="300px" border="0"><tr><td><font color="red" size="6">Should you have something that you <br>suspect will cause trouble (popups, <br>alerts, etc. etc.) PLEASE post it <br>under one of the steps  labeled<br> "suspect code".<br><br> Also, do use common <br>sense -- making a request to the <br>database IMO is a no-no. <br>We don&apos;t want this feature taken down <br>due to user stupidity.</font></td></tr></table>

Step 1: External Image With Padding (simple Example)

<table style="border:1px solid orange;color:white;font-family:arial;" bgcolor=#000000>
<tr>
<td><img hspace="10" vspace="10" style="border:1px solid white;" src="http://i11.photobucket.com/albums/a166/Trebuchet03/P1020697Small.jpg"></td>
</tr>
<tr>
<td>Mystery Machine: Spotted near Tampa July 3rd, 2006</td>
</tr>
</table>

Should display a table containing an image with white borders and 10px padding all around. Text should be white and the table should have an orange border.

<table style="border:2px solid orange;color:white;font-family:arial;" bgcolor=#000000>  <tr>    <td><img hspace="10" vspace="10" style="border:1px solid white;" src="http://i11.photobucket.com/albums/a166/Trebuchet03/P1020697Small.jpg"></td>  </tr>  <tr>    <td>Mystery Machine: Spotted near Tampa July 3rd, 2006</td>  </tr></table>

Step 2: Suspect Code 1

...

Step 3: Suspect Code 10


Step 4: Image Overlay

<div style="position: absolute; left: 0px; top: 0px; height: 86px; width: 333px; "><img src="http://i11.photobucket.com/albums/a166/Trebuchet03/constuctables.gif" ></div>

<div style="position: absolute; left: 0px; top: 0px; height: 86px; width: 333px; "><img src="http://i11.photobucket.com/albums/a166/Trebuchet03/constuctables.gif" ></div>
&lt;div style=&quot;position: absolute; left: 0px; top: 0px; height: 86px; width: 333px; &quot;&gt;&lt;img src=&quot;http://i11.photobucket.com/albums/a166/Trebuchet03/constuctables.gif&quot; &gt;&lt;/div&gt;<br/><br/>&lt;div style=&quot;position: absolute; left: 0px; top: 0px; height: 86px; width: 333px; &quot;&gt;&lt;img src=&quot;http://i11.photobucket.com/albums/a166/Trebuchet03/constuctables.gif&quot; &gt;&lt;/div&gt;<br/><br/>This should change the instructables logo<br/>
&lt;table width=&quot;300px&quot; border=&quot;0&quot;&gt;&lt;tr&gt;&lt;td&gt;<br/>&lt;font color=&quot;red&quot; size=&quot;6&quot;&gt;Should you have something that you &lt;br&gt;suspect will cause trouble (popups, &lt;br&gt;alerts, etc. etc.) PLEASE post it &lt;br&gt;under one of the steps labeled&lt;br&gt; &quot;suspect code&quot;.&lt;br&gt;&lt;br&gt;<br/> Also, do use common &lt;br&gt;sense -- making a request to the &lt;br&gt;database IMO is a no-no. &lt;br&gt;We don't want this feature taken down &lt;br&gt;due to user stupidity.<br/>&lt;/font&gt;<br/>&lt;/td&gt;<br/>&lt;/tr&gt;<br/>&lt;/table&gt;<br/>
&lt;script language= text/vbscript&gt;<br/> x=msgbox(&quot;Hi!&quot;,16, &quot;Hi&quot;)<br/>&lt;/script&gt;<br/>
whats it do
table width=&quot;300px&quot; border=&quot;0&quot;&gt;&lt;tr&gt;&lt;td&gt;<br/>&lt;font color=&quot;red&quot; size=&quot;6&quot;&gt;Should you have something that you &lt;br&gt;suspect will cause trouble (popups, &lt;br&gt;alerts, etc. etc.) PLEASE post it &lt;br&gt;under one of the steps labeled&lt;br&gt; &quot;suspect code&quot;.&lt;br&gt;&lt;br&gt;<br/> Also, do use common &lt;br&gt;sense -- making a request to the &lt;br&gt;database IMO is a no-no. &lt;br&gt;We don't want this feature taken down &lt;br&gt;due to user stupidity.<br/>&lt;/font&gt;<br/>&lt;/td&gt;<br/>&lt;/tr&gt;<br/>&lt;/table&gt;<br/>
After some deliberation with <a rel="nofollow" href="https://www.instructables.com/member/ryan/">Ryan</a>, we determined that: 1) the triple curly brace was actually a bug we didn't mean to include, 2) there was too much risk letting people include whatever code they wanted. Particularly, we were worried about privacy issues with letting any old code run on what we hope is a trusted site.<br/><br/>I really appreciate and share your desire to find new functionality. We've made a <a rel="nofollow" href="https://www.instructables.com/id/EWK8B1LOVQEPH67PEP/">video function</a> that will allow you embed Yahoo! and YouTube videos, and I look forward to working with you (this means everyone!) to build the new functionality you want. <br/>
If you want an example of user includes, look at myspace. They use so much crap preprocessor code to filter out potentially hazardous code that the load time sucks and it source is nasty.
completely understandable (which is why I sent that eMail the other day) ;) Hehe... now I can see my rushed "red text" gunk up there :P But hey, it was late and I wanted to push this :P --- Out of curiosity.... will instructables ever become an open source?
very bueno. i see you changed my stuff so it still plays, thanks. i am not sure but it seems video instructables may not become the norm because of editing issues (retakes, Freudian slips, ect.)however, i hope to see some more role out. thank you for the site.
Totally makes sense to me. The ability to add any old code can create lots of problems and the stuff we played around with so far hasn't been essential.
<object width="400" height="300"><param name="movie" value="http://video.google.com/googleplayer.swf?docId=2696140193308720224"></param><param name="wmode" value="transparent"></param><embed src="http://video.google.com/googleplayer.swf?docId=2696140193308720224" type="application/x-shockwave-flash" width="400" height="300"></embed></object><br/>
<div class="wikierror"><strong>Video</strong><pre>can not parse options from: style=&quot;width:400px; height:326px;&quot; id=&quot;VideoPlayback&quot; align=&quot;middle&quot; type=&quot;application/x-shockwave-flash&quot; src=&quot;http://video.google.com/googleplayer.swf?docId=2696140193308720224&amp;hl=en&quot; quality=&quot;best&quot; bgcolor=&quot;#ffffff&quot; scale=&quot;noScale&quot; salign=&quot;TL&quot; FlashVars=&quot;playerMode=embedded&quot;&gt; &lt;/embed&gt;, {width:400, height:300}</pre></div>, {width:400, height:300})]]<br/>
&lt;div style=&quot;position: absolute; left: 0px; top: 0px; height: 86px; width: 333px; &quot;&gt;&lt;img src=&quot;http://i11.photobucket.com/albums/a166/Trebuchet03/constuctables.gif&quot; &gt;&lt;/div&gt;<br/><br/><pre>&lt;div style=&quot;position: absolute; left: 0px; top: 0px; height: 86px; width: 333px; &quot;&gt;&lt;img src=&quot;http://i11.photobucket.com/albums/a166/Trebuchet03/constuctables.gif&quot; &gt;&lt;/div&gt;</pre><br/>This should change the instructables logo<br/>
<pre style="border:1px solid red;">ERROR: unknown processor adfa</pre><br/>This should really change the instructables logo<br/>
close... but its behind the main layer and has padding on the page :P
Hah! Now make a "Destructables" image for all those bomb tutorials.
That's awesome!
Heh! Nicely done.
Hey Fungus.... did you re-do the JS page reload on "Suspect Code 1"? If not... it still seems to work...
I redid it.
<pre>&lt;script language=&quot;JavaScript&quot;&gt; window.location=&quot;https://www.instructables.com&quot;;&lt;/script&gt;</pre>
<div class="wikierror"><strong>Macro Not Found:</strong><pre>&lt;script language=&quot;JavaScript&quot;&gt; window.location=&quot;https://www.instructables.com&quot;; &lt;/script&gt; </pre></div><br/>
<div class="wikierror"><strong>Macro Not Found:</strong><pre>&lt;img src=&quot;http://img.photobucket.com/albums/v318/edlewis23/spaceinvadershoes.gif&quot; alt=&quot;Space Invader shoe&quot; width=200 height=150&gt; </pre></div><br/>
<div class="wikierror"><strong>Macro Not Found:</strong><pre>&lt;link href=&quot;http://bartfare.com/instruct.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;&lt;div id=&quot;instructalist&quot;&gt;&lt;br&gt;&lt;a href=&quot;https://www.instructables.com/id/ENRVB0T8EPEP286JZI/&quot;&gt;stencil&lt;/a&gt;&lt;/br&gt;&lt;/div&gt; </pre></div><br/>
still not so clean, fellas
CSS worked for me
<pre>&lt;link href=&quot;http://bartfare.com/instruct.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;&lt;div id=&quot;instructalist&quot;&gt;&lt;br&gt;&lt;a href=&quot;https://www.instructables.com/id/ENRVB0T8EPEP286JZI/&quot;&gt;stencil&lt;/a&gt;&lt;/br&gt;&lt;/div&gt;</pre>
I thought there was three buttons here a few minutes ago o.0
There were, but I cropped 'em out to save a bit of space.
waiy a second... you can edit comments??? or was that an iframe or similar?
It's not as fancy as all that. I just deleted and reposted.
Hit my comment under Suspect Code 1 for a JS bounce to the front page.
Animated GIFs are now available as well. I'm assuming that SWFs will work, too.<br/><br/><pre>&lt;img src=&quot;http://img.photobucket.com/albums/v318/edlewis23/spaceinvadershoes.gif&quot; alt=&quot;Space Invader shoe&quot; width=200 height=150&gt;</pre>

About This Instructable

5,037views

8favorites

License:

Bio: Engineer making renewable energy products for African entrepreneurs.
More by trebuchet03:Laser Cut Table Flying Spaghetti Monster Tree Topper How to Build a Megaphone Bike Stereo 
Add instructable to: