babyfat_fat
New Member
I used a plugin called embedit to use custom html, javascript and CSS in my wordpress. The original code look like:\[code\] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-darkness/jquery-ui.css" /> <style> .calculator>td{ border-bottom: 0px; border-top: 0px; } input.dark[type=text] { transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; border:1px solid rgba(31, 161, 5, 1); text-align: center; background: #000000; behavior: url(/pie/PIE.htc); color: #10c90d; height: 20px; width: 35px; } #container { width:300px; height:320px; z-index:4; -webkit-transform: rotate(10deg) skew(0,0) translate(0%,-5px); -moz-transform: rotate(10deg) skew(0,0) translate(0%,-5px); -o-transform: rotate(10deg) skew(0,0) translate(0%,-5px); transform: rotate(10deg) skew(0,0) translate(0%,-5px); font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; } input[type=text].dark:focus { box-shadow: 0 0 9px rgba(31, 161, 5, 1); -webkit-box-shadow: 0 0 9px rgba(31, 161, 5, 1); -moz-box-shadow: 0 0 9px rgba(31, 161, 5, 1); } .report{ margin-top:-100px; margin-left:70%; } .main{ background: rgb(0,155,5); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOWIwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDY4MTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(#9BD91A, #54750E); /* FF3.6+ */ background: -webkit-gradient(#9BD91A, #54750E); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(#9BD91A, #54750E); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(#9BD91A, #54750E); /* Opera 11.10+ */ background: -ms-linear-gradient(#9BD91A, #54750E); /* IE10+ */ background: linear-gradient(#9BD91A, #54750E); /* W3C */ filter: progidXImageTransform.Microsoft.gradient( startColorstr='#9BD91A', endColorstr='#54750E',GradientType=0 ); /* IE6-8 */ -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color:#ffffff; border-color: #000000; border-width: 100px; -webkit-box-shadow: inset 2px 2px 21px 21px rgba(0, 0, 0, .4); box-shadow: inset 2px 2px 21px 21px rgba(0, 0, 0, .4); -moz-box-shadow: inset 2px 2px 21px 21px rgba(0, 0, 0, .4); width: 100%; } .pointer{ cursor: pointer; } .half{ width: 50%; } .full{ width: 100%; } .tape{ position: relative; top:-40px; left:50px; width: 130px; height: 35px; background-color:#fff; opacity:0.6; border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 1px 0px #cccccc; -moz-box-shadow: 0px 0px 1px 0px #cccccc; box-shadow: 0px 0px 1px 0px #cccccc; -webkit-transform: rotate(-2deg) skew(0,0) translate(0%,-5px); -moz-transform: rotate(-2deg) skew(0,0) translate(0%,-5px); -o-transform: rotate(-2deg) skew(0,0) translate(0%,-5px); transform: rotate(-2deg) skew(0,0) translate(0%,-5px); } .paper { padding:25px 25px 40px; margin:0 auto 20px auto; align:center; line-height:1.5; border:0; border-radius:3px; background: #F9EFAF; background: -webkit-linear-gradient(#F9EFAF, #F7E98D); background: -moz-linear-gradient(#F9EFAF, #F7E98D); background: -o-linear-gradient(#F9EFAF, #F7E98D); background: -ms-linear-gradient(#F9EFAF, #F7E98D); background: linear-gradient(#F9EFAF, #F7E98D); box-shadow:0 4px 6px rgba(0,0,0,0.1); transition:box-shadow 0.5s ease; font-smoothing:subpixel-antialiased; width:220px; height:260px; } .calculator{ font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; height: 700px; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> </head> <body> <div class="calculator"> <div class="main"> <h1>Solar Payback Calculator</h1> <table> <form><tr><td colspan="9"><h2>Roof Size</h2></td></tr><tr><td> Width: </td><td class="pointer" onclick="subtractwidth();">- </td><td colspan="2" width="500"><div id="slider1"></div></td><td class="pointer" onclick="addwidth();"> + </td><td> Length: </td><td class="pointer" onclick="subtractlength();">- </td><td colspan="2" width="500"><div id="slider2"></div></td><td class="pointer" onclick="addlength();"> +</td></tr><tr><td></td><td></td><td> <input type="text" id="roof_width" onKeyUp="calculate();" class="slider_input1 dark" value="http://stackoverflow.com/questions/15563295/0"/>m</td><td></td><td></td><td></td><td></td><td> <input type="text" id="roof_length" onKeyUp="calculate();" class="slider_input2 dark" value="http://stackoverflow.com/questions/15563295/0"/>m</td></tr> <tr><td> Electricity Bill: </td><td class="pointer" onclick="subtractbill();">- </td><td colspan="7" width="500"><div id="slider3"></div></td><td onclick="addbill();" class="pointer"> +</td></tr><tr><td></td><td></td><td>