this post was submitted on 27 Jun 2023
127 points (100.0% liked)

Kbin Userstyles and Userscripts

15 readers
1 users here now

Custom CSS and JS to help improve your Kbin experience! ### Userscripts Greasy Fork ### Stylesheets UserStyles.world ### Userscript managers

founded 1 year ago
 

BEFORE AND AFTER
This userstyle makes Kbins navigation bar at the bottom of posts more clear and easy to read.

works for ALL themes, just change the color as you please

I literally couldn't tell what page I was on before. Nothing fancy, super simple CSS, but effective! Hope at least some people find this helpful!

#kbinstyles #css

top 25 comments
sorted by: hot top controversial new old
[–] [email protected] 12 points 1 year ago (1 children)

What I'd really love is for clicking on notifications to take me to the actual page the comment is on.

[–] [email protected] 3 points 1 year ago* (last edited 1 year ago)

me too 👀

[–] [email protected] 7 points 1 year ago (1 children)

oh thats QUITE the improvement! Thanks alot.

[–] [email protected] 6 points 1 year ago

glad you think so ╰(´꒳`)╯

[–] [email protected] 6 points 1 year ago (1 children)

Such a simple but needed fix. Ty!

[–] [email protected] 3 points 1 year ago

youre very welcome c:

[–] [email protected] 6 points 1 year ago (1 children)
[–] [email protected] 3 points 1 year ago

np! (⸝⸝⸝• ω •⸝⸝⸝) ♡

[–] [email protected] 2 points 1 year ago (2 children)

We also need some way to keep it from getting so wide on narrow displays. On my phone, once you're a few pages in, the next page arrow is all the way on the edge of the screen. Multiple times I've gone to the very last page cause it's hard to click the next page arrow. Not even sure what the use case is to go to the last page.

[–] [email protected] 2 points 1 year ago (1 children)

can you take a screenshot of what youre seeing? i only use kbin on desktop lol

[–] [email protected] 1 points 1 year ago (1 children)

Here's a screenshot showing page 10. The pagination displays so many page numbers in this case that the arrows are completely off screen (lower page numbers will have them getting closer to the edge).

[–] [email protected] 1 points 1 year ago

thanks for the sc! ill see what i can do 👀

[–] [email protected] 1 points 1 year ago

I get this issue too. I'm using kbin as a PWA through Firefox on android.

[–] [email protected] 1 points 1 year ago (1 children)

Looks awesome! The current page is invisible if you're using a light theme though:
KBin light theme

[–] [email protected] 3 points 1 year ago* (last edited 1 year ago)

edit: i forgot that i made it customizable so you can change the color as you please!

a̶h̶ ̶c̶r̶a̶p̶ ̶i̶ ̶d̶i̶d̶n̶t̶ ̶e̶v̶e̶n̶ ̶t̶a̶k̶e̶ ̶l̶i̶g̶h̶t̶ ̶t̶h̶e̶m̶e̶ ̶i̶n̶t̶o̶ ̶a̶c̶c̶o̶u̶n̶t̶,̶ ̶t̶h̶a̶n̶k̶s̶ ̶f̶o̶r̶ ̶r̶e̶m̶i̶n̶d̶i̶n̶g̶ ̶m̶e̶.̶ ̶i̶l̶l̶ ̶s̶o̶r̶t̶ ̶i̶t̶ ̶a̶n̶d̶ ̶u̶p̶d̶a̶t̶e̶ ̶t̶o̶d̶a̶y̶

[–] [email protected] 1 points 1 year ago* (last edited 1 year ago) (1 children)

Agree that the contrast is wrong, but I think the active page button should be muted, since it’s the only one clicking on makes no sense. Your example, but inverted.

[–] [email protected] 1 points 1 year ago

it's 100% customizable, if you wanna change it, then feel free to change it C:

[–] [email protected] 1 points 1 year ago* (last edited 1 year ago)

Not sure how easy this would be, but perhaps change this to a js userscript and..

  1. expanded it to use the theme vars to set the highlighting (so it can work with both dark and light themes).

  2. add to GreasyFork and name script accordingly e.g. "Kbin Better Page Navigation.js"

(i am admittedly not very knowledgeable when it comes to userstyles vs userscripts).

EDIT:
i went ahead and created a "userscript" based on your "userstyle" which uses the kbin's theme vars to work with whatever theme is in use (only tested with the 5 current kbin color themes).

[–] [email protected] 1 points 1 year ago (1 children)

This definitely comes in handy! Thanks a lot, also for the other stuff, it's pretty neat.

[–] [email protected] 1 points 1 year ago
load more comments
view more: next ›