Post Count XP Bar

Preview

This code allows you to add a post count XP bar to the post rail. XP is calculated based on the max amount of posts designated in the script where the max posts number is the amount of posts it would take for the bar to reach 100%.

Admin CP → Appearance → Custom Templates

Click Add Snippet for the “Post Rail”.

Snippet name: Posts

<div class="post-count">{{ user.num_posts }}</div>

Admin CP → Appearance → Board Templates → Below the board

<script>
const maxPosts = 100;
const pCount = document.querySelectorAll('.post-count');

pCount.forEach((el) => {
    el.style.display = 'none';
    const aCount = Number(el.innerText);
    const perc = (aCount / maxPosts) * 100;
    const parent = el.parentNode;
    const div = document.createElement('div');
    div.className = 'b2-post__rank';
    div.innerHTML = '<div style="height: .5rem; width: ' + perc + '%; max-width: 100%"></div>';
    div.style.marginTop = '.3rem';
    parent.insertBefore(div, el);
});
</script>

Admin CP → Appearance → Themes → Stylesheet

.b2-post__rank {
background: red;
}

.b2-post__rank div {
background: blue;
}

Modify the CSS as necessary and change the “maxPosts” variable value to the maximum number of posts you want to allow for the bar to reach 100%.