kbin-css: decluttered and parameterized theme
Hello, this is a client-side theme focused on high readability and removing extraneous visual widgets and icons. It is based on the way I liked to read content on that "other site."
For better or worse, the current kbin layout is very "mobile" in design and not the best for reading longform text on a desktop. This theme focuses on easing the layout and hopefully making threads look more forumlike.
It does take a "scorched earth" approach in removing stuff I don't like, but everything that starts disabled can be enabled again via the radio buttons provided, allowing you to toggle on/off various widgets on the fly.
This includes:
- sidebar
- footer
- activity
- thumbnails
- previews
- short description
- avatars
- upvotes, downvotes, or both
- icons
- elements of the text submission form
- numerous other elements
In addition, you can change the base color scheme via the color picker in order to globally control things like:
- body color
- link colors
- upvote/downvote colors
- blockquotes, code blocks, input fields
- hover/focus color
- text color
- etc.
Disclaimer: I have tested this at 1440P on a desktop environment at various scaling levels and dimensions and it seems to mostly be OK. I have not extensively checked for glitches on mobile aside from some rudimentary mocking. If you find something wrong, feel free to make a PR or inbox me.
Frontend is not my main focus area, so there may be some anti-patterns or things that are objectively stupid, particularly around the way I manipulated elements on the grid. Again, if something is being implemented wrongly here, please advise.
I know it's already been posted there, but for more kbin customisations, have a look at the @kbinStyles magazine
Feels like we are due for making a megamod combining these fixes
Either that or submit a pull request to the Kbin project. Unlike Reddit, Kbin is open source.
https://codeberg.org/Kbin
My opinion on it is that adding non-critical frontend suggestions to a project already in its infancy creates needless noise for the developers working on structural/backend changes. Moreover, such suggestions may clash with the designers' own vision. Client-side changes are seamless in that they can be continuously modified in a non-invasive manner after the fact if the end-user does not like the designs being made upstream, which (quite likely) may be the case even after the project is stable. So there is good reason for them to coexist. Moreover, insofar as such changes are in JavaScript or CSS, they serve as a proof of concept that the upstream developers can deploy into their existing codebase if they later decide they like those third-party fixes.
This is amazing, thank you!
This looks amazing, but I have no idea how to install it. Can you help?
In Github it says navigate to the script and follow the prompts, yet the link only opens a page with the script text, nothing happens. I'm using Brave by the way, is that the problem? Thank you for the amazing work you're doing.
Install stylus https://github.com/aclist/kbin-css#dependencies
Sorry if that was unclear. If you look at the dependencies at the top of the instructions, you need the Stylus extension. I believe it's only available in Firefox and Chrome. Once you have the extension installed, navigating to scripts like that one will bring up an install menu that lets you load the script and choose the parameters you want. It looks like this
I'll update the README tomorrow to make this clearer.
Brave is chromium based, along with basically all other browsers that arent firefox or safari.
I've updated the help file with screenshots and a more step-by-step walkthrough of how to install, hope this helps.
It looks very clean, thanks for sharing!
This is awesome
Fantastic work, thank you very much. I don't assume you're taking requests, but the only thing missing for me is if I could center the content, as right now it's all aligned to the left on my very large monitor and makes for awkward reading. I have no experience scripting but I'll look into trying to do this myself anyways. Again, thank you.
Sure, I could make it a toggle.
That would be ace. Also, this has improved my experience of kbin so much I would gladly contribute a few bucks to it. Maybe consider turning it into an extension or a more elaborate project as more people move here from Reddit. Thanks again.
Alright, I've updated it with a toggle and opened a ticket for it here. You can navigate to the install script again and it will prompt you to 'Update Style" on the left sidebar.
If this is satisfactory, I will close the ticket, otherwise let me know what resolution display you are working with and how much dead space we are talking about here. If you want to submit other issues, the best place to do so would be through there, although you must register an account to submit tickets. I am happy to fix any bugs or issues you find or entertain other ideas.
If you feel strongly about it, I've added a sponsor button to the top of the repository. I maintain a collection of open-source projects (chiefly QoL utilities for Linux) there, so if you throw a few bucks at one, you'd be contributing to the ongoing maintenance of all of them. Thanks.
Hotdamn you're fast! Amazing, this looks perfect, no need to be super precise about it, content is now centered and looks beautiful. You bet I'll donate a few bucks. Thank you.
Conversely I found kbin much better to use on mobile and somewhat confusing on mobile ๐ Great to see work to help it be better to use in any case!
The mobile display is more compact and seems generally usable out of the box as a web app. On desktop it defaults to this mobile-style layout and it's not ideal.
Wow, this looks awesome, great job!
@shazbot @fediversereport *Love* your username! Nanu Nanu
Thanks !
@shazbot installed, this is nice, thanks!
Thanks, will continue adding to it on a rolling basis and it should auto-update every 24 hours if enabled to do so in the settings. If you see anything that should be changed, let me know.
@shazbot OMG, thank you! That is a huge improvement.
Thanks, will continue adding to it on a rolling basis and it should auto-update every 24 hours if enabled to do so in the settings. If you see anything that should be changed, let me know.