Userstyles General Thread - Post original KF styles, give feedback, and discuss styling of and relating to the site

Grin Machine · Apr 16, 2025

Linking my custom gruvbox theme I've been using for a few months. Not sure why the images came out so lossy, I guess I still don't know how to thumbnail...

the rat · Apr 17, 2025

I like quite a lot about the new theme but there are some things I disagree with. I'm not really good when it comes with CSS or general design so this is probably super wonky and shit but I figure I'd paste it here in case anyone might be interested.

CSS:

/* Kiwifarms-Rat CSS */
:root {
    --xf-buttonBg: var(--xf-buttonBg--h), var(--xf-buttonBg--s), var(--xf-buttonBg--l), var(--xf-buttonBg--a);
    --xf-buttonBg--h: var(--xf-contentBg--h);
    --xf-buttonBg--s: var(--xf-contentBg--s);
    --xf-buttonBg--l: calc(var(--xf-contentBg--l) + (var(--xf-color-adjust, 1) * 10%)) !important;
    --xf-buttonBg--a: var(--xf-contentBg--a);

    --xf-contentBg: var(--xf-contentBg--h), var(--xf-contentBg--s), var(--xf-contentBg--l), var(--xf-contentBg--a);
    --xf-contentBg--h: var(--xf-paletteColor1--h);
    --xf-contentBg--s: var(--xf-paletteColor1--s);
    --xf-contentBg--l: var(--xf-paletteColor1--l);
    --xf-contentBg--a: var(--xf-paletteColor1--a);

    --xf-paletteColor1: var(--xf-paletteColor1--h), var(--xf-paletteColor1--s), var(--xf-paletteColor1--l), var(--xf-paletteColor1--a);
    --xf-paletteColor1--h: 216;
    --xf-paletteColor1--s: 8%;
    --xf-paletteColor1--l: 24%;
    --xf-paletteColor1--a: 1;


    --xf-paletteColor2: var(--xf-paletteColor2--h), var(--xf-paletteColor2--s), var(--xf-paletteColor2--l), var(--xf-paletteColor2--a);
    --xf-paletteColor2--h: 218;
    --xf-paletteColor2--s: 8%;
    --xf-paletteNeutral2--l: 18% !important;
    --xf-paletteColor2--a: 1;
}

.p-sectionLinks {
    padding-left: 10% !important;
    padding-right: 10% !important;
}

@media (min-width: 1401px) {
    .p-nav {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }

    .xb-toggle-default .xb-page-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }
}

.xb-page-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.p-body-inner {
    padding-top: 0% !important;
    max-width: 80% !important;
}

.p-footer {
    margin-top: 2% !important;
    background-color: rgb(0, 0, 0, 65%) !important;
    border-top: 1px solid rgb(255, 255, 255) !important;
    border-bottom: 1px solid rgb(255, 255, 255) !important;
    margin-bottom: 1% !important;
}

.p-footer-linkList > li a {
    text-decoration: none !important;
}

.p-footer-linkList > li a:hover {
    text-decoration: underline !important;
}

.copyright-left {
    color: rgb(190, 190, 190) !important;
}

.copyright-left a {
    color: rgb(255, 255, 255) !important;
}

.p-navEl.is-selected {
    border-top: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
    border-left: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
    border-right: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
}

.p-navgroup {
    background: hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc((var(--xf-pageBg--l) - 5%) - 2.5%), var(--xf-pageBg--a)) !important;
    border-top: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
    border-left: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
    border-right: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
}

.p-navgroup-link.p-navgroup-link--iconic:hover {
    background: hsla(var(--xf-textColor--h), var(--xf-textColor--s), var(--xf-textColor--l), 12%) !important;
}

.fr-box.fr-basic {
    border-color: var(--input-border-heavy) !important;
}

.fr-btn-grp.fr-float-right.rte-tab--inactive.rte-tab--preview {
    border: none !important;
}

.fr-toolbar {
    border-bottom-color: var(--input-border-heavy) !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
}

.message-footer .message-actionBar {
    border-top-width: 1.5px !important;
    border-top-color: rgb(45, 45, 45) !important;
    padding-bottom: 0.5% !important;
}

/* 
DM's have the reaction bar below post actions for some reason
so it looks wonky without this, but thread posts look 
wonky with this.

.reactionsBar {
    padding-bottom: 1% !important;
    padding-top: 0.5% !important;
}
*/


/* Remove stripe effect
.structItemContainer .structItemContainer-group .structItem:nth-child(2n):not(.is-mod-selected) {
  background-color: initial !important;
}

.node + .node:nth-child(2n) {
  background-color: initial !important;
}
*/

.block-container {
    border-left: 1px solid hsla(var(--xf-borderColorFaint)) !important;
    border-right: 1px solid hsla(var(--xf-borderColorFaint)) !important;
    border-bottom: 1px solid hsla(var(--xf-borderColorFaint)) !important;
    border-top: 1px solid hsla(var(--xf-borderColorFaint)) !important;
    border-radius: 0px !important;
}

.block-header,
.block-minorHeader {
    /*background-color: rgb(0, 0, 0, 15%) !important;*/
    background: hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(var(--xf-pageBg--l) - 5%), var(--xf-pageBg--a)) !important;
}

.u-dt {
    font-size: 85% !important;
}

.pageNav-main {
    border-radius: 0px !important;
    box-shadow: 0 2px 2px 0 hsla(0, 0%, 0%, .14), 0 3px 1px -2px hsla(0, 0%, 0%, .12), 0 1px 5px 0 hsla(0, 0%, 0%, .2) !important;
}

.pageNav-page {
    box-shadow: unset !important;
    border-right: 1px solid rgb(50, 50, 50) !important;
    border-top: 1px solid hsla(var(--xf-borderColorHeavy)) !important;
    border-bottom: 1px solid hsla(var(--xf-borderColorHeavy)) !important;
}

.pageNav-page:first-child {
    border-left: 0.2px solid hsla(var(--xf-borderColorFaint)) !important;
}


/* Thread navigation links "[board] > [thread] >" */
.p-breadcrumbs > li > a,
a.ui,
a:hover,
a.ui:hover {
    border-radius: 2px !important;
}
.p-breadcrumbs > li > a:hover,
a.ui:hover {
    background: hsla(var(--xf-paletteNeutral3--h), var(--xf-paletteNeutral3--s), var(--xf-paletteNeutral3--l), 20%) !important;
}

.hb-quotes {
    font-size: 0.95rem !important;
}

/* fix strange floating left-side-navbar button behaviour */
.p-nav-scroller > div:nth-child(1) {
    margin-bottom: unset !important;
    padding-bottom: unset !important;
    overflow-x: hidden !important;
}

MongolianMongoose · Apr 21, 2025

My "Kamala Blue" theme.

/* ==UserStyle==
@Name KiwiFarms 2025 Kamala Blue
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */

@-moz-document domain("kiwifarms.st"), domain("kiwifarms.net"), domain("kiwifarms.hk") {

/*fix unreadable "Careercow" thread label*/
.label.label--skyBlue {
color: black;
}

/*fix reaction overflowing post container*/
.reactionsBar {
padding-bottom: 7px;
}

/*transparent header section*/
.p-nav--wrapper,
.p-nav,
.p-nav-inner,
.p-navSticky--primary {
background: transparent;
}

/*adjust color of selected items in header section*/
.p-nav-list .p-navEl.is-selected,
.p-sectionLinks {
padding-top: 0px !important;
color: hsla(var(--xf-textColor));
background: transparent

}

/*dark button*/
.button,
.button:hover {
background-color: hsl(200, 7.7%, 7.6%);
}

/*Single ccolor join date*/
.joined-2028,
.joined-2027,
.joined-2026,
.joined-2025,
.joined-2024,
.joined-2023,
.joined-2022,
.joined-2021,
.joined-2020,
.joined-2019,
.joined-2018,
.joined-2017,
.joined-2016,
.joined-2015,
.joined-2014,
.joined-2013,
.joined-2012,
.joined-2011,
.joined-2010 {
color: var(--xf-textColor) !important;
}

/*hide Ethan Ralph footer image*/
html[data-container-key="node-113"]::after {
background-image: none !important;
}

/*featured post padding*/
.structItem {
padding-left: 1.5% !important;
padding-right: 1.5% !important;
padding-top: 0.3% !important;
padding-bottom: 0.3% !important;
}

/*move post highlight indicator from top to left*/
.block--messages .message.hb-react-threadHighlight {
border-top: none !important;
border-left: 2px solid hsla(var(--xf-paletteAccent3));
border-radius: 0px !important;
}

/*featured post alternating color*/
.node+.node:nth-child(2n) {
background-color: #1a272c;
}
.structItem+.structItem:nth-child(2n + 1) {
background-color: #1a272c;
}

/*thinner memeber banner*/
.memberHeader--withBanner .memberHeader-main {
min-height: 0px;
background: rgba(0,0,0,0.4);
border: none;
}

/*hide comic background*/
.p-footer-custom,
.p-footer-inner {
background-image: none !important;
padding: 0px !important
}
.p-pageWrapper {
background: var(--xf-pageBg) !important;
}

/*START Custom Xenforo Color Theming*/
:root {
color-scheme: var(--xf-styleType) !important;
--xf-styleType: dark !important;

--xf-errorBg--h: 0;
--xf-errorBg--s: 17%;
--xf-errorBg--l: 12%;
--xf-errorBg--a: 100%;

--xf-errorColor--h: 358;
--xf-errorColor--s: 90%;
--xf-errorColor--l: 60%;
--xf-errorColor--a: 1;

--xf-pageBg--h: 195;
--xf-pageBg--s: 9%;
--xf-pageBg--l: 9%;

--xf-paletteAccent1--h: 199;
--xf-paletteAccent1--s: 75%;
--xf-paletteAccent1--l: 35%;

--xf-paletteColor1--h: 210;
--xf-paletteColor1--s: 11%;
--xf-paletteColor1--l: 12%;

--xf-paletteColor1-ALT--h: 196;
--xf-paletteColor1-ALT--s: 26%;
--xf-paletteColor1-ALT--l: 14%;

--xf-paletteColor2--h: 200;
--xf-paletteColor2--s: 5%;
--xf-paletteColor2--l: 12%;

--xf-buttonPrimaryBg--h: 199;
--xf-buttonPrimaryBg--s: 26%;
--xf-buttonPrimaryBg--l: 14%;
}

}

Can anyone help me hide the dancing anime on the 4Chan thread?

Hellwalker · Apr 21, 2025

the rat said:
I like quite a lot about the new theme but there are some things I disagree with. I'm not really good when it comes with CSS or general design so this is probably super wonky and shit but I figure I'd paste it here in case anyone might be interested.

Thank you so fucking much for making the titles of each board be inside a box instead of it just being text that blends in with the background color. It was the one thing that I fucking despised with the new theme and I'm very upset that Null actually likes it.

https://kiwifarms.st/threads/blinded-by-the-light.217023/post-21092518

Screenshot 2025-04-21 at 13-24-48 Blinded by the Light Page 28 Kiwi Farms.webp

https://kiwifarms.st/threads/blinded-by-the-light.217023/post-21092536

Screenshot 2025-04-21 at 13-25-01 Blinded by the Light Page 28 Kiwi Farms.webp

the rat · Apr 21, 2025

Hellwalker said:
Thank you so fucking much for making the titles of each board be inside a box instead of it just being text that blends in with the background color. It was the one thing that I fucking despised with the new theme and I'm very upset that Null actually likes it.
View attachment 7258770
View attachment 7258772
View attachment 7258774
View attachment 7258775

https://kiwifarms.st/threads/blinded-by-the-light.217023/post-21092518
View attachment 7258776

https://kiwifarms.st/threads/blinded-by-the-light.217023/post-21092536
View attachment 7258777

Yeah it's really fucking annoying. Not sure why he thinks it looks cleaner, it just comes off as weird mobile like tranny design you'd see from some big company like Microsoft now. But Null likes it so whatever.

I made some slight changes if you're interested, just stuff that involves highlighting really (post box border when focused is green, some of the buttons being inconsistent with highlighting with the post reply button being most notable) and I think I properly fixed the fucked commented out striping removal (you will have to remove that if you actually like the striping lol, i fucking hate it).

It's a bit scuffed for other styles since I have the current colours for the default dark style defined in root as I'm expecting Null to change some shit that will make me get autistic so you'll have to remove that if you're using other styles.

edit: just noticed the save and cancel button jesus fucking christ i hate xenforo
edit2: pray 2 god that i have fixed it

CSS:

/* Kiwifarms-Rat CSS */
:root {
    --input-border-heavy: hsla(var(--xf-borderColor--h), var(--xf-borderColor--s), calc(var(--xf-borderColor--l) - 4%), var(--xf-borderColor--a));
    --input-border-light: hsla(var(--xf-borderColor--h), var(--xf-borderColor--s), calc(var(--xf-borderColor--l) + 4%), var(--xf-borderColor--a));
 
    --xf-publicLogoUrl: url('/public/brand/Kiwi_Farms_Logo_White_Text.svg');
 
    --xf-color-adjust: -1;
 
    --xf-buttonBg: var(--xf-buttonBg--h), var(--xf-buttonBg--s), var(--xf-buttonBg--l), var(--xf-buttonBg--a);
    --xf-buttonBg--h: var(--xf-contentBg--h);
    --xf-buttonBg--s: var(--xf-contentBg--s);
    --xf-buttonBg--l: calc(var(--xf-contentBg--l) + (var(--xf-color-adjust, 1) * 10%)) !important;
    --xf-buttonBg--a: var(--xf-contentBg--a);

    --xf-contentBg: var(--xf-contentBg--h), var(--xf-contentBg--s), var(--xf-contentBg--l), var(--xf-contentBg--a);
    --xf-contentBg--h: var(--xf-paletteColor1--h);
    --xf-contentBg--s: var(--xf-paletteColor1--s);
    --xf-contentBg--l: var(--xf-paletteColor1--l);
    --xf-contentBg--a: var(--xf-paletteColor1--a);

    --xf-paletteColor1: var(--xf-paletteColor1--h), var(--xf-paletteColor1--s), var(--xf-paletteColor1--l), var(--xf-paletteColor1--a);
    --xf-paletteColor1--h: 216;
    --xf-paletteColor1--s: 8%;
    --xf-paletteColor1--l: 24%;
    --xf-paletteColor1--a: 1;

    --xf-paletteColor2: var(--xf-paletteColor2--h), var(--xf-paletteColor2--s), var(--xf-paletteColor2--l), var(--xf-paletteColor2--a);
    --xf-paletteColor2--h: 218;
    --xf-paletteColor2--s: 8%;
    --xf-paletteColor2--l: 28%;
    --xf-paletteColor2--a: 1;

    --xf-paletteNeutral1: var(--xf-paletteNeutral1--h), var(--xf-paletteNeutral1--s), var(--xf-paletteNeutral1--l), var(--xf-paletteNeutral1--a);
    --xf-paletteNeutral1--h: 0;
    --xf-paletteNeutral1--s: 0%;
    --xf-paletteNeutral1--l: 18%;
    --xf-paletteNeutral1--a: 1;
 
    --xf-paletteNeutral2: var(--xf-paletteNeutral2--h), var(--xf-paletteNeutral2--s), var(--xf-paletteNeutral2--l), var(--xf-paletteNeutral2--a);
    --xf-paletteNeutral2--h: 0;
    --xf-paletteNeutral2--s: 0%;
    --xf-paletteNeutral2--l: 18% !important;
    --xf-paletteNeutral2--a: 1;
 
    --xf-paletteNeutral3: var(--xf-paletteNeutral3--h), var(--xf-paletteNeutral3--s), var(--xf-paletteNeutral3--l), var(--xf-paletteNeutral3--a);
    --xf-paletteNeutral3--h: 0;
    --xf-paletteNeutral3--s: 0%;
    --xf-paletteNeutral3--l: 50%;
    --xf-paletteNeutral3--a: 1;
 
    --xf-paletteAccent1: var(--xf-paletteAccent1--h), var(--xf-paletteAccent1--s), var(--xf-paletteAccent1--l), var(--xf-paletteAccent1--a);
    --xf-paletteAccent1--h: 109;
    --xf-paletteAccent1--s: 29%;
    --xf-paletteAccent1--l: 51%;
    --xf-paletteAccent1--a: 1;
 
    --xf-paletteAccent2: var(--xf-paletteAccent2--h), var(--xf-paletteAccent2--s), var(--xf-paletteAccent2--l), var(--xf-paletteAccent2--a);
    --xf-paletteAccent2--h: var(--xf-paletteAccent1--h);
    --xf-paletteAccent2--s: var(--xf-paletteAccent1--s);
    --xf-paletteAccent2--l: calc(var(--xf-paletteAccent1--l) + (var(--xf-color-adjust, 1) * 10%));
    --xf-paletteAccent2--a: var(--xf-paletteAccent1--a);
 
    --xf-paletteAccent3: var(--xf-paletteAccent3--h), var(--xf-paletteAccent3--s), var(--xf-paletteAccent3--l), var(--xf-paletteAccent3--a);
    --xf-paletteAccent3--h: var(--xf-paletteAccent1--h);
    --xf-paletteAccent3--s: var(--xf-paletteAccent1--s);
    --xf-paletteAccent3--l: calc(var(--xf-paletteAccent1--l) + (var(--xf-color-adjust, 1) * 15%));
    --xf-paletteAccent3--a: var(--xf-paletteAccent1--a);

    /* These are here in the event null decides to change the colours again. */
}

/* Replace logo. */
/*
.logo-default > picture:nth-child(1) > img:nth-child(1) {
    content: var(--xf-publicLogoUrl) !important;
}
*/

.p-sectionLinks {
    padding-left: 10% !important;
    padding-right: 10% !important;
}

@media (min-width: 1401px) {
    .p-nav {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }

    .xb-toggle-default .xb-page-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }
 
    .p-footer-inner {
        max-width: 80% !important;
    }
}

.xb-page-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.p-body-inner {
    padding-top: 0% !important;
    max-width: 80% !important;
}

.p-footer {
    margin-top: 2% !important;
    background-color: rgb(0, 0, 0, 65%) !important;
    border-top: 1px solid hsla(var(--xf-paletteAccent1)) !important;
    border-bottom: 1px solid hsla(var(--xf-paletteAccent1))  !important;
    margin-bottom: 1% !important;
}

.p-footer-linkList > li a {
    text-decoration: none !important;
}

.p-footer-linkList > li a:hover {
    text-decoration: underline !important;
}

.copyright-left {
    color: rgb(190, 190, 190) !important;
}

.copyright-left a {
    color: rgb(255, 255, 255) !important;
}

.p-navEl.is-selected {
    border-top: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
    border-left: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
    border-right: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
}

.p-navgroup {
    background: hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc((var(--xf-pageBg--l) - 5%) - 2.5%), var(--xf-pageBg--a)) !important;
    border-top: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
    border-left: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
    border-right: 0.5px solid hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(((var(--xf-pageBg--l) - 5%) - 2.5%) - (var(--xf-color-adjust, 1) * 10%)), var(--xf-pageBg--a)) !important;
}

.p-navgroup-link.p-navgroup-link--iconic:hover {
    background: hsla(var(--xf-textColor--h), var(--xf-textColor--s), var(--xf-textColor--l), 12%) !important;
}

.fr-box.fr-basic {
    border-color: var(--input-border-heavy) !important;
}

.fr-box.fr-basic.is-focused {
    border-color: hsla(var(--xf-paletteAccent1)) !important;
 
}

.fr-btn-grp.fr-float-right.rte-tab--inactive.rte-tab--preview {
    border: none !important;
}

.fr-toolbar {
    border-bottom-color: var(--input-border-heavy) !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
}

.message-footer .message-actionBar {
    border-top-width: 1.5px !important;
    border-top-color: rgb(45, 45, 45) !important;
    padding-bottom: 0.5% !important;
}

/*
DM's have the reaction bar below post actions for some reason
so it looks wonky without this, but thread posts look
wonky with this.

(perhaps I should just increase the padding or margin of
the bottom of the message box ?)

.reactionsBar {
    padding-bottom: 1% !important;
    padding-top: 0.5% !important;
}
*/


/* Remove stripe effect */
.structItemContainer, .structItemContainer-group, .structItem:nth-child(2n):not(.is-mod-selected) {
    background-color: hsla(var(--xf-contentBg)) !important;
}

/* (also) Remove stripe effect */
.node, .node:nth-child(2n) {
    background-color: hsla(var(--xf-contentBg)) !important;

}


.block-container {
    border-left: 1px solid hsla(var(--xf-borderColorFaint)) !important;
    border-right: 1px solid hsla(var(--xf-borderColorFaint)) !important;
    border-bottom: 1px solid hsla(var(--xf-borderColorFaint)) !important;
    border-top: 1px solid hsla(var(--xf-borderColorFaint)) !important;
    border-radius: 0px !important;
}

.block-header,
.block-minorHeader {
    /*background-color: rgb(0, 0, 0, 15%) !important;*/
    background: hsla(var(--xf-pageBg--h), var(--xf-pageBg--s), calc(var(--xf-pageBg--l) - 5%), var(--xf-pageBg--a)) !important;
}

.u-dt {
    font-size: 85% !important;
}

.pageNav-main {
    border-radius: 0px !important;
    box-shadow: 0 2px 2px 0 hsla(0, 0%, 0%, .14), 0 3px 1px -2px hsla(0, 0%, 0%, .12), 0 1px 5px 0 hsla(0, 0%, 0%, .2) !important;
}

.pageNav-page {
    box-shadow: unset !important;
    border-right: 1px solid rgb(50, 50, 50) !important;
    border-top: 1px solid hsla(var(--xf-borderColorHeavy)) !important;
    border-bottom: 1px solid hsla(var(--xf-borderColorHeavy)) !important;
}

.pageNav-page:first-child {
    border-left: 0.2px solid hsla(var(--xf-borderColorFaint)) !important;
}


/* Thread navigation links "[board] > [thread] >" */
.p-breadcrumbs > li > a,
a.ui,
a:hover,
a.ui:hover {
    border-radius: 2px !important;
}
.p-breadcrumbs > li > a:hover,
a.ui:hover {
    background: hsla(var(--xf-paletteNeutral3--h), var(--xf-paletteNeutral3--s), var(--xf-paletteNeutral3--l), 20%) !important;
}

.hb-quotes {
    font-size: 0.95rem !important;
    margin-bottom: 2.5% !important;
}

/* fix strange floating left-side-navbar button behaviour */
.p-nav-scroller > div:nth-child(1) {
    margin-bottom: unset !important;
    padding-bottom: unset !important;
    overflow-x: hidden !important;
}

.embed, .fauxboxlink {
    background-color: hsla(var(--xf-paletteColor2)) !important;
    border-color: hsla(var(--xf-paletteAccent1)) !important;
}

.embed-container {
    background-color: hsla(var(--xf-paletteColor1)) !important;
    border-bottom: 1px hsla(var(--xf-borderColorFaint)) solid !important;
    margin-bottom: 1% !important;
}

.embed:hover, .fauxboxlink:hover {
    border-color: rgb(255, 255, 255) !important;
}

.reactionSummary > li {
    background: unset !important;
}

/* fix button hover colour being inconsistent with other buttons */
.button:hover {
    color: hsla(var(--xf-linkHoverColor)) !important;  
    background: hsla(var(--xf-contentHighlightBg)) !important;
}

.button {
  background-color: hsla(var(--xf-buttonBg)) !important;
  color: hsla(var(--xf-buttonTextColor)) !important;
}

the rat · Apr 21, 2025

MongolianMongoose said:
Can anyone help me hide the dancing anime on the 4Chan thread?

Try this?

CSS:

.p-body-pageContent > div:nth-child(3) {
    background-image: unset !important;
}

Wol · Apr 22, 2025

I've just pushed an update to my Cave theme. I ultimately simplified the theme overall and made it somewhat consistent with the elements of the previous iteration of the standard Stealth theme of the site.

CSS:

@-moz-document url-prefix("https://kiwifarms.net/"), url-prefix("https://kiwifarms.st/"), url-prefix("https://kiwifarmsaaf4t2h7gc3dfc5ojhmqruw2nit3uejrpiagrxeuxiyxcyd.onion/") {
:root {
    /** PARAMETERS (Recommended to adjust to your liking) **/
    --theme-control-hue: 95deg;

    /** Specific Invariants (Can adjust as needed) **/
    --logo-hue-rot-offset: -95deg;
    --logo-sat-factor: 0.8;
    --logo-bright-factor: 1.1;

    --button-bg-color: hsl(0, 0%, 16%);
    --content-bg-color: hsl(216, 8%, 28%);

    --bg-inner-color: hsl(213, 11%, 20%);
    --bg-body-inner-color: hsl(0, 0%, 22%, .88);
    
    --pg-border-radius: .5rem;
    
    --box-shadow-common:
        0 .1rem .1rem 0 hsla(0,0%,0%,.14),
        0 .075rem .05rem -0.1rem hsla(0,0%,0%,.12),
        0 .05rem .25rem 0 hsla(0,0%,0%,.2);

    /** Common theme/color Variables **/
    --scheme-color-base: hsl(var(--theme-control-hue), 51%, 62%);
    --scheme-color-sub: hsl(from var(--scheme-color-base) h calc(s*0.3) calc(l*0.4));
    --scheme-color-dark1: hsl(from var(--scheme-color-base) h calc(s*0.05) calc(l*0.5));
    --scheme-color-dark2: hsl(from var(--scheme-color-base) h calc(s*0.1) calc(l*0.3));
    --scheme-color-bright: hsl(from var(--scheme-color-base) calc(h - 8) 160 calc(l*1.2));
    --scheme-color-link: hsl(from var(--scheme-color-base) calc(h - 2) calc(s*1.3) calc(l*1.1));
    --scheme-color-link-dark: hsl(from var(--scheme-color-link) h calc(s*0.2) calc(l*0.8));
    --scheme-color-link-hover: hsl(from var(--scheme-color-link) h calc(s*1.1) calc(l*0.9));
    
    /** Private **/
    /** Site defs **/
    --primary-color: var(--scheme-color-base);
    --link-color: var(--scheme-color-link);
    /** XF defs **/
    --xf-linkColor: from var(--scheme-color-link) h s l;
    --xf-primaryLinkColor: from var(--scheme-color-base) h s l;
    --xf-primaryLinkHoverColor: from var(--scheme-color-link-hover) h s l;
    --xf-linkUgcHoverColor: var(--xf-primaryLinkHoverColor);
    --xf-linkHoverColor: from var(--scheme-color-link-hover) h s l;
    --xf-paletteColor3: from var(--scheme-color-dark2) h s l;
    --xf-textColorAccentContent: from white h s l;
    --xf-textColorAttention: var(--xf-textColorAccentContent);
    --xf-contentAccentBg: from var(--scheme-color-sub) h s l;
    --xf-borderColorAttention: from var(--scheme-color-bright) h s l;
    --xf-buttonTextColor: from var(--scheme-color-base) h s l;
    --xf-menuFeatureBorderColor: from var(--scheme-color-base) h s l;
}

/**********/
/** MAIN **/
/**********/

/* BASIC THEMING */

/* Add Nimbus Sans as font option (developer's own preference) */
html {
    font-family: "Nimbus Sans","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
}

.bbWrapper a {
    color: var(--link-color) !important;
}

.message-newIndicator {
    background: var(--scheme-color-dark2) !important;
    border-left: 0.2rem solid var(--scheme-color-base) !important;
}

.message-newIndicator.hb-react-highlightIndicator {
    background: var(--scheme-color-dark1) !important;
    border-left: 0.3rem solid var(--scheme-color-bright) !important;
}

.button .button-text {
    color: hsl(0, 0%, 100%) !important;
}

/* Theme the body header */
.p-body-header {
    background: var(--scheme-color-dark2) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 3rem 0.5rem 3rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow:
        var(--box-shadow-common)
        !important;
    backdrop-filter: blur(0.5rem) !important;
    
    .username {
        color: var(--scheme-color-link) !important;
    }
    
    .p-description {
        margin-bottom: 0.3rem !important;
    }
}

.pageNav-page--current:hover {
    background: var(--scheme-color-sub) !important;
}

.fr-wrapper ::selection {
    background: var(--scheme-color-bright) !important;
}

.fr-view blockquote {
    border-left: 0.2rem solid var(--scheme-color-base) !important;
}

.block-cryptos {
    box-shadow: none !important;
}

.actionBar-set--internal {
    float: right !important;
    margin-left: 0 !important;
    .actionBar-action--delete::after, .actionBar-action--report::after {
        width: 0 !important;
        content: "" !important;
        border-right: solid rgb(130,130,130, 0.5) 0.1rem !important;
        margin: 0 0.5rem 0 1rem !important;
    }
}

.block--messages {
    margin-bottom: 0.5rem !important;
}

.js-quickReply {
    margin-bottom: 0 !important;
}

.actionBar-set.actionBar-set--external .reaction {
    margin-left: 0 !important;
}

.message-cell.message-cell--main {
    padding-bottom: 0 !important;
}

.message-actionBar.actionBar {
    padding-bottom: 0.2rem !important;
}

/* Breadcrumbs adjustments */
.p-breadcrumbs > li > a {
    background-color: rgb(from var(--scheme-color-dark2) r g b / 0.9) !important;
    border-radius: 0.3rem !important;
    box-shadow:
        var(--box-shadow-common)
        !important;
    padding: 0.1rem 0.5rem 0.2rem 0.5rem !important;
    border-top: solid var(--scheme-color-bright) 0.1rem !important;
}

.p-breadcrumbs > li:first-of-type::before {
    color: var(--scheme-color-base) !important;
    padding-right: 0.8rem !important;
    display: inline-block !important;
    vertical-align: baseline !important;
}

.p-breadcrumbs > li::after {
    color: var(--scheme-color-base) !important;
    padding-right: 0.8rem !important;
    display: inline-block !important;
    vertical-align: baseline !important;
}

/* Remove the last chevron of the breadcrumbs */
.p-breadcrumbs li:last-of-type::after {
    display: none !important;
}

.XenBase label.iconic i {
    color: var(--scheme-color-base) !important;
}

.p-nav {
    color: var(--scheme-color-base) !important;
}

.p-nav-list .p-navEl {
    color: var(--scheme-color-base) !important;
}

.blockStatus-message::before {
    color: var(--scheme-color-base) !important;
}

.bbCodeBlock-title {
    color: var(--scheme-color-base) !important;
}

.menu-tabHeader .tabs-tab.is-active {
    color: var(--scheme-color-base) !important;
    border-color: var(--scheme-color-base) !important;
}

.bbCodeBlock {
    border-left: 0.2rem solid var(--scheme-color-base) !important;
}

/* Thread post highlight */
.block--messages .message.hb-react-threadHighlight {
    border-top: 0.2rem solid var(--scheme-color-bright) !important;
}

.pageNav-jump,
.pageNav-page {
    color: var(--scheme-color-link) !important;
}

.hb-rules {
    color: var(--scheme-color-base) !important;
}

.is-unread .structItem-cell--main::before {
    color: var(--scheme-color-base) !important;
}

/* Adjust and override link colors to use theme colors*/
.structItem-title a {
    color: var(--scheme-color-link-dark) !important;
}

.structItem--thread.is-unread .structItem-title a {
    color: var(--scheme-color-base) !important;
}

/* Remove alternating background color for threads and items (subforums) */
.block--hb-features .structItem,
.structItem.structItem--thread,
.block--category .node {
    background-color: unset !important
}

/* Add a minor space between pinned and normal threads */
.structItemContainer-group--sticky {
    border-bottom: 0.1rem solid hsla(var(--xf-borderColorFaint)) !important;
    margin-bottom: 0.5rem !important;
}

.p-breadcrumbs--parent {
    margin-bottom: 1rem !important;
}

/* VISUAL MODIFICATIONS/ADDITIONS */

/* Increase content title font for threads & subforums */
@media (min-width: 1201px) {
    .p-title-value {
        font-size: 2rem !important;
    }
}

.p-title-value {
    font-weight: bold !important;
}

/* Adjust the rules section to emphasize rules to users */
.hb-rules {
    padding: 0.5rem 1rem 0.5rem 1rem !important;
    background: var(--scheme-color-dark2) !important;
    border: solid hsl(from var(--scheme-color-bright) h calc(s*0.5) calc(l*0.5)) 0.2rem !important;
    border-radius: 0.25rem !important;
    box-shadow:
        0 -0.2rem 0 0 hsl(from var(--scheme-color-bright) h calc(s*0.5) calc(l*0.5)),
        var(--box-shadow-common)
        !important;

    .hb-rules-text {
        margin-bottom: 0.3rem !important;
    }
}

/* Emphasize thread notice (e.g. for Destiny's thread) */
.p-body-pageContent > .blockMessage.blockMessage--alt {
    background: var(--scheme-color-dark2) !important;
    border: solid hsl(from var(--scheme-color-bright) h calc(s*0.5) calc(l*0.5)) 0.2rem !important;
    border-radius: 0.25rem !important;
    box-shadow:
        0 -0.2rem 0 0 hsl(from var(--scheme-color-bright) h calc(s*0.5) calc(l*0.5)),
        0 0.15rem 0.15rem 0 rgb(0, 0, 0, 0.14),
        0 0.2rem 0.2rem -0.15rem rgb(0, 0, 0, 0.12),
        0 0.1rem 0.25rem 0 rgb(0, 0, 0, 0.2)
        !important;
    padding: 0.5rem 1rem 0.5rem 1rem !important;
    margin-bottom: 1rem !important;
}

/* Make the page/site notice (e.g. former Community Happenings) look cooler */
/* Gives the notice a prominent left tab */
.notice.notice--primary {
    background: var(--scheme-color-bright) !important;
    border: solid var(--scheme-color-bright) 0.2rem !important;
    border-radius: 0.25rem !important;
    padding: 0.1rem 0.1rem 0.1rem 0.6rem !important;
    margin-bottom: 1.5rem !important;
}

.notice .notice-content {
    border-radius: 0.15rem !important;
    background: var(--bg-inner-color) !important;
    padding: 0.75rem !important;
}

/* Add gradients to background */
.p-pageWrapper {
    background:
        linear-gradient(to bottom,
            hsl(from var(--scheme-color-base) h s calc(l*0.9) / 0.7) 2rem,
            hsl(from var(--scheme-color-base) h calc(s*0.8) calc(l*0.8) / 0.6) 8rem,
            hsl(from var(--scheme-color-base) h calc(s*0.65) calc(l*0.72) / 0.48) 16rem,
            hsl(from var(--scheme-color-base) h calc(s*0.35) calc(l*0.6) / 0.35) 25rem,
            hsl(from var(--scheme-color-base) h calc(s*0.2) calc(l*0.5) / 0.3) 30rem,
            hsl(from var(--scheme-color-base) h calc(s*0.1) calc(l*0.45) / 0.3) 40rem),
        linear-gradient(to top,
            rgba(33, 36, 41, 0.95) 20rem,
            rgba(33, 36, 41, 0.0) 60rem),
        url('/styles/custom/backgrounds/damnatio-memoriae5.webp')
        !important;
    background-size: 384px auto !important;
    /* Fit the background such that it shows two panels on 1080p maximized displays, might be controversial */
    background-position: top center !important;
}

/* Make the inner body content wrapper be slightly transparent s.t. the background (particularly the comic panels) are somewhat visible. */
.p-body-inner {
    background: var(--bg-body-inner-color) !important;
    backdrop-filter: blur(0.1rem) !important;
}

/* Give the logo a fitting theme color. Uses `logo-` invariants. */
.p-nav-smallLogo {
    filter: hue-rotate(calc(var(--logo-hue-rot-offset) + var(--theme-control-hue))) saturate(var(--logo-sat-factor)) brightness(var(--logo-bright-factor)) !important;
}

/* Compress user details */
.message-userDetails .userBanner:first-of-type {
    margin-top: 0.6rem !important;
}

.message-userExtras {
    margin-top: 0.5rem !important;
}

/* Change the theme of the supporter banner to be prominent and theme matching */
.userBanner.userBanner--green {
    color: var(--scheme-color-base) !important;
    background: var(--scheme-color-sub) !important;
    border: 0.1rem solid var(--scheme-color-base) !important;
    strong {
        font-weight: bold !important;
    }
}

/* Add a small glow/halo around highlighted posts for additional prominence */
.block--messages .message.hb-react-threadHighlight {
    box-shadow: 0 0 0 0.1rem var(--scheme-color-bright) !important;
}

/* Alter button theming*/
.button,
.button.button--primary, a.button.button--link {
    background-color: var(--button-bg-color) !important;
    border: none !important;
}

/* Add left bar for unread threads */
.structItem--thread.is-unread {
    border-left: solid var(--scheme-color-base) 0.2rem !important;
}

.formButtonGroup {
    margin-bottom: 1rem !important;
}

/* [1]
* Adjust the display of main page categories:
* - Put a background behind the category titles.
* - Adjust border radii placement.
*/
.block:not(.block--messages) .block-container
{
    overflow: hidden !important;
    box-shadow:
        0 .1rem .1rem 0 hsla(0,0%,0%,.14),
        0 .075rem .05rem -0.1rem hsla(0,0%,0%,.12),
        0 .05rem .25rem 0 hsla(0,0%,0%,.2)
        !important;
    border-radius: 0rem !important;
    background-color: var(--content-bg-color);
}

.block-body
{
    box-shadow: unset !important;
}

.block--category .block-container .node:last-of-type {
    border-radius: 0;
}

/* Fixes background leak on chat */
#rust-shim {
    width: 100.1% !important;
}

/* Change form and positioning of elements */
@media (min-width: 750px) {
    /* Move lower nav menu to the right */
    .p-sectionLinks-inner {
        margin: 0 3rem 0 auto !important;
        max-width: unset !important;
        width: fit-content !important;
        .p-sectionLinks-list a.p-navEl-link, a.p-navEl-splitTrigger {
            display: inline !important;
            padding-top: 0.2rem !important;
            padding-bottom: 0.2rem !important;
        }
    }
    /* Offset the upper-left nav menu from the right */
    .p-nav-opposite {
        margin: 0 2rem 0 2rem !important;
    }
    /* Move the upper-right nav menu to the right */
    .p-nav-scroller {
        float: right !important;
        margin: 0 0 0 auto !important;
    }
    /* Alter height and placement of the site logo */
    .p-nav-smallLogo {
        margin: 1rem 0 1rem 2rem !important;
        max-width: none !important;
        img {
            height: 8rem !important;
            max-height: unset !important;
        }
    }
    /* See [1] */
    .block:not(.block--messages) .block-container
    {
        border-radius: 0.2rem !important;
    }
    .block:not(.block--messages) .block-body
    {
        border-radius: 0 !important;
    }
}
}

Adolf Kitler · Apr 22, 2025

Wol said:
I've just pushed an update to my Cave theme. I ultimately simplified the theme overall and made it somewhat consistent with the elements of the previous iteration of the standard Stealth theme of the site.

I love your theme, but I would recommend that you optimize it because it makes navigation a bit slow for some reason, in addition to improving the community feature submissions section (in the original interface made by null it looks fucking awful)

Wol · Apr 22, 2025

Adolf Kitler said:
I love your theme, but I would recommend that you optimize it because it makes navigation a bit slow for some reason

It was likely because there was a blur backdrop filter for the .p-body-inner rule; it definitely seemed to slow my laptop when I looked at it. I've pushed an update to the styles that makes it a parameter and disables the blurring by default so check if that helps your performance.

Adolf Kitler said:
in addition to improving the community feature submissions section

Is this in reference to the way the entries display in the Features widget on the homepage when not logged in?
i.e.

Screenshot 2025-04-22 at 15-12-08 Kiwi Farms.webp

If so, I could fix it for that case, but I think it would be much more preferable if it were fixed on the site style since it seems like a bug.
Prior to this post, I filed a grievance:

Feedback Post in thread 'Technical Grievances'

Apr 22, 2025

It's personally not a big deal for myself, but I noticed that the Feature widget on the homepage has inconsistent styling when viewing it while logged out. When logged in, it appears okay.
There seem to be some omitted rules in the logged out view which don't put the entries/structItems and their elements into a table layout.

Its appearance:
When logged out:

Screenshot 2025-04-22 at 15-32-34 Kiwi Farms.webp

When logged in:

Screenshot 2025-04-22 at 15-36-19 Kiwi Farms.webp

Adolf Kitler · Apr 23, 2025

Wol said:
It was likely because there was a blur backdrop filter for the .p-body-inner rule; it definitely seemed to slow my laptop when I looked at it. I've pushed an update to the styles that makes it a parameter and disables the blurring by default so check if that helps your performance.

Ok now it goes more smoothly.

Wol said:
Is this in reference to the way the entries display in the Features widget on the homepage when not logged in?
i.e.

If so, I could fix it for that case, but I think it would be much more preferable if it were fixed on the site style since it seems like a bug.
Prior to this post, I filed a grievance:

Yes, that's it. I've been looking at your post in the other thread, and that's not happening to me. It doesn't matter if I'm logged in or not, but I see that horrible design. I would really appreciate it if you could fix it.

Wol · Apr 23, 2025

Adolf Kitler said:
Ok now it goes more smoothly.

Yes, that's it. I've been looking at your post in the other thread, and that's not happening to me. It doesn't matter if I'm logged in or not, but I see that horrible design. I would really appreciate it if you could fix it.

Whipped up a style with the missing rules, try importing this and see if it helps:

CSS:

@-moz-document url-prefix("https://kiwifarms.net/"), url-prefix("https://kiwifarms.st/"), url-prefix("https://kiwifarmsaaf4t2h7gc3dfc5ojhmqruw2nit3uejrpiagrxeuxiyxcyd.onion/") {
.structItem {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 1px solid hsla(var(--xf-borderColorFaint));
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.structItemContainer > .structItem:first-child, .structItemContainer > .structItemContainer-group:first-child > .structItem:first-child {
    border-top: none;
}

.structItem-cell {
    display: table-cell;
    vertical-align: top;
    padding: 8px 7px;
}

.structItem-cell.structItem-cell--ftDate {
    width: 190px;
    text-align: right;
}
}

Adolf Kitler · Apr 24, 2025

Wol said:

Whipped up a style with the missing rules, try importing this and see if it helps:

CSS:

@-moz-document url-prefix("https://kiwifarms.net/"), url-prefix("https://kiwifarms.st/"), url-prefix("https://kiwifarmsaaf4t2h7gc3dfc5ojhmqruw2nit3uejrpiagrxeuxiyxcyd.onion/") {
.structItem {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 1px solid hsla(var(--xf-borderColorFaint));
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.structItemContainer > .structItem:first-child, .structItemContainer > .structItemContainer-group:first-child > .structItem:first-child {
    border-top: none;
}

.structItem-cell {
    display: table-cell;
    vertical-align: top;
    padding: 8px 7px;
}

.structItem-cell.structItem-cell--ftDate {
    width: 190px;
    text-align: right;
}
}

Nully finally fixed all the UI problems so i no longer need to do this. Likewise, thank you.

As a cool suggestion, it would be great if you made a light variant of the theme inspired by the kiwifarms 2021 light interface. (It's the one I've always used since I joined)

Slav Power · Apr 24, 2025

Quick correction for my highlighted post border to work with the recent changes as well as changing the border for featured/postmarked posts.

CSS:

  .block--messages .message.hbReact-postmarked.hbReact-postmarked--auto {
    border-top: none;
    box-shadow: var(--primary-color) 1px 1px 0px, var(--primary-color) 1px -1px 0px, var(--primary-color) -1px 1px 0px,
    var(--primary-color) -1px -1px 0px;
    /*box-shadow: var(--green) 1px 1px 0px, var(--green) 1px -1px 0px, var(--green) -1px 1px 0px,
    var(--green) -1px -1px 0px;*/
  }
  
  .block--messages .message.hbReact-postmarked.hbReact-postmarked--feature.hbReact-postmarked--staff {
    border-top: none;
    box-shadow: hsl(0, 29%, 51%) 1px 1px 0px, hsl(0, 29%, 51%) 1px -1px 0px, hsl(0, 29%, 51%) -1px 1px 0px,
    hsl(0, 29%, 51%) -1px -1px 0px;
  }

  .block--messages .message.hbReact-postmarked.hbReact-postmarked--manual {
    border-top: none;
    box-shadow: hsl(240, 29%, 51%) 1px 1px 0px, hsl(240, 29%, 51%) 1px -1px 0px, hsl(240, 29%, 51%) -1px 1px 0px,
    hsl(240, 29%, 51%) -1px -1px 0px;
  }

Wol · Apr 24, 2025

I pushed an update to the Cave theme again, it should account for new highlights and fixes some stuff.
Now, the chat window should not have any leaks at the corners, and the weird top border for the first entry in the features should be removed.

Adolf Kitler said:
As a cool suggestion, it would be great if you made a light variant of the theme inspired by the kiwifarms 2021 light interface. (It's the one I've always used since I joined)

I'll take that into consideration. I had given thought to expanding the Cave theme to have a light variant with the new variation option, so if I feel like it, I'll see about working on it.

MongolianMongoose · Apr 24, 2025

Moving the post highlight bar from the top to the left looks so much better imo.

CSS:

    /*move post highlight indicator from top to left*/
    .message.hbReact-postmarked.hbReact-postmarked--auto {
        border-top: none !important;
        border-left: 2px solid hsla(var(--xf-paletteAccent1));
    }
    .block--messages .hbReact-postmarked--staff {
        border-top: none !important;
        border-left: 2px solid hsla(var(--xf-errorColor)) !important;
    }

slungus22 · Apr 24, 2025

MongolianMongoose said:

Moving the post highlight bar from the top to the left looks so much better imo.
View attachment 7272895

CSS:

    /*move post highlight indicator from top to left*/
    .message.hbReact-postmarked.hbReact-postmarked--auto {
        border-top: none !important;
        border-left: 2px solid hsla(var(--xf-paletteAccent1));
    }
    .block--messages .hbReact-postmarked--staff {
        border-top: none !important;
        border-left: 2px solid hsla(var(--xf-errorColor)) !important;
    }

why am i here

Wol · Apr 27, 2025

I have pushed another update to the Cave theme which should be of interest.
With the introduction of embeds for links to posts on the forum, I have added a major feature of having prettied up these embeds, with the following stylizations.

Embed elements are now colored to distinguish them from the body of a post that contains such embeds. This includes a bright border to distinguish it as a link as well as outer box shadow to make it similar to a widget.
The background of the embed preview will become lit when hovering over it.
Accompanying reactions in the embed footer should no longer be visually clipped from view.

Screenshot 2025-04-27 at 15-12-35 Userstyles General Thread Page 2 Kiwi Farms.webp

Wol · May 4, 2025

I pushed a minor update to the Cave theme again.
In addition to some visual tweaks, there were some minor additions added that being:

An added flair to Null's username.
A glowing biohazard (you'll see what I mean).

Also, I had a go at trying to float some embed content. With this iteration, one can actually click on and play videos in embeds without having to visit the page it links to. I figured it would be useful for Community Happenings posts which feature embeds with media in them.
With this, I tried doing some other quirks like being able to select text, without selecting everything in the embed, and pass through pointer events for some elements (e.g. blockquotes) to the parent div but I wasn't having much luck with these attempts. At any rate, what is there is a nice improvement.

Wol · May 21, 2025

I pushed a minor update to the Cave theme:
External hyperlinks are now suffixed with an arrow to make it easy to distinguish what leads off site at a glance, particularly where someone does not indicate that it does.
I figure that it can help users to avoid accidentally or quickly clicking on links to external sites, which may include those that they may not want to visit. It's essentially similar to, and actually inspired by, what one might see for the use case on MediaWiki sites, including Wikipedia.

05/22/25 edit:
Of this edit, I pushed another update that tones down the inset shadow in the post embed previews; it should look significantly smaller.

Hellwalker · May 25, 2025

Somebody made a userstyle that resembles Kiwi Farms' OG theme (Kiwi.X2 Dark) even moreso than @Doktor Grimm's KFKompakt but it's broken as shit due to the theme update.

If somebody who knows CSS could fix it, please do, :'(

. I'll buy T&H and everything,

. It's my fucking dream theme...

Userstyles General Thread - Post original KF styles, give feedback, and discuss styling of and relating to the site

Grin Machine

a UNIX system

the rat

The patterns mason, what do they mean?

MongolianMongoose

Hellwalker

Went from Phoenix, Arizona all the way to Tacoma

the rat

The patterns mason, what do they mean?

the rat

The patterns mason, what do they mean?

Wol

XRX

Adolf Kitler

Dictator, writer of the infamous book "Meown Katz"

Wol

XRX

Feedback Post in thread 'Technical Grievances'

Adolf Kitler

Dictator, writer of the infamous book "Meown Katz"

Wol

XRX

Adolf Kitler

Dictator, writer of the infamous book "Meown Katz"

Slav Power

I drink to forget.

Wol

XRX

MongolianMongoose

slungus22

LITERAL RETARD

Wol

XRX

Wol

XRX

Wol

XRX

Hellwalker

Went from Phoenix, Arizona all the way to Tacoma