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).
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.
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.
Thanks, this is the best implementation idea for this I've seen yet imo, will definitely be using this from now on.
I haven't found any bugs yet, but I'd like to request two future improvements:
Changing the order of magazines and collections
::: spoiler Details
I have like three collections and a ton of magazines, so having to scroll through all the magazines to reach the collections is a bit of a pain. It's still much easier than before this script, but it would be even better if I could move the collections above the magazines.
On the other hand, someone else might have the opposite situation and would prefer it the way it currently is, so unlike the other user I'm not asking you to just swap the order.
I think the ideal solution would be adding a setting somewhere to determine which comes first. So every user can tailor the functionality to their needs.
:::
Support for turbo mode
::: spoiler Details
Ernest added turbo as an optional mode in the past months (you can find it in the sidebar options). It turns the site into a single page experience, which means kbin.social links don't open the website anew entirely but rather replace the page content, including the changes your script makes. This cuts down on loading time, but it also causes scripts to break.
It would be great if the script were to support turbo mode eventually, especially if Ernest makes it the standard in the future (it is marked as experimental currently, so that's probably the eventual intention).
To do so, you'd have to attach a MutationListener to the body element like I did here. But that will run many times more than just on navigation, so you'd also have to ensure your code does support being run multiple times without breaking.
:::
Kbin.social has just had some big issues recently and still hasn't fully recovered (which is why development is currently stalled), so it's absolutely possible you'll run into more issues currently than usual. Not sure if what you're experiencing there is part of that though.
And the people there are smallbrained for all flogging to one instance
I know you're from ani.social yourself, but you're telling that to kbin.social, THE main kbin site that according to fedidb has 23 times the active user count of the next biggest kbin/mbin instance (not counting artemis.camp since it's dead, but that one was 1/12 of kbin.social's size). We're really doing the same thing even more.
I can see recent (few hours ago) comments of mine on lemmy.world (and kbin.social is in the linked instances list), so it doesn't look like it actually stopped federating. But yeah, I can't access kbinmeta from over there.
edit: I think I've read, back when ernest was gone, about some big Lemmy instance blocking kbin.social magazine federation because of the bot spam in so many magazines. I assumed it's just rumors, but is it actually real and still a thing lemmy.world is doing?
Say, do you see any custom CSS anywhere? I mean, I'm not even sure which magazines use it anyway, do you see something on /m/pamasich? Besides the test banner, I also made the magazine name in the sidebar red.
If you don't see anything changed there, do you maybe have custom CSS turned off? In your settings, there's an option Ignore magazines custom CSS under a text field that lets you enter personal custom css. Make sure that's not checked.
I can see it. Maybe it's the point I mentioned here:
Though, something worth considering in case you intend to just use this code as-is: I just used pixels for simplicity. But the result might look entirely different on other screen resolutions than mine. Here's a list of better units to use if you want it to look the same on all screens. You can use percentages, pixels, and these other units interchangeably anywhere.
Maybe the values I gave are too small for you to see on your screen?
edit: wait, why does the image not work, I literally just uploaded it
edit 3: right, I just noticed that, because I'm mixing percentages and absolute units here, the image actually moves around as I change the screen size. I'll refine the example with more reliability later today.
Okay, so I've created a magazine and tested some stuff out.
In the first code I posted, I used the child selector (>) to select <header> elements directly inside <main> elements. For some reason, custom CSS doesn't seem to support the child selector. No matter where I try to use it, the style isn't applied.
I removed the child selector and instead used :has(hi1[hidden]) to make sure I only get the target element. Without it, it would also replace the background of the individual thread titles.
The image you're trying to use is a bit large, so I've included an example usage of background-size and background-position to change the size of the image and what part of it actually gets displayed.
With background-size, the first value is how wide the image should be, while the latter value is how high. Percentage values are relative to the element's size. So the width and height properties. You can also set absolute values, like I did with height in pixels in this example.
The big issue with this one though is that it'll only apply to the Threads and All Content views. Other views, including Microblog and individual threads, don't have the <header> element I'm looking for here.
The last two lines are there because this actually displays the name of the magazine on the banner. Since that's kind of redundant, since it's already in the bar at the top, I'm hiding the text and making it not selectable.
This one does work in all the views I tested except for when looking at a thread and its comments.
Though, something worth considering in case you intend to just use this code as-is: I just used pixels for simplicity. But the result might look entirely different on other screen resolutions than mine. Here's a list of better units to use if you want it to look the same on all screens. You can use percentages, pixels, and these other units interchangeably anywhere.
About the second code I posted, for some reason :before, much like the child selector, doesn't seem to work. I can very much target the #middle and #header elements from custom magazine CSS, but :before doesn't do anything.
I'm not sure why this is. I see no security reason to block them, so I assume it's not intentional. It's a bit hard to debug :before specifically because I don't know any way to get its styles without making it visible. So I have no idea if something is overwriting the style or if the selector just doesn't work, like is the case with the child selector. I'll have to look into this a bit more over the weekend.
A while ago, kbin's development came to a standstill because ernest was gone for weeks and the project's contribution guidelines are very restrictive.
Many contributors, including major ones, decided to leave the project and work on their own fork which uses more open contribution guidelines based on consensus.
They adopt all the changes ernest makes to kbin, but have their own features on top of that. I believe fedia.io, for example, runs mbin now.
Check if any userstyle/userscript is hiding it maybe? It's definitely still there for me, and I'm sure @ernest would have said something if he was A/B testing removing it.
Open source, non-corporate instances should be able to grow, and that growth will be stunted if most people who want to interact with the fediverse are deciding to go to corporate, profit-driven instances.
The issue is, how does defederating not promote leaving for Threads or instances that federate with Threads?
I think it's a good argument against Threads federating at all, but a poor one for defederating from Threads.
If Threads produces 95% of content in the fediverse, and your instance defederates from them, then your instance just doesn't have access to those 95% of content. Threads and its friends will be a lot more attractive then because it has 19x the content of what you have access to on your instance.
I think this will still lead to people leaving for the threads fediverse.
Also, I get the argument for Mastodon, but does /kbin actually have anything at all to fear here? Sure, the user numbers and content would be way higher than the rest of the fediverse. But Threads is a Twitter contender, not Reddit like /kbin and Lemmy. We will only see their content in the microblog tab.
Is the microblog tab actually that important to most people, that the instance could become dependent on Threads for dominating it? I honestly don't see it happen, I feel like this is an imported issue from microblogging platforms that's just repeated here despite being a non-issue for us.
I understood OP to be talking about mobile specifically.
And that's why I said Firefox or Kiwi. Both of those are mobile browsers (the latter is chromium) that support extensions, so you can just install your favorite monkey and stylus and add userscripts/userstyles the exact same way as on desktop.
I really don't see the issue. So more users is bad? I thought our issue is the lack of users currently.
I've seen people complain about ads and data harvesting here. But instances can already do that. Meta joining would change nothing about that. Actually, being a proper legal company, it might be easier to sue them over misusing your data than random instances.
"Embrace. Extend. Extinguish"? Let's stop between the last two steps then, not before the first one.
Kbin would be crippled by the amount of Threads content? I thought federation only happened if one kbin.social user is following a user on Threads? Should be as easily manageable then as Mastodon is currently. Or am I misunderstanding how this works?
To me, big sites federating looks like a clear advantage. I don't really get the big problem.