Amongog, (edited )
Amongog avatar

Stylesheet tweaks

Change boost button color when pressed

        /* Change boost color when pressed */
	.comment menu > a.active,
	.comment menu > li button.active {
		color: #53ffa6
	}

	.entry footer menu > a.active,
	.entry footer menu > li button.active {
		color: #53ffa6
	}
patchw3rk,
patchw3rk avatar

@Amongog So where do I put this?

Amongog,
Amongog avatar

If you already have an active syle, you can edit the code and add this snippet.

However, I made a small style that only has this change and the vote button colors.

So just install this one and you should be good!

https://userstyles.world/style/10361/kbin-small-mods

Pamasich,
Pamasich avatar

This sadly doesn't work anymore for me, the boost button doesn't get the active class anymore.

artillect,
artillect avatar

Stylesheet tweaks

Change vote colors

/* Change vote colors to match reddit */
.vote .active.vote__up button  {
  color: #ff8f65;
}

.vote .active.vote__down button  {
  color: #9494ff;
}

Get rid of margins on left and right side to match layout of old reddit

/* Get rid of margins */
.kbin-container {
  max-width: none;
}

Make post creation UI wider

/* Make post creator wider */
.page-entry-create .container {
    max-width: none;
}
uwu,
uwu avatar

Is there a way to implement the vote button colors in the custom CSS and JS inputs in the appearance section of the Magazine Panel?

artillect,
artillect avatar

If you add that to the custom CSS, it should work

uwu,
uwu avatar

I have this in the custom CSS:

#middle { background: url(https://karab.in/build/images/shape2.png); height: 100%; }

.vote .active.vote__up button  {
  color: #ff8f65;
}

.vote .active.vote__down button  {
  color: #9494ff;
}

But only the background works. Is that how you intended or should it be in a or something? The votes are just both still white. Does the site theme override it?

artillect,
artillect avatar

I think the site might be overriding it, try changing it to this:

.vote .active.vote__up button {
  color: #ff8f65 !important;
}

.vote .active.vote__down button {
  color: #9494ff !important;
}
uwu,
uwu avatar

Thanks, though unfortunately that didn't help either as far as I can tell. Appreciate it anyway

artillect,
artillect avatar

Based on what I've seen from others, it seems to not be working at the moment

uwu,
uwu avatar

Ahhhhh that would explain it. Excited to go ham once it's possible

Zana,

As someone very new to this, where does one add this?

artillect,
artillect avatar

First, install Stylus (chrome/edge, firefox), or Cascadea if you're on safari. Once you've done that, you can open the extension's menu and add a style for kbin.social. To do that in stylus, you just click on its icon, and then click on "kbin.social" under "write style for:". I'm not sure how it works in Cascadea but I'm sure it's a bit simpler.

Zana,

That worked perfect, thank you!

eh,

On your margin style, I'd also throw in something along the lines of margin: 0 4rem;. Just enough spacing so that things don't look too cramped

a-ninny-moose,

tampermonkey script to automatically hide voted (upvoted or downvoted) posts. Keep your feed always fresh.

// ==UserScript==
// @name hide voted posts
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://kbin.social/
// @match https://kbin.social/?p=*
// @icon https://www.google.com/s2/favicons?sz=64&domain=kbin.social
// @grant none
// ==/UserScript==
//(function() {

//})();
var $ = window.jQuery;

window.setInterval(clearVoted, 1000);

function clearVoted() {
'use strict';
var votedPosts = $('.vote__up.active') || $('.vote__down.active');
votedPosts.each(function() {
$(this).closest('.entry').css({'display':'none'});
});
}

EnglishMobster,
EnglishMobster avatar

I can see that it's running, but it doesn't seem to work for me. :(

SparkIT,
SparkIT avatar

I'm not sure if this is fine but since it wasn't active on every page I've added an asterisk on row 7 like this:
// @match https://kbin.social/*
and it seems to work.

Pamasich,
Pamasich avatar

Several snippets I wrote to customize my experience, which might be useful to others too:

When a comment is too long, the content is truncated in height and a bar is shown that expands the comment when pressed. This snippet makes the bar more narrow and also adds some visual feedback when you hover over it.

.subject .more {
    margin-left: 40%;
    width: 30%;
    border-radius: 15px;
    
    &:hover {
        filter: opacity(85%);
    }
}

I'm using KES (Kbin Enhancement Script) and it adds this settings button to the rightmost of the header, past the user button. This placement, and the different size of the button, makes it very disorienting for me. This snippet moves the KES button to the left of the user, and makes it look more like the other buttons as well.

#header li {
    &.dropdown:has(a.login) {
        order: 2;
    }

    &#kes-settings #kes-settings-button {
        padding-left: 0px !important;
        padding-right: 0px !important;
        min-width: 0px !important;
    }
}

This snippet requires the :has() selector to function. It's relatively new and only supported out of the box in recent-ish Chromium browser versions, so if you use Firefox check here for how to make it work.

When hovering over menu items on kbin, the item being hovered over has the same white line below it as the active item. This snippet makes it visually distinct by changing the shade a bit.

.options >* a:hover, #header a:hover {
    border-bottom-color: hsl(0,0%,70%) !important;
}

KES adds an OP label with customizable colors, but it enforces that the label has both a foreground and a background color. This snippet removes the background color.

a.user-inline::after {
    background-color: unset !important;
}

KES adds collapsible comments with colored lines. I'm not personally a big fan of the colors, but especially the white line for the first level was bothering me. It just didn't look good to have white on my dark theme. This snippet changes all lines to be gray, matching the theme I'm using. You'll probably have to change the color to match your own theme.

.expando {
    & > .threadLine {
        background-color: hsl(0,0%,40%);
    }
    
    &:hover > .threadLine {
        background-color: hsl(0,0%,60%);
    }
}

One more for KES's collapsible comments: when a comment is collapsed, you can click on it to uncollapse it. In the version I have, this does not work in the full width of the comment. The right half of comments isn't clickable and doesn't uncollapse the comment. This snippet changes that so you can click in the full width.

.collapsed-comment {
    grid-template-columns: 20px 20px 1fr !important;
}
Pamasich,
Pamasich avatar

I tried writing some css to display the text on the profile next to a user's avatar rather than below. Doesn't work for every profile for me in its current version, but figured I'll post it here anyway.

.user-box > .with-avatar {
    & .user-main {
        display: inline-block; 
    }
    & .about {
        display: inline-block;
    } 
}

Should save some vertical space on PC on profiles it works on.

Pamasich,
Pamasich avatar

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.

eh, (edited )

Here are some uBlock Origin filters I crafted to hide some parts of the sidebar:

*##^.kbin-container #sidebar > .active-users
*##^.kbin-container #sidebar > .related-magazines
*##^.kbin-container #sidebar > .section.posts
*##^.kbin-container #sidebar > .section.entries

Should work on all kbin instances, and uses HTML filtering (^, only works on Firefox) so you don't end up with a million random avatars from active users trying to load all to get hidden away

CSS to make the sidebar smaller. Especially useful with the max-width snippet shared by OP. Assumes sidebar on the right.

	#middle .kbin-container {
		grid-template-columns: 1fr 300px;
	}

CSS to move the image to the left on compact view

	main#main.view-compact article.entry {
		grid-template-areas:
			"vote image title"
			"vote image meta"
			"vote image footer"
			"body body body"
			"preview preview preview" !important;
		grid-template-columns: min-content min-content 1fr;
	}
patchw3rk,
patchw3rk avatar

Would it be possible to highlight the username of people you follow?

artillect,
artillect avatar

It should be possible, but it might be kinda difficult. I'll see if I can make something that does that!

patchw3rk,
patchw3rk avatar

@artillect Yay, thank you!

static,
static avatar

CSS, Change user color based on domain.
Just add more lines if you want to color more domains.

a.user-inline[title*="exploding-heads.com"] {
color: red;
}

subigo,

/ Change comment padding to be more compact /
.comment {
grid-gap: 0rem 0.6rem;
}

/ Front page list padding more compact /
.entry {
padding: 0.5rem 0.5rem 0.1rem 0.5rem;
}

thesoloist,
thesoloist avatar

@blobcat put in the work and posted a great css theme that I edited a bit. It's a bit darker, cleaner. Here's the link to my edit if anyone wants it.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • kbinStyles
  • PowerRangers
  • DreamBathrooms
  • thenastyranch
  • magazineikmin
  • hgfsjryuu7
  • Youngstown
  • InstantRegret
  • slotface
  • everett
  • rosin
  • ngwrru68w68
  • kavyap
  • tsrsr
  • ethstaker
  • normalnudes
  • GTA5RPClips
  • Durango
  • cisconetworking
  • osvaldo12
  • vwfavf
  • khanakhh
  • mdbf
  • cubers
  • modclub
  • tacticalgear
  • tester
  • Leos
  • anitta
  • All magazines
    •