Customize the appearance of Stack Exchange sites

Question

This extremely helpful post has enabled me to customize the appearance of the up/down arrows on Stack Exchange sites. By toying around a bit and making some fortunate guesses about the names of variables that control other aspects of the site's appearance, I've managed to push the customization slightly further.

General question: Is there a list somewhere of all the variables (including, for example, js-vote-down-bt, .js-vote-count) that I can redefine, and exactly what they control?

Specific question: In the absence of a complete list, can someone advise me on how to change the fonts on the tags that appear at the bottoms of posts? They seem to have recently turned boldface and I'd really like to tone them back down.

Answer 1

There is a Change Log post 2023 DOM Changelog for Userscript Community that tries to document changes in the DOM (Document Object Model) structure ahead of time.

All sites are using the Stacks Design system. It has guidance for naming of CSS classes on elements in the DOM where JavaScript interaction is expected.

We prefix our JavaScript target classes with .js- so that changing or adding a class name for styling purposes doesn’t inadvertently break our JS. This allows us to style elements with any chain of atomic or component classes from Stacks without breaking any additional JavaScript interactivity.

It is advisable for external User Scripts to use existing .js-* class names to find the elements their scripts and/or styles want to hook onto to.

You can quickly inspect whether a page has any js-* classes by running in the developer console:

$('[class^="js-"]')

For your specific case you're looking for Tags in the Design system: https://stackoverflow.design/product/components/tags/

There we learn we should be looking for s-tag but the DOM lacks any js-tag so you're best off applying styles to elements with s-tag in containers with js-post-tag-list-item for tags under the question and js-post-body for tags in questions and answers.

Using the Developer Tools of the browser reveals the DOM structure and classes/styles used (click to enlarge):

A quick fix is offered by InSync in their answer. Or in chat by TylerH. In general you can find scripts that enhance the UX of Stack Exchange sites on Stack Apps.

Note there is a current bug where the s-tag class is not present in HTML that wasn't re-rendered after the recent Tag UI design changes. A fix is planned. Allow for 6 to 8 weeks and until then use post-tag to select the right element.

To experiment on your own use the "Inspect" tool of your browser. You can use an add-in like Stylus if you want to change/apply the layout dictated by so called CSS Styles. Here is an example.

If you need more control over changes to the page look-and-feel and/or interaction, you might want install a User Script Manager and then create a user script that will run on the page you created it for. Here is an silly example to get you started:

// ==UserScript==
// @name         Yellow Link Marine
// @namespace    http://tampermonkey.net/
// @version      2024-05-23
// @description  Demo
// @author       You
// @match        https://meta.stackexchange.com/questions/400141/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=stackexchange.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // create the new CSS and style tag
    const cssStyle=`
       a {
          background: yellow;
       }

       .myFont {
          font-family: "Comic Sans MS", "Comic Sans", cursive;
          font-size: larger;
       }
    `

    const style = document.createElement('style')
    style.textContent = cssStyle;

    // find the HEAD element
    const allHeads = document.getElementsByTagName('head');
    const firstHead = allHeads[0];

    // Add our created style to the head
    firstHead.appendChild(style);

    // find Post tag container elements
    const postTags = document.getElementsByClassName('js-post-tag-list-item');

    // loop over each element
    for(const postTag of postTags) {
        // find the A element
        const links = postTag.getElementsByTagName('a');
        const firstLink = links[0];

        // apply CSS class to it
        firstLink.classList.add('myFont');
    }
})();