Pamasich, 4 months ago

The images I'm using here probably won't work as embeds, but opening them as links should work.

Depending on if you use Firefox or a Chromium-based browser (Chrome, Edge, and almost all the others), get yourself the Stylus extension (chromium) or addon (firefox).

Once installed in your browser, open the extension by clicking on the icon next to your address bar. If it's not there, there's a puzzle piece button to open a list of all your extensions where you can click on it. I'm writing this from an Edge perspective, so for other browsers, especially Firefox, this might not be entirely accurate.

This opens up a menu where your current styles are listed and can be turned on/off (well, the list is empty for now of course), and there's buttons to "Manage" and "Find styles".
Above those buttons, there's a link to the current page. Click on the kbin.social part of that link.

This should open up the editor in a new window.
Just copy and paste the following code into that window.

div#content {
    > article {
        /* thread styling */
    }
    > blockquote, > blockquote + .comments > blockquote {
        /* microblog post styling */
        background-color: red;
    }
}

Give the style a name to the left and hit the yellow "Save" button. The site will update in real time, you shouldn't even need to reload it for the changes to take effect after saving. In fact, after saving it once, you don't even have to keep saving it after every change in my experience.

I've changed the above code a bit to also cover the replies to posts, that's what the .comments stuff is about.

This will give you a very red background. I just chose this for the example to make the change obvious to see at a glance. You can replace the red with another color name, or an RGB or HSL value for a more granular choice.

I recommend using HSL if you want to tweak the color later without having to open up a color picker. You just choose a base color, how saturated it should be, and how light you want it. And optionally the transparency.
The HSL equivalent for red is hsl(0,100%,50%).

If you just want microblog posts to be a bit lighter or darker (depending on your theme) than threads, you can use hsla(0,0%,100%,0.15) (this makes them lighter, change the 100% to 0% for darker). Tweak the transparency (the last value) to change the intensity of the color change.

Besides the background color, you can also change other CSS properties. Just add additional lines in the pattern property: value;.
For example, you can set a border using border: 1px red solid;, which creates a red solid border of 1 pixel width.
I like to use this site as a reference myself for what properties exist and how they're used.