Skip to main content
Stack Apps

Return to Question

Added a 🞚 to the Community user.
Source Link
Little Nuts
Little Nuts
  • 751
  • 1
  • 4
  • 11

It turns this: enter image description hereBefore with trailing boxes

into this: enter image description hereAfter with icons on front pages and on posts.

Community 🞚

Since version 0.6, the Community user also gets its own icon: A comment by Community 🞚

and works in reviews too.

Should work with any user script manager with any of the major browsers.
Tested using TamperMonkeyTampermonkey with Opera.

// ==UserScript==
// @name         Stack Moderators & Staff
// @namespace    scratte-fiddlings
// @version      0.5
// @description  Indicate less that a user is moderator or staff
// @author       Scratte (https://stackoverflow.com/users/12695027)
// @include      https://meta.stackoverflow.com*
// @exclude      https://meta.stackoverflow.com/users*
// @include      https://meta.stackexchange.com*
// @exclude      https://meta.stackexchange.com/users*
// @icon         https://www.google.com/s2/favicons?domain=stackexchange.com
// @grant        none
// ==/UserScript==

(function(win, doc) {
    'use strict';

    doc.addEventListener('readystatechange', () => {
        swap();
    });

    $(doc) // needed to include comments using "Show X more comments"
        .ajaxComplete((event, request, settings) => {
            swap();
         });

    function swap() {
        doc.querySelectorAll(".s-badge__moderator")
            .forEach(element => {
                         element.className = "";
                         element.textContent = "♦";
                         element.style.fontSize = "125%";
                         element.style.color = "#0077cc";
                         element.previousElementSibling?.classList.add("mr2");
                });

        doc.querySelectorAll(".s-badge__staff")
            .forEach(element => {
                         element.className = "";
                         element.textContent = "";
                         element.title = "Stack Exchange Inc Employee";
                         element.append(Svg.LogoGlyphXxs().get(0));
                         element.style.color = "var(--orange-400)";
                });
    }

})(window, document);

Download

GitHub | Install

It is set to workworks on Metaboth Stack Overflow (main & meta) and on Meta Stack Exchange. But it can easily be expanded to any other meta site by adding two lines to the user script header:

// @include      https/^https://meta(?:meta\.<siteurl>*)?<siteurl>/
// @exclude      https/^https://meta(?:meta\.)?<siteurl>/users*users/

// @include      https/^https://meta(?:meta\.superuser)?superuser\.com*com/
// @exclude      https/^https://meta(?:meta\.superuser)?superuser\.com/users*users/

It turns this: enter image description here

into this: enter image description here on front pages and on posts.

Should work with any user script manager with any of the major browsers.
Tested using TamperMonkey with Opera.

// ==UserScript==
// @name         Stack Moderators & Staff
// @namespace    scratte-fiddlings
// @version      0.5
// @description  Indicate less that a user is moderator or staff
// @author       Scratte (https://stackoverflow.com/users/12695027)
// @include      https://meta.stackoverflow.com*
// @exclude      https://meta.stackoverflow.com/users*
// @include      https://meta.stackexchange.com*
// @exclude      https://meta.stackexchange.com/users*
// @icon         https://www.google.com/s2/favicons?domain=stackexchange.com
// @grant        none
// ==/UserScript==

(function(win, doc) {
    'use strict';

    doc.addEventListener('readystatechange', () => {
        swap();
    });

    $(doc) // needed to include comments using "Show X more comments"
        .ajaxComplete((event, request, settings) => {
            swap();
         });

    function swap() {
        doc.querySelectorAll(".s-badge__moderator")
            .forEach(element => {
                         element.className = "";
                         element.textContent = "♦";
                         element.style.fontSize = "125%";
                         element.style.color = "#0077cc";
                         element.previousElementSibling?.classList.add("mr2");
                });

        doc.querySelectorAll(".s-badge__staff")
            .forEach(element => {
                         element.className = "";
                         element.textContent = "";
                         element.title = "Stack Exchange Inc Employee";
                         element.append(Svg.LogoGlyphXxs().get(0));
                         element.style.color = "var(--orange-400)";
                });
    }

})(window, document);

It is set to work on Meta Stack Overflow and Meta Stack Exchange. But it can easily be expanded to any other meta site by adding two lines to the user script header:

// @include      https://meta.<siteurl>*
// @exclude      https://meta.<siteurl>/users*

// @include      https://meta.superuser.com*
// @exclude      https://meta.superuser.com/users*

It turns this: Before with trailing boxes

into this: After with icons on front pages and on posts.

Community 🞚

Since version 0.6, the Community user also gets its own icon: A comment by Community 🞚

and works in reviews too.

Should work with any user script manager with any of the major browsers.
Tested using Tampermonkey with Opera.

Download

GitHub | Install

It is set to works on both Stack Overflow (main & meta) and on Meta Stack Exchange. But it can easily be expanded to any other meta site by adding two lines to the user script header:

// @include      /^https://(?:meta\.)?<siteurl>/
// @exclude      /^https://(?:meta\.)?<siteurl>/users/

// @include      /^https://(?:meta\.)?superuser\.com/
// @exclude      /^https://(?:meta\.)?superuser\.com/users/
Fixed sudden broken spacing between username and flair (diamond)..
Source Link
Little Nuts
Little Nuts
  • 751
  • 1
  • 4
  • 11
// ==UserScript==
// @name         Stack Moderators & Staff
// @namespace    scratte-fiddlings
// @version      0.45
// @description  Indicate less that a user is moderator or staff
// @author       Scratte (https://stackoverflow.com/users/12695027)
// @include      https://meta.stackoverflow.com*
// @exclude      https://meta.stackoverflow.com/users*
// @include      https://meta.stackexchange.com*
// @exclude      https://meta.stackexchange.com/users*
// @icon         https://www.google.com/s2/favicons?domain=stackexchange.com
// @grant        none
// ==/UserScript==

(function(win, doc) {
    'use strict';

    doc.addEventListener('readystatechange', () => {
        swap();
    });

    $(doc) // needed to include comments using "Show X more comments"
        .ajaxComplete((event, request, settings) => {
            swap();
         });

    function swap() {
        doc.querySelectorAll(".s-badge__staff"badge__moderator")
            .forEach(element => {
                         element.className = "";
                         element.textContent = "";"♦";
                         element.titlestyle.fontSize = "Stack Exchange Inc Employee";"125%";
                         element.append(Svg.LogoGlyphXxs()style.get(0));color = "#0077cc";
                         element.stylepreviousElementSibling?.color = "varclassList.add(--orange-400"mr2")";;
                });

        doc.querySelectorAll(".s-badge__moderator"badge__staff")
            .forEach(element => {
                         element.className = "";
                         element.textContent = " ♦";"";
                         element.style.fontSizetitle = "125%";"Stack Exchange Inc Employee";
                         element.append(Svg.LogoGlyphXxs().get(0));
                         element.style.color = "#0077cc";"var(--orange-400)";
                });
    }

})(window, document);

// ==UserScript==
// @name         Stack Moderators & Staff
// @namespace    scratte-fiddlings
// @version      0.4
// @description  Indicate less that a user is moderator or staff
// @author       Scratte (https://stackoverflow.com/users/12695027)
// @include      https://meta.stackoverflow.com*
// @exclude      https://meta.stackoverflow.com/users*
// @include      https://meta.stackexchange.com*
// @exclude      https://meta.stackexchange.com/users*
// @icon         https://www.google.com/s2/favicons?domain=stackexchange.com
// @grant        none
// ==/UserScript==

(function(win, doc) {
    'use strict';

    doc.addEventListener('readystatechange', () => {
        swap();
    });

    $(doc) // needed to include comments using "Show X more comments"
        .ajaxComplete((event, request, settings) => {
            swap();
         });

    function swap() {
        doc.querySelectorAll(".s-badge__staff")
            .forEach(element => {
                         element.className = "";
                         element.textContent = "";
                         element.title = "Stack Exchange Inc Employee";
                         element.append(Svg.LogoGlyphXxs().get(0));
                         element.style.color = "var(--orange-400)";
                });

        doc.querySelectorAll(".s-badge__moderator")
            .forEach(element => {
                         element.className = "";
                         element.textContent = " ♦";
                         element.style.fontSize = "125%";
                         element.style.color = "#0077cc";
                });
    }

})(window, document);

// ==UserScript==
// @name         Stack Moderators & Staff
// @namespace    scratte-fiddlings
// @version      0.5
// @description  Indicate less that a user is moderator or staff
// @author       Scratte (https://stackoverflow.com/users/12695027)
// @include      https://meta.stackoverflow.com*
// @exclude      https://meta.stackoverflow.com/users*
// @include      https://meta.stackexchange.com*
// @exclude      https://meta.stackexchange.com/users*
// @icon         https://www.google.com/s2/favicons?domain=stackexchange.com
// @grant        none
// ==/UserScript==

(function(win, doc) {
    'use strict';

    doc.addEventListener('readystatechange', () => {
        swap();
    });

    $(doc) // needed to include comments using "Show X more comments"
        .ajaxComplete((event, request, settings) => {
            swap();
         });

    function swap() {
        doc.querySelectorAll(".s-badge__moderator")
            .forEach(element => {
                         element.className = "";
                         element.textContent = "♦";
                         element.style.fontSize = "125%";
                         element.style.color = "#0077cc";
                         element.previousElementSibling?.classList.add("mr2");
                });

        doc.querySelectorAll(".s-badge__staff")
            .forEach(element => {
                         element.className = "";
                         element.textContent = "";
                         element.title = "Stack Exchange Inc Employee";
                         element.append(Svg.LogoGlyphXxs().get(0));
                         element.style.color = "var(--orange-400)";
                });
    }

})(window, document);
Better thumbnail
Source Link
Little Nuts
Little Nuts
  • 751
  • 1
  • 4
  • 11
Used the second image for the thumbnail; added relevant tags.
Source Link
edit approved Aug 11, 2021 at 19:19
41686d6564
edit approved Aug 11, 2021 at 19:19
41686d6564
  • 225
  • 1
  • 8
Fixed some odd grammar mistakes.
Source Link
Little Nuts
Little Nuts
  • 751
  • 1
  • 4
  • 11
Changed the parameters from global names.
Source Link
Little Nuts
Little Nuts
  • 751
  • 1
  • 4
  • 11
Source Link
Little Nuts
Little Nuts
  • 751
  • 1
  • 4
  • 11