Useful styles for Twitter (alt text, hiding individual images)

README.md

useful twitter styles

Intro

These are meant to be injected via Stylus, an extension that allows customization and styling of various websites. (It's likely these styles would work in other tools allowing for customization or adding CSS, but I haven't checked any other tools personally. This uses pure vanilla CSS.)

This tool is currently designed to:

1. highlight images with no alt-text in red
2. show you the alt-text for images that have it when you hover over the image
3. [requires extra configuration] hides images from your timeline (note: this won't hide them if you actually click the link)

Installing

• Stylus for Firefox
• Stylus for Chrome

(If anyone else tries any other tools for any browsers, let me know!)

Setting up styles

Once you have set up a stylesheet for a domain and the rule is this: "Applies to All Urls On the Domain of twitter.com", copy and paste the CSS file in this gist into the styleshet.

(If you already have styles for Twitter, please insert these at the bottom, unless you know of conflicts.)

---

Max Cerrina (https://twitter.com/alephnaught2tog)

twitter_styles.css

/* 
    ===== Images+Alt styling =====

    We outline the images with *no* alt text in red, to draw our attention to
    them. (This style is supposed to not match and stick out.)

    The other styles tweak spacing, and the `:hover:after` styles allow us to
    see the alt text when we hover over an image in a relatively nice-looking
    way.
*/
/* Outline images with no alt text in red */
div[aria-label="Image"] {
    margin: 0 !important;
    border: 2px solid #f00;
}

/* Fix spacing */
div[data-testid="tweetPhoto"]:not([aria-label="Image"]) {
    margin: 0 !important;
}

/* Show alt text for other images when you hover over them */
div[data-testid="tweetPhoto"]:not([aria-label="Image"]):hover:after {
    content: attr(aria-label);
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 10px;
    font-family: sans-serif;
    font-size: 90%;
}

/* 
    ===== Hide Specific Images =====
*/
/* 
    To add more, find the `<a>` wrapping the image, and use the `href` 
    as below. The `href` should be URL starting with a slash and the username
    of the account posting it.

    **Note: this won't hide them if you actually click the link**

    e.g., swapping in the `href` for `URL_OF_SAD_DOG_PIC` below:
    [href="URL_OF_SAD_DOG_PIC"] { visibility: hidden; }

    Note: this will _only_ work for each tweet the photo is in specifically.

    That is, if you want to hide a very popular image that *many* folks are
    uploading, you will have to add the URL of each tweet that contains it
    as you find it.

    e.g.,
    [href="URL_OF_SAD_DOG_PIC_UPLOADED_BY_BOB"] { visibility: hidden; }
    [href="URL_OF_SAME_SAD_DOG_PIC_UPLOADED_BY_STEVE"] { visibility: hidden; }
*/

/* This hides the image showing the conversation re an amazon worker before the tornadoes */
[href="/MorePerfectUS/status/1470513075489054720/photo/1"] { visibility: hidden; }