Pixel Point

What's everyone's Christmas looking like this year?

Would you prefer to use traditional banks which have branches and in-person customer service or would you prefer to use a digital bank? I use Revolut as well as two traditional banks in New Zealand but I would be happy if they both went digital as I’ve only ever had to go into one of the branches once.

This thread is for you to post what's on your mind at the moment. You want to share a thought? Post a statement? Got something on your mind you just want to voice?

Some lottery tickets, an energy drink and some meat sticks.

When deciding on the forum domain name, what TLD or Top Level Domain do you go for?

For example, I exclusively always go for a .com because I’m old and a part of that culture that just wants to use the .com LOL

But I do have a .forum to see what it is like.

How about you all? Does this even matter to you?

How are you dealing with spam on your forum?

Do you get much spam? Do you set certain controls or features to help mitigate spam?

How often do you have to ban a spammer?

For me I love virtual currency systems so long as they’ve got a decent shop to use that accompanies it.

Do you like the ForumSpark platform? I really enjoy using it.

https://forumspark.net

Get Your Own Pixel Point Userbar!

Want a Pixel Point userbar with your name on it? Post in this thread and I’ll make one for you!

Each bar has the Pixel Point logo and your name in capitals on a pill. The color matches your group.

To request yours, copy this into a reply:

Name on the bar:

Please type your name exactly as you’d like it to appear. Names are shown in capitals, so “prophet” will appear as “PROPHET”.

I’ll reply here with your finished bar, and then you can add it to your signature. ❤️

Example:

I’ve done many of these in the past but things change so I’ll do another. 😛

Wind Walkers - Almost Ecstasy

Discuss the Champions League.

Discuss this season of the English Premier League.

To help those of you who don’t currently own Photoshop or are looking for a lightweight alternative, I’ve compiled a list of software that can be used to achieve similar things.

These are in no particular order. Any suggestions can be added in the future, and this is still a WIP.

1) GNU Image Manipulation Program (GIMP)

Price: Free

Description: GIMP is an acronym for GNU Image Manipulation Program. It is a freely distributed program for such tasks as photo retouching, image composition and image authoring. It has many capabilities. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc. GIMP is expandable and extensible. It is designed to be augmented with plug-ins and extensions to do just about anything. The advanced scripting interface allows everything from the simplest task to the most complex image manipulation procedures to be easily scripted.

Features: Painting, Advanced Manipulation, Animation, much, much more!

Personal Experience: I personally used GIMP before purchasing Photoshop. It has similar attributes and was extremely lightweight and didn’t use much of my computer’s memory at the time. It’s definitely at the top of my list in terms of alternatives to Photoshop.

Link: https://www.gimp.org/downloads/

2) Photoshop Express

Price: Free

Description: Photoshop Express gives you everything you need to quickly edit and transform images so they stand out on social and everywhere else. And with the option to add premium features, you can make advanced edits in a snap.

Features: Basic image editing, extremely lightweight, web based, free to use while giving you a taste of Photoshop, no need to register to use.

Personal Experience: I’ve used Photoshop Express to edit images for social media but that’s about it. I have no reason to use it as I have the full Photoshop package, but it can give you a taste of what Photoshop has to offer.

Link: https://www.adobe.com/products/photoshop-express.html

3) Canva

Price: Free, web based. A paid version is also available at $119.99 when paid annually or $12.99 paid monthly.

Description: Launched in 2013, Canva is an online design and visual communication platform with a mission to empower everyone in the world to design anything and publish anywhere.

Features: Curved text generator, photo effects, image enhancer, add frames to photos, add text to photos, online video recorder, video trimmer, convert videos to MP4.

Personal Experience: I’ve personally only used Canva twice and only recently heard of it a few weeks ago. It’s definitely a powerful application packed into a browser. It’s great to see things that are easily accessible nowadays. I’ve heard great things and it’s definitely something you should try out with the numerous templates available to you.

Link: https://www.canva.com/

4) Paint.NET

Price: Free

Description: The application has been extensively rebuilt to improve functionality and ease of use while packing numerous new features into the now familiar user interface (UI). paint.net 5 works exclusively on the Windows operating system, requiring Windows 10 as a minimum.

Features: Open and edit multiple images, layers, unlimited history, support for many popular file formats, extensions.

Personal Experience: I’ve used Paint.NET in the past but always found myself going back to GIMP whenever needed. I also used a Mac back in the day and just felt more comfortable in GIMP since Paint.NET wasn’t available on Apple products. Still a great and free alternative to Photoshop though.

Link: https://getpaint.net/download.html

5) Inkscape

Price: Free

Description: Inkscape is a free and open source vector graphics editor for GNU/Linux, Windows and macOS. It offers a rich set of features and is widely used for both artistic and technical illustrations such as cartoons, clip art, logos, typography, diagramming and flowcharting. It uses vector graphics to allow for sharp printouts and renderings at unlimited resolution and is not bound to a fixed number of pixels like raster graphics.

Features: Object creation, object manipulation, fill and stroke, operations on paths, text support, rendering, tons of file formats.

Personal Experience: I don’t think I’ve ever used Inkscape before but I’ve seen it used. It’s not extremely popular but it is open source. Also, it provides elements that are not seen in some of the previous ones listed.

Link: https://inkscape.org/release/

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' },
        ],
    };

1.

Can we have some more reactions?

Maybe an applause? Sad?

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>