this post was submitted on 11 Jun 2023
22 points (100.0% liked)

Kbin Userstyles and Userscripts

4 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
22
Share your CSS and JS snippets here (kbin.social)
submitted 1 year ago by artillect@kbin.social to c/kbinStyles@kbin.social
32 comments fedilink hide all child comments
 

Here's a place to share your little tweaks that you might think aren't big enough to warrant a full post, share away!

you are viewing a single comment's thread
view the rest of the comments
[–] Pamasich@kbin.social 1 points 1 year ago* (last edited 1 year ago)

I don't like the scrollable UI on the user page, so I wrote some css to instead display all options in multiple rows:

.page-user {
    & .options__title > h2 {
        display: none;
    }
    & aside.options {
        display: block;
        height: unset;
        padding-left: 10px;
    }
    & menu.options__main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        & li {
            padding-left: 5px;
        }
    }   
}

This CSS snippet:

  • changes the profile menu items to be displayed in multiple rows rather than a scrollable container
  • hides the name from the menu as it's already in the sidebar or the overview
  • adds some space between the menu items as a personal preference

If you don't want the username to be hidden, remove the 'h2' part. Though the other changes mean the name will be displayed in the upper right of the container instead of where it was before.

If you don't want the spacing between the menu items, remove the 'li' part.

Note that your browser needs to have support for css nesting for this to work as-is. You can see here which browsers have support and from which version onwards.