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.

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

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.

Eggyhead,
@Eggyhead@kbin.social avatar

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.

Pamasich, (edited )
@Pamasich@kbin.social avatar

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. (tried it now and this doesn't really seem possible there, has the same selector deletion issues as magazine css)

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%)).

Eggyhead,
@Eggyhead@kbin.social avatar

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.

Pamasich,
@Pamasich@kbin.social avatar

Edit: actually, this isn't behaving as expected, it's coloring comments too... will edit this comment in a moment when I find out why.

Go to your settings (via the dropdown that opens when you hover over your avatar and name in the top right) and you should see the "Appearance" section right at the top, containing a textbox labeled "Custom CSS".

Just paste the code in there.
Here it is again for reference:

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

If you want to have a bigger textbox, you can drag it longer by clicking and dragging below the scrollbar.

After pasting the code into the textbox, scroll to the bottom of the settings page and press the "Save" button between the Notifications and Account Deletion sections.

You should now see microblog posts in your main feed highlighted in red.

Now you can go back and change the color to something you actually want to see.

You can replace the red with another color name, or you can look up your desired color using this color picker and then copy the HSLA color it outputs below the color picker.

I recommend HSLA over the other options because it's easy to change later. It's just a base color + saturation + lightness + transparency. Rather than having to mix red green and blue in your head like you'd have to for adjusting rgb.

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.

Pamasich,
@Pamasich@kbin.social avatar

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.

shazbot,

New KES mod?

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • random
  • kbinMeta@kbin.social
  • meta
  • Macbeth
  • All magazines
    •