discussion LU Tag color coding userscript.

[Darkrift411]

Someone went and destroyed everything I liked about the LU, so I spent a few hours cracking the whip at chatGPT to help me write a css for Stylist to fix most of it. But... one thing was missing. Someone had suggested a userscript (greasemonkey or tampermonkey) to color code tags. I had thought of it before, but never took that step. Today was the day. Below is a chatGPT created and ME tested userscript that I am now running in tampermonkey on Brave. It recolors all of the nasty ass red tag bubbles to navy and then lets you add your own colors for specific tags. It takes... just a tad bit of coding knowledge to understand how to add new colors, but it is not that hard.

// ==UserScript==
// @name         Latest Updates - Color Coded Tags
// @namespace    local.latest-updates
// @version      1.0
// @description  Color-codes Latest Updates tags based on their text.
// @match        https://lewdcorner.com/latest-updatesv2*
// @grant        none
// ==/UserScript==

(() => {
    'use strict';

    /*
     * Edit these however you want.
     *
     * Format:
     * "exact-tag-text": {
     *     background: "#hex",
     *     color: "#hex"
     * }
     */
    const tagColors = {
        "animated": { background: "green"},
        "incest": { background: "magenta"},
        "female-protagonist": { background: "hotpink"}
    };

    function colorTags(root = document) {
        root.querySelectorAll(".lcCardHoverTags > span").forEach(tag => {
            const key = tag.textContent.trim().toLowerCase();
            const style = tagColors[key];
            tag.style.background="navy";

            if (!style) {
                return;
            }

            tag.style.setProperty(
                "background-color",
                style.background,
                "important"
            );

            tag.style.setProperty(
                "border-color",
                style.background,
                "important"
            );
        });
    }

    colorTags();

    /*
     * The page may replace or append cards without a full reload,
     * so recolor tags whenever its DOM changes.
     */
    let pending = false;

    const observer = new MutationObserver(() => {
        if (pending) {
            return;
        }

        pending = true;

        requestAnimationFrame(() => {
            pending = false;
            colorTags();
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

To edit them, just change the tagname (must be exact) and the color you want. You can use VALID css "color words" or you can use hex color codes (#00ff00). You can add more if you wish, just watch that they all have a comma at the end except for the last one:

    const tagColors = {
        "animated": { background: "green"}, <----- comma here.
        "incest": { background: "magenta"}, <---- and comma here.
        "female-protagonist": { background: "hotpink"} <---- see? No comma here
    };

Not perfect, but... its a slight improvement until someone breaks it again.

You must be registered to see attachments

 

[Darkrift411]

A slightly updated version with most of the existing tags in it. I started color coding some... but the list is big and I am not very creative. I mostly colored ones I am not a fan of black and started finding colors that stood out for other stuff. Then I tried to use similar colors for similar things (like things done against the LI/FeMC such as drugs, corruption, etc as orange. Then I realized doing this as groups of similar tags was going to be a pain in the ass and mostly decided it is good enough for now. The default "yellow" that is done during the main loop is to help me detect tags that are not in my list. You can change that to the "dimgray"to disable this if you want. (also see below for the Stylist (extension) css override to change the LU V2 (which is on like V6 of the V2 ). This script was made for and tested in Tampermonkey for Brave. Might need slight changes for greasemonkey, or firefox, but should be fine in chrome.

// ==UserScript==
// @name         Latest Updates - Color Coded Tags
// @namespace    local.latest-updates
// @version      1.0
// @description  Color-codes Latest Updates tags based on their text.
// @match        https://lewdcorner.com/latest-updatesv2*
// @grant        none
// ==/UserScript==

(() => {
    'use strict';

    /*
     * Edit these however you want.
     *
     * Format:
     * "exact-tag-text": {
     *     background: "#hex",
     *     color: "#hex"
     * }
     */
    const tagColors = {
        "2d-game": { background: "dimgray"},
        "2dcg": { background: "dimgray"},
        "3d-game": { background: "dimgray"},
        "3dcg": { background: "dimgray"},
        "adjustable-age": { background: "dimgray"},
        "adult": { background: "dimgray"},
        "adventure": { background: "dimgray"},
        "ahegao": { background: "dimgray"},
        "ai-animation": { background: "olivedrab"},
        "anal-sex": { background: "dimgray"},
        "animated": { background: "green"},
        "anime": { background: "dimgray"},
        "bbw": { background: "dimgray"},
        "bdsm": { background: "dimgray"},
        "bestiality": { background: "dimgray"},
        "big-ass": { background: "dimgray"},
        "big-dick": { background: "dimgray"},
        "big-tits": { background: "dimgray"},
        "blackmail": { background: "darkorange"},
        "blow-job": { background: "dimgray"},
        "bukkake": { background: "dimgray"},
        "censored": { background: "dimgray"},
        "character-creation": { background: "dimgray"},
        "character-customization": { background: "dimgray"},
        "cheating": { background: "red"},
        "cheating-avoidable": { background: "red"},
        "combat": { background: "dimgray"},
        "corruption": { background: "darkorange"},
        "cosplay": { background: "dimgray"},
        "creampie": { background: "dimgray"},
        "cuckold": { background: "black"},
        "dating-sim": { background: "dimgray"},
        "dilf": { background: "dimgray"},
        "drugs": { background: "darkorange"},
        "dubcon": { background: "darkorange"},
        "dystopian-setting": { background: "dimgray"},
        "erotic": { background: "dimgray"},
        "exhibitionism": { background: "hotpink"},
        "exploration": { background: "dimgray"},
        "fantasy": { background: "dimgray"},
        "female-domination": { background: "black"},
        "female-protagonist": { background: "hotpink"},
        "femboy": { background: "dimgray"},
        "femdom": { background: "black"},
        "fisting": { background: "dimgray"},
        "foot_fetish": { background: "black"},
        "footjob": { background: "black"},
        "furry": { background: "black"},
        "futanari": { background: "dimgray"},
        "futatrans": { background: "dimgray"},
        "futatrans-avoidable": { background: "dimgray"},
        "futatrans-protagonist": { background: "dimgray"},
        "gay": { background: "black"},
        "gilf": { background: "dimgray"},
        "gore": { background: "dimgray"},
        "graphic-violence": { background: "dimgray"},
        "groping": { background: "dimgray"},
        "group-sex": { background: "dimgray"},
        "handjob": { background: "dimgray"},
        "harem": { background: "dimgray"},
        "hebe": { background: "dimgray"},
        "hentai": { background: "dimgray"},
        "horror": { background: "dimgray"},
        "humiliation": { background: "dimgray"},
        "humor": { background: "dimgray"},
        "impregnation": { background: "dimgray"},
        "incest": { background: "magenta"},
        "incest-optional": { background: "dimgray"},
        "internal-view": { background: "dimgray"},
        "interracial": { background: "dimgray"},
        "japanese-game": { background: "dimgray"},
        "kinetic-novel": { background: "dimgray"},
        "lactation": { background: "dimgray"},
        "lesbian": { background: "dimgray"},
        "lesbian-avoidable": { background: "dimgray"},
        "loli": { background: "dimgray"},
        "male-domination": { background: "dimgray"},
        "male-protagonist": { background: "dodgerblue"},
        "maledom": { background: "dimgray"},
        "management": { background: "dimgray"},
        "masturbation": { background: "dimgray"},
        "milf": { background: "dimgray"},
        "mind-control": { background: "darkorange"},
        "mini-games": { background: "dimgray"},
        "mobile-game": { background: "dimgray"},
        "monster": { background: "dimgray"},
        "monster-girl": { background: "dimgray"},
        "multiple-endings": { background: "dimgray"},
        "multiple-penetration": { background: "dimgray"},
        "multiple-protagonist": { background: "dimgray"},
        "mystery": { background: "dimgray"},
        "necrophilia": { background: "dimgray"},
        "netorare": { background: "black"},
        "netorare-2": { background: "black"},
        "netorase": { background: "black"},
        "netori": { background: "dimgrey"},
        "no-sexual-content": { background: "lavender"},
        "nsfw": { background: "dimgray"},
        "ntr": { background: "black"},
        "ntr-avoidable-2": { background: "black"},
        "oral-sex": { background: "dimgray"},
        "paranormal": { background: "dimgray"},
        "parody": { background: "dimgray"},
        "part-time-job": { background: "dimgray"},
        "platformer": { background: "dimgray"},
        "point-click": { background: "dimgray"},
        "pov": { background: "dimgray"},
        "pregnancy": { background: "dimgray"},
        "prostitution": { background: "dimgray"},
        "puzzle": { background: "dimgray"},
        "rape": { background: "dimgray"},
        "religion": { background: "dimgray"},
        "role-play": { background: "dimgray"},
        "romance": { background: "dimgray"},
        "rpg": { background: "dimgray"},
        "sandbox": { background: "dimgray"},
        "scat": { background: "dimgray"},
        "school-setting": { background: "dimgray"},
        "sci-fi": { background: "dimgray"},
        "sex-toys": { background: "dimgray"},
        "sexual-harassment": { background: "dimgray"},
        "sharing": { background: "black"},
        "sharingavoidable": { background: "black"},
        "shooter": { background: "dimgray"},
        "shota": { background: "dimgray"},
        "side-scroller": { background: "dimgray"},
        "simulator": { background: "dimgray"},
        "sissification": { background: "dimgray"},
        "slave": { background: "darkorange"},
        "sleep-sex": { background: "darkorange"},
        "slice-of-life": { background: "dimgray"},
        "small-tits": { background: "magenta"},
        "spanking": { background: "dimgray"},
        "squirting": { background: "dimgray"},
        "strategy": { background: "dimgray"},
        "stripping": { background: "dimgray"},
        "supernatural": { background: "dimgray"},
        "superpowers": { background: "dimgray"},
        "swinging": { background: "black"},
        "teasing": { background: "dimgray"},
        "teen": { background: "dimgray"},
        "tentacles": { background: "dimgray"},
        "text-based": { background: "dimgray"},
        "threesome": { background: "dimgray"},
        "titfuck": { background: "dimgray"},
        "trainer": { background: "darkorange"},
        "transformation": { background: "dimgray"},
        "transgender": { background: "dimgray"},
        "trap": { background: "dimgray"},
        "turn-based-combat": { background: "dimgray"},
        "twins": { background: "violet"},
        "urination": { background: "dimgray"},
        "vaginal-sex": { background: "dimgray"},
        "virgin": { background: "dimgray"},
        "virtual-reality": { background: "dimgray"},
        "visual-novel": { background: "dimgray"},
        "voiced-2": { background: "dimgray"},
        "vore": { background: "dimgray"},
        "voyeurism": { background: "dimgray"},
        "watersports": { background: "dimgray"},
        "wholesome": { background: "dimgray"},
    };

    function colorTags(root = document) {
        root.querySelectorAll(".lcCardHoverTags > span").forEach(tag => {
            const key = tag.textContent.trim().toLowerCase();
            const style = tagColors[key];
            tag.style.background="yellow";

            if (!style) {
                return;
            }

            tag.style.setProperty(
                "background-color",
                style.background,
                "important"
            );

            tag.style.setProperty(
                "border-color",
                style.background,
                "important"
            );
        });
    }

    colorTags();

    /*
     * The page may replace or append cards without a full reload,
     * so recolor tags whenever its DOM changes.
     */
    let pending = false;

    const observer = new MutationObserver(() => {
        if (pending) {
            return;
        }

        pending = true;

        requestAnimationFrame(() => {
            pending = false;
            colorTags();
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

This is the STYLIST (browser extension) to change the LU page for me. Again, use however you feel Was written by AI and tested by me. Below will be a screenshot of what htey look like together for me on my 4k screen.

/*
     * LATEST UPDATES V2 — WIDE 4K LAYOUT
     *
     * Change --lu-card-min to control card count:
     *   260px = more/smaller cards
     *   300px = roughly 9–10 on a 4K screen
     *   340px = roughly 8–9
     *   380px = roughly 7–8
     */
    :root {
        --lu-page-margin: 24px;
        --lu-card-min: 390px;
        --lu-card-gap: 12px;
        --lu-card-height: 400px;
    }

    /* Remove XenForo/theme's 1400px–1600px content limit. */
    .p-body-inner {
        width: calc(100% - (var(--lu-page-margin) * 2)) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure all intermediate content wrappers can use that width. */
    .p-body-main,
    .p-body-content,
    .p-body-pageContent {
        width: 100% !important;
        max-width: none !important;
    }

    /*
     * Ignore the site's 2–5 card setting and automatically fit as many
     * cards as the available width permits.
     */
    #lcLuGrid.lcClassicGrid {
        display: grid !important;
        grid-template-columns:
            repeat(auto-fit, minmax(min(100%, var(--lu-card-min)), 1fr))
            !important;
        gap: var(--lu-card-gap) !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* Prevent card internals from forcing columns wider than the grid. */
    #lcLuGrid > .lcCardSlot {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /*
     * Give images a less aggressively widescreen area.
     * 3 / 2 is somewhat taller than 16 / 9.
     */


    /* Let every card wrapper grow naturally. */
#lcLuGrid > .lcCardSlot,
#lcLuGrid .lcCard {
    height: auto !important;
    max-height: none !important;
}

    /* Taller media area: about 30% taller than the site's original ratio. */
    #lcLuGrid .lcCardMedia {
        display: block !important;
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 2.95 / 1 !important;

        flex: 0 0 auto !important;
        overflow: hidden !important;
    }

    /* Make picture wrappers participate in the media box correctly. */
    #lcLuGrid .lcCardMedia picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Fill the taller media area and crop as needed. */
    #lcLuGrid .lcCardMedia img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;

        object-fit: cover !important;
        object-position: center !important;
    }





/* =========================================================
   CARD CONTENT + FULL PERMANENT TAGS — CURRENT SITE VERSION
   ========================================================= */

/* Grid rows use the tallest card in each individual row. */
#lcLuGrid.lcClassicGrid {
    grid-auto-rows: auto !important;
    align-items: stretch !important;
}

/* Each slot stretches with its grid row. */
#lcLuGrid > .lcCardSlot {
    display: flex !important;
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Normal vertical card layout. */
#lcLuGrid > .lcCardSlot > .lcCard {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    position: relative !important;
    inset: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

/*
 * Flatten the normal body so its title and metadata can be explicitly
 * ordered alongside the complete tag list.
 */
#lcLuGrid .lcCardBody {
    display: contents !important;
}

/*
 * The hover preview now contains:
 *   - duplicate image
 *   - duplicate title/stats
 *   - creator/rating
 *   - complete tag list
 *
 * Flatten its wrappers, then hide everything except the complete tags.
 */
#lcLuGrid .lcCardHoverPreview,
#lcLuGrid .lcCardHoverDetails {
    display: contents !important;
}

/* Hide the developer's new four-tag strip and +XX button. */
#lcLuGrid .lcCardRestingTags {
    display: none !important;
}

/* Hide all duplicated hover-card components. */
#lcLuGrid .lcCardHoverMedia,
#lcLuGrid .lcCardHoverSummary,
#lcLuGrid .lcCardHoverCreator {
    display: none !important;
}

/* Explicit card order. */
#lcLuGrid .lcCardMedia {
    order: 10 !important;
}

#lcLuGrid .lcCardMediaActions {
    order: 15 !important;
}

#lcLuGrid .lcCardTitle {
    order: 20 !important;
}

#lcLuGrid .lcCardHoverTags {
    order: 30 !important;
}

#lcLuGrid .lcCardCompactMeta {
    order: 40 !important;
}

/* Keep the original image/gallery fully visible. */
#lcLuGrid .lcCardMedia {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: 2.95 / 1 !important;
    flex: 0 0 auto !important;

    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
}

/* Original linked image, including its working previous/next controls. */
#lcLuGrid .lcCardMediaLink {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#lcLuGrid .lcCardImage {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure engine/render/version badges sit above the title panel. */
#lcLuGrid .lcCardMediaBottom {
    z-index: 6 !important;
}

#lcLuGrid .lcCardMediaArrow {
    z-index: 7 !important;
}

/* Title spacing. */
#lcLuGrid .lcCardTitle {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 8px 10px 5px !important;
}

/* Permanent complete-tag area. */
#lcLuGrid .lcCardHoverTags {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    align-items: center !important;

    position: static !important;

    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;

    gap: 5px !important;
    padding: 2px 10px 7px !important;

    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;

    overflow: hidden !important;
    pointer-events: auto !important;
}

/* Individual tag pills. */
#lcLuGrid .lcCardHoverTags > span {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;

    max-width: 100% !important;

    margin: 0 !important;
    padding: 2px 5px !important;

    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;

    visibility: visible !important;
    opacity: 1 !important;
}

/* Show 15 tags normally. */
#lcLuGrid .lcCardHoverTags > span:nth-child(n + 33) {
    display: none !important;
}

/* Reveal the remaining tags while hovering that card. */
#lcLuGrid .lcCard:hover .lcCardHoverTags > span:nth-child(n + 33) {
    display: inline-flex !important;
}

/* Metadata stays at the bottom of equal-height cards. */
#lcLuGrid .lcCardCompactMeta {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-top: auto !important;
    padding: 2px 10px 9px !important;
}




/* =========================================================
   FINAL STABILIZER — KEEP THIS AT THE VERY END
   ========================================================= */

/* Actually use the adjustable card-height variable. */
#lcLuGrid.lcClassicGrid {
    grid-auto-rows: minmax(var(--lu-card-height), auto) !important;
    align-items: stretch !important;
}

#lcLuGrid > .lcCardSlot {
    min-height: var(--lu-card-height) !important;
    height: auto !important;
}

#lcLuGrid > .lcCardSlot > .lcCard {
    min-height: var(--lu-card-height) !important;
    height: 100% !important;
}

/*
 * Allow the complete tag list through, but suppress every other part
 * of the developer's duplicate hover card.
 */
#lcLuGrid .lcCardHoverPreview {
    display: contents !important;
}

#lcLuGrid .lcCardHoverPreview > .lcCardHoverMedia,
#lcLuGrid .lcCardHoverPreview > .lcCardHoverSummary {
    display: none !important;
}

#lcLuGrid .lcCardHoverDetails {
    display: contents !important;
}

#lcLuGrid .lcCardHoverDetails > .lcCardHoverCreator {
    display: none !important;
}

/* Extra defensive hiding for the duplicated hover gallery. */
#lcLuGrid .lcCardHoverMedia,
#lcLuGrid .lcCardHoverMediaLink,
#lcLuGrid .lcCardHoverImage,
#lcLuGrid .lcCardHoverArrow,
#lcLuGrid [data-hover-media-prev],
#lcLuGrid [data-hover-media-next] {
    display: none !important;
}

/* Hide the developer's first-three/four tags and +XX control. */
#lcLuGrid .lcCardRestingTags,
#lcLuGrid .lcCardRestingTagList,
#lcLuGrid .lcCardRestingTagsExtra,
#lcLuGrid .lcCardTagsToggle {
    display: none !important;
}

/*
 * Force the original gallery image to render immediately instead of
 * remaining transparent/filtered until the site's hover state activates.
 */
#lcLuGrid .lcCardMedia,
#lcLuGrid .lcCardMediaLink,
#lcLuGrid .lcCardImage {
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    content-visibility: visible !important;
}

#lcLuGrid .lcCardImage {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Prevent a site hover rule from hiding the normal image. */
#lcLuGrid .lcCard:not(:hover) .lcCardImage,
#lcLuGrid .lcCard:hover .lcCardImage,
#lcLuGrid .lcCardMedia.is-paused .lcCardImage {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Keep the original gallery arrows above the image. */
#lcLuGrid .lcCardMediaArrow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
}

/* Raise and enlarge the engine/render/version badges. */
#lcLuGrid .lcCardMediaBottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 5px !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;

    box-sizing: border-box !important;
    padding: 0 8px !important;

    z-index: 30 !important;
    pointer-events: none !important;
}

/* Keep the left and right badge groups above the card body. */
#lcLuGrid .lcCardMediaBadges {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;

    position: relative !important;
    z-index: 31 !important;
}

/* Slightly larger badges with clearer spacing. */
#lcLuGrid .lcCardMediaBottom .lcCardBadge {
    display: inline-flex !important;
    align-items: center !important;

    padding: 3px 6px !important;

    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;

    min-height: 0 !important;
    box-sizing: border-box !important;
}

/* Keep the version text aligned to the right. */
#lcLuGrid .lcCardMediaBadges--right {
    margin-left: auto !important;
    justify-content: flex-end !important;
}

This was just my attempt to get something useful out of the LU:

You must be registered to see attachments

Also note, this whole idea was from someone else, and I think it is this guy: LewdCorner Highlight Helper (I thought of it, he just did it first and was probably the one that mentioned it a few weeks ago that made me decide to do it (and by do it I mean crack the whip and make ChatGPT do it for me, coding is time consuming))