Daily Post Goal Progress Bar

[mastersly]

Preview​

Plugin required
https://community.mybb.com/mods.php?action=view&pid=783ACP >> Templates and style >> Themes >> Your theme >> global.css
add this and save

.progress-bar-border {
? ? background: #202020;
? ? position: relative;
? ? display: block;
? ? vertical-align: middle;
? ? height: 100%;
? ? border-radius: 1px;
? ? line-height: 30px;
? ? overflow: hidden;
}

.progress-bar-lobos {
? ? background: #202020;
? ? width: 100%;
? ? color: white;
? ? position: relative;
? ? display: block;
? ? text-align: center;
? ? vertical-align: middle;
? ? height: 100%;
? ? border-radius: 6px;
? ? line-height: 27px;
? ? overflow: hidden;
}

.progress-bar-lobos>span {
? ? position: absolute;
? ? display: block;
? ? top: 0;
? ? left: 0;
? ? bottom: 0;
? ? border-radius: 1px;
? ? background: rgba(82,82,82,0.8);
}

.progress-bar-lobos>p {
? ? font-weight: 500;
? ? display: inline;
? ? position: relative;
? ? z-index: 1;
}

ACP >> Templates and style >> Templates>>Global Templates>>dailygoal
Add this and save

<table class="tborder" cellspacing="0" cellpadding="5">
 <tbody>
 <tr>
 <td class="thead" align="left">Daily Post Goal</td> </tr>
<tr>
 <td class="trow1"> 
<span style="color:#9DAAAA">Posts:</span><span style="float:right;color: #9DAAAA;"> {$goal_progress}/{$goal}</span>
</td>
</tr>
<tr>
 <td class="trow1"> 
<span style="color:#9DAAAA">Status:</span><if $goal_progress >= $goal then><span style="color: #00BF00;float:right;">Reached</span><else> <span style="color: #e03131;float:right;">Not Reached</span></if>
</td>
</tr>
<tr>
 <td class="trow1">
 <div class="progress-bar-border">
 <div id="progress_bar" class="progress-bar-lobos">
? ? <span id="prog-count" style="width: 0%"></span>
? ? <p id="prog-percent">0%</p>
</div></div>
</td> </tr> </td> </tr> </tbody> </table>

<script>
function setProgress(i){
 var y = Math.round( i );
 $('#prog-percent').html(y+'%');
 var red = 0, green = 0;
 if (i >= 80) {
? ? ? ? red = 137 - Math.round(((i - 137) / 34) * 34);
? ? ? ? green = 34;
? ? } else if (i >= 60) {
? ? ? ? red = 137;
? ? ? ? green = Math.round(((i - 137) /34) * 34);
? ? } else {
? ? ? ? red = 137;
? ? ? ? green = 34;
? ? }
 $('#prog-count').css('background', "rgb(" + red + "," + green + ",34)");
 if (i > 70){
 $('#prog-percent').css('color', 'white');
 } else {
 $('#prog-percent').css('color', '#fff');
 }
 $('#prog-count').width(i+'%');
}
(function() {
 var i = 0;
 var n = "{$goal_progress}";
 var o = parseInt(n.replace(',', ''));
 var p = {$goal};
 i = (o/p)*100;
 if (i > 100) i = 100;
 if (i < 0) i = 0;
 setProgress(i);
})();
 </script>

[/hide]

 

[Ash]

I loved this plugin when I was using MyBB forums. I wish that XenForo had something similar because I would love to have it on my forum

 

[_B_]

I'm happy this plugin also exists. Love it too!

 

[xzen404]

Thanks bro)

 

[Negative]

I recalled this tutorial on the mybb site. Glad its still have some use for some board owners!

 

[Yagami1]

Thanks for sharing but its too expensive