/kbin meta @kbin.social Eggyhead @kbin.social 10mo ago

Two requests for microblog incorporation into the main feed.

First off, I absolutely love that microblogs are a part of my main feed now.

I do have a couple requests to consider, I apologize if this isn't the place to post such a thing.

I think an option to keep microblog replies inherently collapsed would keep the feed from feeling too cluttered.
Perhaps microblog posts could be colored a little differently from threads to make them more easily distinguishable at a glance?

You're viewing a single thread.

5 comments

The first request would definitely be a nice setting to have.

As for the second one, I think microblog posts are pretty easy to distinguish from threads already, as everything's organized completely differently. There's no title, the avatar is in a different spot with a different shape, the upvote button is in a different spot, there's no downvote button, etc. I think changing the color would just be visually jarring more than anything.
- That makes sense. I’m actually not used to microblogs, and I never actually got into Twitter, so the distinguishing characteristics don’t really stand out to me as much. I think the color variation would help me better process what I’m looking at.
  
  I think the color variation would help me better process what I’m looking at.
  
  You can change the color yourself btw. The traditional method is to install the Stylus extension/addon, but I think kbin now lets you define your own styling in your profile settings, though I haven't tried it.
  
  In the HTML code, microblog posts and threads are represented differently. Posts are blockquote, while threads are article. This makes it easy to restyle them via userstyles.
  
  So you should be able to just
  
  div#content { > article { /* thread styling */ } > blockquote { /* microblog post styling */ background-color: red; } }
  
  You can also define the color in rgb rgb(255,0,0) or hsl (hsl(0,100%,50%)).
  
  I am very pleased that this is possible, but I don’t even know what words to use to even ask how to do something like that.
  
  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.