взято с Хабрахабра так что строго не судить:
В файле main.tpl в теге
<head>
вставить:
<script>(function(){var d=false;if(document.createElement("canvas").getContext)if(document.readyState==="complete")j();else window.addEventListener("DOMContentLoaded",j,d);
var e=Math.PI/180,r=Math.sqrt(3)/2,f=[],m=64,q=500,o=20,c=function(a){return Math.floor(a*Math.random())},b,a,h,g=d;function j(){b=document.createElement("canvas");
b.style.position="fixed";b.style.top="0px";b.style.left="0px";b.style.zIndex="0";document.body.insertBefore(b,document.body.firstChild);a=b.getContext("2d");i();
h=setInterval(k,q);setInterval(l,m);window.addEventListener("resize",i,d)}function i(){g=true;b.width=document.body.offsetWidth;b.height=window.innerHeight;
a.strokeStyle="#0066CC";a.fillStyle="white"}function n(e,b,d,c){a.save();a.translate(e,b);p(c,0,Math.floor(r*b),d);a.fill();a.stroke();a.restore()}function p(c,f,g,d)
{a.save();a.beginPath();a.translate(f,g);a.moveTo(0,0);b(c);a.rotate(-120*e);b(c);a.rotate(-120*e);b(c);a.closePath();a.restore();function b(c){a.save();if(c==0)a.lineTo(d,0);
else{a.scale(1/3,1/3);b(c-1);a.rotate(60*e);b(c-1);a.rotate(-120*e);b(c-1);a.rotate(60*e);b(c-1)}a.restore();a.translate(d,0)}}
function k(){var b=2,d=10+c(90),a=(document.body.offsetWidth-964)/2,e=c(2)==0?c(a):a+964+c(a),g=window.pageYOffset;f.push({x:e,y:g,vx:0,vy:3+c(3),size:d,order:b});
f.length>o&&clearInterval(h)}function l(){a.clearRect(0,0,b.width,b.height);for(var j=b.height,h=0;h<f.length;h++){var e=f[h];e.y+=e.vy;e.x+=e.vx;if(e.y>j)e.y=0;if(g)
{var i=(b.width-964)/2;e.x=c(2)==0?c(i):i+964+c(i)}n(e.x,e.y,e.size,e.order);if(c(4)==1)e.vx+=(c(11)-5)/10;if(e.vx>2)e.vx=2;if(e.vx<-2)e.vx=-2}; if (g) g=d}})()</script>
<style type="text/css">#kpik2008 { position: relative; } #kpik2008 { z-index: 4; } </style>
var e=Math.PI/180,r=Math.sqrt(3)/2,f=[],m=64,q=500,o=20,c=function(a){return Math.floor(a*Math.random())},b,a,h,g=d;function j(){b=document.createElement("canvas");
b.style.position="fixed";b.style.top="0px";b.style.left="0px";b.style.zIndex="0";document.body.insertBefore(b,document.body.firstChild);a=b.getContext("2d");i();
h=setInterval(k,q);setInterval(l,m);window.addEventListener("resize",i,d)}function i(){g=true;b.width=document.body.offsetWidth;b.height=window.innerHeight;
a.strokeStyle="#0066CC";a.fillStyle="white"}function n(e,b,d,c){a.save();a.translate(e,b);p(c,0,Math.floor(r*b),d);a.fill();a.stroke();a.restore()}function p(c,f,g,d)
{a.save();a.beginPath();a.translate(f,g);a.moveTo(0,0);b(c);a.rotate(-120*e);b(c);a.rotate(-120*e);b(c);a.closePath();a.restore();function b(c){a.save();if(c==0)a.lineTo(d,0);
else{a.scale(1/3,1/3);b(c-1);a.rotate(60*e);b(c-1);a.rotate(-120*e);b(c-1);a.rotate(60*e);b(c-1)}a.restore();a.translate(d,0)}}
function k(){var b=2,d=10+c(90),a=(document.body.offsetWidth-964)/2,e=c(2)==0?c(a):a+964+c(a),g=window.pageYOffset;f.push({x:e,y:g,vx:0,vy:3+c(3),size:d,order:b});
f.length>o&&clearInterval(h)}function l(){a.clearRect(0,0,b.width,b.height);for(var j=b.height,h=0;h<f.length;h++){var e=f[h];e.y+=e.vy;e.x+=e.vx;if(e.y>j)e.y=0;if(g)
{var i=(b.width-964)/2;e.x=c(2)==0?c(i):i+964+c(i)}n(e.x,e.y,e.size,e.order);if(c(4)==1)e.vx+=(c(11)-5)/10;if(e.vx>2)e.vx=2;if(e.vx<-2)e.vx=-2}; if (g) g=d}})()</script>
<style type="text/css">#kpik2008 { position: relative; } #kpik2008 { z-index: 4; } </style>
и после тега
<boby>
сразу вставляем:
<div id="kpik">
после чего прям перед закрывающимся тегом
</boby>
вставить:
</div>