MyBB Community Forums

Full Version: Daily Post Goal Progress Bar/Color
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
https://community.mybb.com/mods.php?action=view&pid=783

After hours of digging I couldn't find a guide or tutorial how to do this until I decided to play around with the template and the codes to get it working. I will be providing the templates and .css, please remember that the progress bar when it goes to 100% or any other it will show a different color since I'm giving you my .css your more than welcome to play around with the colors yourself. If the template messes up play around with it because some forums may have custom themes!

Paste this code into postgoal template
<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;"> {$fetch}/{$postgoal}</span>
</td>
</tr>
<tr>
 <td class="trow1"> 
<span style="color:#9DAAAA">Status:</span><if $fetch >= $postgoal 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="prog-bar-border">
 <div id="progress_bar" class="prog-bar-haxzz">
    <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 = "{$fetch}";
 var o = parseInt(n.replace(',', ''));
 var p = {$postgoal};
 i = (o/p)*100;
 if (i > 100) i = 100;
 if (i < 0) i = 0;
 setProgress(i);
})();
 </script>

Paste this inside global.css
.prog-bar-border {
    background: #202020;
    position: relative;
    display: block;
    vertical-align: middle;
    height: 100%;
    border-radius: 1px;
    line-height: 30px;
    overflow: hidden;
}

.prog-bar-haxzz {
    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;
}

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

.prog-bar-haxzz>p {
    font-weight: 500;
    display: inline;
    position: relative;
    z-index: 1;
}

Preview:
[Image: mXoItim.png]

If you need help with the progress bar color let me know. Smile
Can u add threads and members too?
(2017-10-04, 10:26 AM)Mr.Kurd Wrote: [ -> ]Can u add threads and members too?

Yep but if you'll have to modify the plugin or get one made custom that can have those features like threads/members.
Great! I would like to see - number of users/thread as suggested above Smile
(2017-10-04, 04:51 PM)Dead-i Wrote: [ -> ]
(2017-10-04, 10:26 AM)Mr.Kurd Wrote: [ -> ]Can u add threads and members too?

Yep but if you'll have to modify the plugin or get one made custom that can have those features like threads/members.

I like a one realy, I don't how will you make it ;Wink so as you like.
note that this method does not work on handmade custom theme :'(
(2017-11-05, 06:20 AM)shadowxss Wrote: [ -> ]note that this method does not work on handmade custom theme :'(

Yes it does lol

Might be worth mentioning you need the PHP and Template Conditionals plugin
(2017-11-05, 06:20 AM)shadowxss Wrote: [ -> ]note that this method does not work on handmade custom theme :'(

It work's on any theme, and you do need this plugin for it to work.
http://mybbhacks.zingaburga.com/showthread.php?tid=260
Where is the postgoal template?
Pages: 1 2