<style>
.Zaehler {
 width: 325px;
 height: auto;
 border: 2px solid;
 border-color: #2A3C45;
 padding: 0;
 background-color: #F9F0E8;
 top: 0px;
 left: 0px;
 font-family: 'Segoe UI';
 font-size:16px; color:#2A3C45;
 text-shadow: 1px 1px 1px #FFFFFF, 1px 2px 2px rgba(51,47,24,1.0);
}
</style>
 
<script>
window.addEventListener('load', function ( ) {
 
$('#activity_feed').after(`<div class="card order-0 mb-3 fadeIn">
<div class="card-header  clearfix">
 
<h5 class="card-title">Forenwächter</h5>
 
</div> 
<div class="card-body ">
 
<center>
<div id="newbox2" class="Zaehler">
<img src="https://files.homepagemodules.de/b572344/a_687_98056687.gif" width="100%" border="0">
Andrea's Schatzkästchen
<br>
<span id="countup_zaehler">Error</span>
</div>
</center>
 
</div>
</div>`);
 
});
</script>
 
<script> 
datum='21.02.2012  00:00:00'; 
dDatum=datum.split(' ');
dZeit=dDatum[1];
dDatum=dDatum[0].split('.');
dDatum2=dDatum[0]+'.'+dDatum[1]+'.'+dDatum[2]+' '+dZeit+' Uhr.';
datum=dDatum[1]+'/'+dDatum[0]+'/'+dDatum[2]+' '+dZeit;
ziel=new Date(datum);
var miese;
t=86400000;
st=3600000;
m=60000;
function zaehl_up_down(){
tempD=new Date();
if (ziel<tempD&&miese!=1){
miese=1;
}
tMon=0;
if(miese!=1){
bisSeit='wird es in ';
bisSeit2=' geben...';
while(tempD<ziel){
tempD.setMonth(tempD.getMonth()+1);
tMon++
}
if(tempD>ziel){
tempD.setMonth(tempD.getMonth()-1);
tMon--
}
diff=(ziel-tempD);
}
if(miese==1){
bisSeit='gibt es seit ';
bisSeit2='';
while(tempD>ziel){
tempD.setMonth(tempD.getMonth()-1);
tMon++
}
if(tempD<ziel){
tempD.setMonth(tempD.getMonth()+1);
tMon--
}
diff=(tempD-ziel);
}
tage=Math.abs(diff)/t;
gTage=Math.floor(tage);
stunden=Math.abs(diff)/st-(24*gTage);
gStunden=Math.floor(stunden); 
minuten=Math.abs(diff)/m-(1440*gTage)-(60*gStunden);
gMinuten=Math.floor(minuten);
sekunden=Math.abs(diff)/1000-(86400*gTage)-(3600*gStunden)-(60*gMinuten);
gSekunden=Math.round(sekunden);
gSekunden=gSekunden<10?'0'+gSekunden:gSekunden;
gMinuten=gMinuten<10?'0'+gMinuten:gMinuten;
gStunden=gStunden<10?'0'+gStunden:gStunden;
if(gSekunden==60)gSekunden='00';
str=gStunden +':' + gMinuten +':' + gSekunden;
M=tMon%12;
Jah=Math.floor(tMon/12);
tMon=M;
Jahre='';
Monate='';
Tage='';
if(Jah>0)Jahre=Jah+' Jahr';
if(tMon>0||Jahre!='')Monate=tMon+' Monat';
if(Monate!=''||gTage>0)Tage=gTage+' Tag';
Jah=Jah!=1&&Jah?Jahre+='en':Jah;
tMon=(tMon!=1&&tMon)||(tMon==0&&Jah)?Monate+='en':tMon;
gTage=gTage!=1&&Tage!=''?Tage+='en':gTage;
if(Jahre!='')Jahre+=', ';
if(Monate!='')Monate+=', ';
if(Tage!='')Tage+=', ';
document.getElementById('countup_zaehler').innerHTML=bisSeit+Jahre+Monate+' '+Tage+str+bisSeit2;
tick=setTimeout("zaehl_up();", 1000);
}
 
onload = zaehl_up_down;
</script>
 

<style>
.boxdraggable .card-header {cursor:move;}
.ui-resizable-helper { border: 1px dotted gray; }
</style>
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
window.addEventListener('load', function ( ) {
 
$('#useronline').after(`<div class="card order-0 mb-3 fadeIn boxdraggable">
<div class="card-header  clearfix">
 
<h5 class="card-title">Meine eigene HTML-Box - Größe und Position frei wählbar!</h5>
 
</div> 
<div class="card-body "> 
 
<p>Im neuen <i>WoltLab Burning Board 5</i> hat man die Möglichkeit eigene Html-Boxen im Forum rechts einzufügen. Bei Xobor kann man ja nur die vorgesehenen Boxen mit ja oder Nein in der rechten Sidebar anzeigen lassen. Habe mal versucht eine Box nach rechts zu schieben mit dem second script. Aber das passt natürlich nicht. Deshalb wäre es irgendwie klasse, wenn man wie die Boxen im Portal, solch eine Box in der rechten sidebar vom Forum einfügen könnte. Hast du da vielleicht eine Idee?</p> 
 
</div>
</div>`);
 
$(".boxdraggable").draggable().resizable({helper: "ui-resizable-helper",animate: true,minHeight: 200,minWidth: 300 }); 
});
</script>