snipt

Ctrl+h for KB shortcuts

Text only

W3C Keyword Colors

var colors = ["aliceblue","antiquewhite","aqua","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brown","burlywood","cadetblue","chartreuse","chocolate","coral","cornflowerblue","cornsilk","crimson","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorange","darkorchid","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","ghostwhite","gold","goldenrod","gray","green","greenyellow","honeydew","hotpink","indianred","indigo","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgoldenrodyellow","lightgreen","lightgrey","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslategray","lightsteelblue","lightyellow","lime","limegreen","linen","magenta","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurple","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","navyblue","oldlace","olive","olivedrab","orange","orangered","orchid","palegoldenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","seagreen","seashell","sienna","silver","skyblue","slateblue","slategray","snow","springgreen","steelblue","tan","teal","thistle","tomato","turquoise","violet","wheat","white","whitesmoke","yellow","yellowgreen"];
https://snipt.net/embed/c256caf16f701b062a6fcbe739aac7ab/
/raw/c256caf16f701b062a6fcbe739aac7ab/
c256caf16f701b062a6fcbe739aac7ab
text
Text only
1
2019-08-21T05:02:17
True
False
False
Jun 08, 2014 at 01:19 AM
/api/public/snipt/135283/
w3c-keyword-colors-90c153dd
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>var colors = [&quot;aliceblue&quot;,&quot;antiquewhite&quot;,&quot;aqua&quot;,&quot;aquamarine&quot;,&quot;azure&quot;,&quot;beige&quot;,&quot;bisque&quot;,&quot;black&quot;,&quot;blanchedalmond&quot;,&quot;blue&quot;,&quot;blueviolet&quot;,&quot;brown&quot;,&quot;burlywood&quot;,&quot;cadetblue&quot;,&quot;chartreuse&quot;,&quot;chocolate&quot;,&quot;coral&quot;,&quot;cornflowerblue&quot;,&quot;cornsilk&quot;,&quot;crimson&quot;,&quot;cyan&quot;,&quot;darkblue&quot;,&quot;darkcyan&quot;,&quot;darkgoldenrod&quot;,&quot;darkgray&quot;,&quot;darkgreen&quot;,&quot;darkkhaki&quot;,&quot;darkmagenta&quot;,&quot;darkolivegreen&quot;,&quot;darkorange&quot;,&quot;darkorchid&quot;,&quot;darkred&quot;,&quot;darksalmon&quot;,&quot;darkseagreen&quot;,&quot;darkslateblue&quot;,&quot;darkslategray&quot;,&quot;darkturquoise&quot;,&quot;darkviolet&quot;,&quot;deeppink&quot;,&quot;deepskyblue&quot;,&quot;dimgray&quot;,&quot;dodgerblue&quot;,&quot;firebrick&quot;,&quot;floralwhite&quot;,&quot;forestgreen&quot;,&quot;fuchsia&quot;,&quot;gainsboro&quot;,&quot;ghostwhite&quot;,&quot;gold&quot;,&quot;goldenrod&quot;,&quot;gray&quot;,&quot;green&quot;,&quot;greenyellow&quot;,&quot;honeydew&quot;,&quot;hotpink&quot;,&quot;indianred&quot;,&quot;indigo&quot;,&quot;ivory&quot;,&quot;khaki&quot;,&quot;lavender&quot;,&quot;lavenderblush&quot;,&quot;lawngreen&quot;,&quot;lemonchiffon&quot;,&quot;lightblue&quot;,&quot;lightcoral&quot;,&quot;lightcyan&quot;,&quot;lightgoldenrodyellow&quot;,&quot;lightgreen&quot;,&quot;lightgrey&quot;,&quot;lightpink&quot;,&quot;lightsalmon&quot;,&quot;lightseagreen&quot;,&quot;lightskyblue&quot;,&quot;lightslategray&quot;,&quot;lightsteelblue&quot;,&quot;lightyellow&quot;,&quot;lime&quot;,&quot;limegreen&quot;,&quot;linen&quot;,&quot;magenta&quot;,&quot;maroon&quot;,&quot;mediumaquamarine&quot;,&quot;mediumblue&quot;,&quot;mediumorchid&quot;,&quot;mediumpurple&quot;,&quot;mediumseagreen&quot;,&quot;mediumslateblue&quot;,&quot;mediumspringgreen&quot;,&quot;mediumturquoise&quot;,&quot;mediumvioletred&quot;,&quot;midnightblue&quot;,&quot;mintcream&quot;,&quot;mistyrose&quot;,&quot;moccasin&quot;,&quot;navajowhite&quot;,&quot;navy&quot;,&quot;navyblue&quot;,&quot;oldlace&quot;,&quot;olive&quot;,&quot;olivedrab&quot;,&quot;orange&quot;,&quot;orangered&quot;,&quot;orchid&quot;,&quot;palegoldenrod&quot;,&quot;palegreen&quot;,&quot;paleturquoise&quot;,&quot;palevioletred&quot;,&quot;papayawhip&quot;,&quot;peachpuff&quot;,&quot;peru&quot;,&quot;pink&quot;,&quot;plum&quot;,&quot;powderblue&quot;,&quot;purple&quot;,&quot;red&quot;,&quot;rosybrown&quot;,&quot;royalblue&quot;,&quot;saddlebrown&quot;,&quot;salmon&quot;,&quot;sandybrown&quot;,&quot;seagreen&quot;,&quot;seashell&quot;,&quot;sienna&quot;,&quot;silver&quot;,&quot;skyblue&quot;,&quot;slateblue&quot;,&quot;slategray&quot;,&quot;snow&quot;,&quot;springgreen&quot;,&quot;steelblue&quot;,&quot;tan&quot;,&quot;teal&quot;,&quot;thistle&quot;,&quot;tomato&quot;,&quot;turquoise&quot;,&quot;violet&quot;,&quot;wheat&quot;,&quot;white&quot;,&quot;whitesmoke&quot;,&quot;yellow&quot;,&quot;yellowgreen&quot;]; </span></pre></div> </td></tr></table>
W3C, colors, css, javascript

CSS

Text-indent replacement

1
2
3
4
5
6
.text-indent {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
    /*other styles then*/
}
https://snipt.net/embed/174c7f2399ae996fc6a00de53abe9415/
/raw/174c7f2399ae996fc6a00de53abe9415/
174c7f2399ae996fc6a00de53abe9415
css
CSS
6
2019-08-17T22:49:07
True
False
False
/api/public/snipt/134761/
replacement-text-width-image-7c632551
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nc">.text-indent</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">text-indent</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="nb">white-space</span><span class="o">:</span> <span class="nb">nowrap</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="nb">overflow</span><span class="o">:</span> <span class="nb">hidden</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="c">/*other styles then*/</span> </span><span id="L-6"><a name="L-6"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
-9999px, css, icons, text-indent

Text only

Format a link based on it linking to a pdf

1
2
3
4
5
6
7
8
/* Add formatting based on link type */
.entry-content a[href$=".pdf"]{
background: url(images/pdf.png) no-repeat center right;
padding:10px 33px 10px 0;
color:#FF0000;
}

/* background image can be whatever you want, just make sure you adjust padding to accomodate it */
https://snipt.net/embed/845d9d176391c13cd438e00dba2d9e18/
/raw/845d9d176391c13cd438e00dba2d9e18/
845d9d176391c13cd438e00dba2d9e18
text
Text only
8
2019-08-19T11:43:28
True
False
False
May 04, 2014 at 03:27 PM
/api/public/snipt/134724/
format-a-link-based-on-it-linking-to-a-pdf-04e7b6e1
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a> <a href="#L-7">7</a> <a href="#L-8">8</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>/* Add formatting based on link type */ </span><span id="L-2"><a name="L-2"></a>.entry-content a[href$=&quot;.pdf&quot;]{ </span><span id="L-3"><a name="L-3"></a>background: url(images/pdf.png) no-repeat center right; </span><span id="L-4"><a name="L-4"></a>padding:10px 33px 10px 0; </span><span id="L-5"><a name="L-5"></a>color:#FF0000; </span><span id="L-6"><a name="L-6"></a>} </span><span id="L-7"><a name="L-7"></a> </span><span id="L-8"><a name="L-8"></a>/* background image can be whatever you want, just make sure you adjust padding to accomodate it */ </span></pre></div> </td></tr></table>
"auto formatting", classes, css, wordpress

CSS

ONTRAPORT - Make your forms responsive with this snippet of code.

1
2
3
4
5
6
7
<style>
.moonray-form
{
    width: 100%!important;
    max-width: 400px; /* Or whatever maximum width you would prefer to change it to */
}
</style>
https://snipt.net/embed/f0caca1d2c3cfe9883c88fba6abf1c2a/
/raw/f0caca1d2c3cfe9883c88fba6abf1c2a/
f0caca1d2c3cfe9883c88fba6abf1c2a
css
CSS
7
2016-12-29T03:13:28
True
False
True
Apr 09, 2014 at 07:41 PM
/api/public/snipt/128765/
ontraport-make-your-forms-responsive-with-this-snippet-of-code
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a> <a href="#L-7">7</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="o">&lt;</span><span class="nt">style</span><span class="o">&gt;</span> </span><span id="L-2"><a name="L-2"></a><span class="nc">.moonray-form</span> </span><span id="L-3"><a name="L-3"></a><span class="p">{</span> </span><span id="L-4"><a name="L-4"></a> <span class="nb">width</span><span class="o">:</span> <span class="m">100%</span><span class="cp">!important</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="nb">max-width</span><span class="o">:</span> <span class="m">400px</span><span class="p">;</span> <span class="c">/* Or whatever maximum width you would prefer to change it to */</span> </span><span id="L-6"><a name="L-6"></a><span class="p">}</span> </span><span id="L-7"><a name="L-7"></a><span class="o">&lt;/</span><span class="nt">style</span><span class="o">&gt;</span> </span></pre></div> </td></tr></table>
ONTRAPORT, css

CSS

CSS check id name someone-text has in name id

1
2
3
4
div[id^="apply_form"] .row-fluid:first-child
{
	margin-bottom:15px;
}
https://snipt.net/embed/268c8fcf236937354144b3d03e4d3b22/
/raw/268c8fcf236937354144b3d03e4d3b22/
268c8fcf236937354144b3d03e4d3b22
css
CSS
4
2019-08-04T04:15:31
True
False
True
Apr 03, 2014 at 11:53 PM
/api/public/snipt/127219/
css-check-id-name-someone-text-has-in-name-id
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">div</span><span class="o">[</span><span class="nt">id</span><span class="o">^=</span><span class="s2">&quot;apply_form&quot;</span><span class="o">]</span> <span class="nc">.row-fluid</span><span class="nd">:first-child</span> </span><span id="L-2"><a name="L-2"></a><span class="p">{</span> </span><span id="L-3"><a name="L-3"></a> <span class="nb">margin-bottom</span><span class="o">:</span><span class="m">15px</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css