Pixel Point

Preview

This code allows you to add image badges to the mini profile on a user-basis.

Admin CP → Themes → Board Templates → Below the board

<script>
document.addEventListener('DOMContentLoaded', () => {
    const BADGE_SIZE = 25;

    const userBadges = {
        'USERNAME': [
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
        ],
    };

    const layouts = [{
            post: '.b2-post',
            name: '.post-author-name',
            target: '.b2-post__rail',
            mode: 'append'
        },
        {
            post: '.post-card-layout',
            name: '.post-author-name',
            target: '.post-card-layout__byline',
            mode: 'append'
        },
        {
            post: '.reply__details',
            name: '.reply__details__username',
            target: '.reply__details__username',
            mode: 'append'
        },
    ];

    const buildBadges = badges => {
        const box = document.createElement('div');
        box.className = 'user-badges';
        box.style.cssText = 'display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center;margin-top:.3rem';

        for (const {
                src,
                title
            }
            of badges) {
            const img = document.createElement('img');
            img.src = src;
            img.width = BADGE_SIZE;
            img.height = BADGE_SIZE;
            img.alt = title;
            img.title = title;
            img.loading = 'lazy';
            box.append(img);
        }

        return box;
    };

    for (const layout of layouts) {
        document.querySelectorAll(layout.post).forEach(post => {
            if (post.querySelector('.user-badges')) return;

            const author = post.querySelector(`${layout.name} .user-tooltip[data-username]`);
            const badges = author && userBadges[author.dataset.username];
            const target = post.querySelector(layout.target);
            if (!badges || !badges.length || !target) return;

            target.append(buildBadges(badges));
        });
    }
});
</script>

This is the only part you need to edit:

    const BADGE_SIZE = 25;

    const userBadges = {
        'USERNAME': [
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
        ],
    };

The 25 can be changed to the width and height you want the badges to be.

You can add more images, like so:

        'USERNAME': [
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
        ],

You can repeat that whole block to add badges for more users:

    const userBadges = {
        'USERNAME': [
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
        ],
        'USERNAME': [
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
            { src: 'IMAGE_URL', title: 'BADGE_TITLE' },
        ],
    };

Preview

This code allows you to tab through categories to show an individual category on button click, or clicking the Show All button will show all categories. The choice you make is saved via localStorage, meaning if you click “Cat #1” the “Cat #1” category will only show when you refresh the page.

Admin CP → Themes → Board Templates → Below the board

<script>
const headerLinks = document.querySelectorAll('.forumlist section header a');
const tabbedDIV = document.createElement('div');
tabbedDIV.className = 'tabbed-categories';
tabbedDIV.innerHTML = `<button type="button" class="btn btn-small show-all-cat" style="text-transform: none">Show All</button>`;
document.querySelector('.forumlist').prepend(tabbedDIV);

headerLinks.forEach((el) => {
    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'btn btn-small show-forum';
    button.style.textTransform = 'none';
    button.innerText = el.innerText;
    document.querySelector('.tabbed-categories').append(button);
});

document.querySelector('.show-all-cat').addEventListener('click', (event) => {
    localStorage.removeItem('show-forum');
    const cats = document.querySelectorAll('.forumlist section');

    cats.forEach((el) => {
        el.style.display = 'block';
    });

    const buttons = document.querySelectorAll('.show-forum');

    buttons.forEach((el) => {
        el.classList.remove('btn-primary');
        el.classList.add('btn-small');
    });

    event.currentTarget.classList.remove('btn-small');
    event.currentTarget.classList.add('btn-primary');
});

const sForum = document.querySelectorAll('.show-forum');

sForum.forEach((el) => {
    el.addEventListener('click', () => {
        const title = el.innerText;
        const cats = document.querySelectorAll('.forumlist section');

        cats.forEach((rel) => {
            rel.style.display = 'none';

            if (title === rel.querySelector('header a').innerText) {
                rel.style.display = 'block';
                localStorage.setItem('show-forum', rel.id);
            }
        });

        const buttons = document.querySelectorAll('.show-forum');

        buttons.forEach((el) => {
            el.classList.remove('btn-primary');
            el.classList.add('btn-small');
        });

        document.querySelector('.show-all-cat').classList.remove('btn-primary');
        document.querySelector('.show-all-cat').classList.add('btn-small');
        el.classList.remove('btn-small');
        el.classList.add('btn-primary');
    });

    if (localStorage.getItem('show-forum')) {
        const catID = localStorage.getItem('show-forum');
        const cats = document.querySelectorAll('.forumlist section');

        cats.forEach((el) => {
            el.style.display = 'none';
        });

        document.querySelector('#' + catID).style.display = 'block';
        const title = document.querySelector('#' + catID + ' header a').innerText;
        const sForum = document.querySelectorAll('.show-forum');

        sForum.forEach((el) => {
            if (title === el.innerText) {
                el.classList.remove('btn-small');
                el.classList.add('btn-primary');
            }
        });
    }
});
</script>

Codes & Widgets Guidelines

Welcome to Codes & Widgets! This is the place to share CSS, JavaScript, HTML, widgets, and snippets that help members customize their ForumSpark forums.

Posting Your Code

• Only post your own work. If your code builds on someone else’s, get their permission and credit them.

• Use code blocks. Put your code in a code block so it keeps its formatting and is easy to copy.

• Explain what it does. Describe what the code changes and add a screenshot or preview if you can.

• Include instructions. Explain where the code goes, such as custom CSS, a widget, or a template, and any settings that need to be changed.

• Note any requirements. Mention which ForumSpark layout it’s for and anything else it relies on.

• Test before posting. Make sure your code works, and note any known issues.

• Keep it safe. Code that steals data, tracks members without their knowledge, or harms forums isn’t allowed.

• One topic per code. Post updates in your existing topic instead of making a new one.

Using Code

• Follow the creator’s terms. Don’t redistribute or resell someone else’s code, or claim it as your own.

• Keep the credits. If the creator includes a credit comment, leave it in place.

• Ask for help in the code’s topic. That way, the creator and other members can find the answer later.

Staff may remove any code or topic that breaks these guidelines. If you have any questions, feel free to reach out to a member of staff.

Preview

This code allows users to choose which background image they wish to use for the overall page with a background image selector, or they may remove the background image altogether.

Change the capitalized text as necessary:

const bgImages = ['IMAGE_URL', 'IMAGE_URL', 'IMAGE_URL'];

Admin CP → Themes → Board Templates: Place it where you want the "Change Background Image" link to appear.

<a href="javascript: void(0)" id="bg_changer">Change Background Image</a>

Admin CP → Themes → Board Templates → Below the board

<div id="bg_popout" class="panel" style="display: none; border-width: 1px; position: fixed; z-index: 999; width: 500px; height: 200px; top: calc(50% - 100px); left: calc(50% - 250px); padding: 10px">
<a href="javascript: void(0)" id="remove_bgi">Remove Background Image</a>
<span id="close_popout" style="font-size: 15px; font-weight: 700; cursor: pointer; float: right" title="Close">X</span>
<div id="bg_images" style="display: flex; justify-content: space-between; padding-top: 25px; max-width: 480px; overflow: auto; margin: 0 auto"></div>
</div>

<script>
const bgImages = ['IMAGE_URL', 'IMAGE_URL', 'IMAGE_URL'];

for (const i of bgImages) {
    const img = document.createElement('img');
    img.src = i;
    img.alt = 'BG Image';
    img.style.cursor = 'pointer';
    img.width = '150';
    img.height = '150';
    document.querySelector('#bg_images').appendChild(img);
}

document.querySelector('#bg_changer').addEventListener('click', function() {
    document.querySelector('#bg_popout').style.display = 'block';
});

document.querySelector('#close_popout').addEventListener('click', function() {
    document.querySelector('#bg_popout').style.display = 'none';
});

document.querySelector('#remove_bgi').addEventListener('click', function() {
    localStorage.removeItem('background-image');
    document.querySelector('#bg_popout').style.display = 'none';
    document.body.style.backgroundImage = 'none';
});

const imgs = document.querySelectorAll('#bg_images img');

imgs.forEach(element => {
    element.addEventListener('click', function() {
        localStorage.setItem('background-image', element.src);
        document.querySelector('#bg_popout').style.display = 'none';
        document.body.style.backgroundImage = 'url(' + element.src + ')';
        document.body.style.backgroundSize = 'cover';
        document.body.style.backgroundAttachment = 'fixed';
    });
});

if (localStorage.getItem('background-image').includes('http')) {
    document.body.style.backgroundImage = 'url(' + localStorage.getItem('background-image') + ')';
    document.body.style.backgroundSize = 'cover';
    document.body.style.backgroundAttachment = 'fixed';
} else {
    document.body.backgroundImage = 'none';
}
</script>

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%.