KFKompakt - An Alternative Theme for Desktop Users - or: Drop Shadows and Gradients and Borders, Oh My!

[Doktor Grimm]

​

Hello Farmers. Here's a brand new look for our glorious site, compatible with modern Firefox/Chromium-based browsers.

The site in its current state certainly serves its purpose well enough, yet as iconic as the grey-and-green colour scheme is, the XenForo default layout makes it all seem a touch sterile. Now, I understand Null has better things to do with his time than fiddling about with divs and hex codes, and most (sane, well-adjusted) people wouldn't give these things a second thought, but I'm very picky about the look and feel of the sites I use -- so, inspired by the work of some other users, I decided to take matters into my own hands and use my vague understanding of CSS to devise a more comprehensive custom theme.

Features thus far include:

• A narrower page layout to make reading easier on large screens;
• A new header with a centred logo and separate upper navigation bar;
• Gradients and shadows added to various page elements to give the site a more dynamic appearance;
• A warmer colour scheme, similar to the old Kiwi Farms default theme circa 2018; and
• Various other appearance tweaks, including changes to the board listing, altered fonts, and spacing adjustments.

Selected screenshots:



To use the theme for yourself, install a style addon such as Stylus (Firefox/Tor, Chromium) and download it from my UserStyles page here -- alternatively, you may find the raw CSS attached below. For the intended results, ensure your theme is set to 2021 (Dark) in user preferences, and your page width set to default.

Feel free to make any alterations and distribute them as you see fit; if there's enough demand, I'll look into implementing some fresh colour schemes myself. Report any issues/bugs/suggestions in this thread or my DMs. Sneed responsibly.

 

[Vect]

Any option for mobilefags?

 

[Doktor Grimm]

Any option for mobilefags?

You mayyyy be able to work something out using the Stylus mobile addon for Firefox Android, but whether it'd look good or not is an entirely different question. I'll look into it later and see if I can put together a port of some description.

 

[#FF0000]

This looks great! Will be using it for sure.
I did notice that the right and bottom outline on this page are black instead of the grey-ish brown color you chose.

 

[Vect]

You mayyyy be able to work something out using the Stylus mobile addon for Firefox Android, but whether it'd look good or not is an entirely different question. I'll look into it later and see if I can put together a port of some description.

Well, it looks cool, I'll give it a try. Nice work.

 

[Doktor Grimm]

This looks great! Will be using it for sure.
I did notice that the right and bottom outline on this page are black instead of the grey-ish brown color you chose.

Thanks so much! That sounds like a browser rendering issue and I think I know exactly what's causing it. Should be an easy fix, will get to it in the morning.

 

[Nicholas II of Russia]

Trying this. It looks amazing, kudos to you for making the site prettier and look modern-ish.

 

[Monolith]

How much user data does it collect?

 

[Osama Bin Laden]

9/11 score

needs more nazi references

 

[Hamsteroid]

Although I'm not a big fan of the background gradients, I think this is a huge improvement over the default theme.

Two things I noticed so far:

1) Since the background is now darker, it is even more difficult to see the selected text in the editor. Code in question:

.fr-wrapper ::selection {
  background: #212428;
  color: #fff;
}

Either change it to

.fr-wrapper::selection {
  background: var(--primary-color);
  color: #000;
}

to keep the green kiwi theme going inside the editor only or change it for the whole site by adding

::selection {
  background: var(--primary-color);
  color: #000;
}

(I prefer the last one for consistency)

2) The symbol of "Talk to Staff" isn't colored orange:

I'm too lazy to figure out how to change it myself right now, but my inner autist would be grateful if this could be fixed.

 

[Pee Cola]

I'm getting Minecraft mod vibes from this.

 

[Doktor Grimm]

Made a minor update to fix the page borders and alter the selection highlight colour (as per @Hamsteroid's suggestion). Unfortunately, the "Talk To Staff" icon remains unchanged -- it's also grey in the default theme, and there seems to be no CSS code responsible for changing the colour, so I suspect it's a difference with the icon itself.

 

[Instant_Pot_User]

Looks great, even with China Red enabled.

 

[Doktor Grimm]

ahhhhh nool broke my heckin custom themerino now it looks like ASS

 

[Vecr]

ahhhhh nool broke my heckin custom themerino now it looks like ASS

It's working, except for the dedicated notifications page at https://kiwifarms.st/account/alerts , that's way too narrow now.

 

[Doktor Grimm]

It's working, except for the dedicated notifications page at https://kiwifarms.st/account/alerts , that's way too narrow now.

Hmm. It seems fine on my PC but I can make it wider.

The site's looking a lot better now (some weird colours aside), so I'll wait until Null's done fixing the base theme before I change anything.

 

[Hamsteroid]

Replacing

.p-body {
    max-width: 87.5%;
    margin: auto;
}

with

.xb-content-wrapper {
    max-width: 87.5%;
    margin: auto;
}

seems to fix the overly wide header.

 

[Doktor Grimm]

Replacing

.p-body {
    max-width: 87.5%;
    margin: auto;
}

with

.xb-content-wrapper {
    max-width: 87.5%;
    margin: auto;
}

seems to fix the overly wide header.
View attachment 7289596
View attachment 7289604

Thanks! I'll implement this into the theme properly as soon as I remember my Userstyles login.

 

[Doktor Grimm]

Finally got around to fixing the header (+ a couple minor things that were bothering me). You can reinstall the theme from the link in OP.

 

[Hamsteroid]

Added

.fauxBlockLink {
    border: 1px solid var(--primary-color);
}

to make embedded links more distinguishable:

vs

Side effect is that items in "alerts" will have a green border too. Not sure if I like it or not, but I think I can live with it (for now).

---

Edit: Just noticed another side effect:

Too lazy to look for a fix rn - maybe someone else has a less hacky solution.