- Joined
- May 23, 2022
This is a thread for showing off custom user styles for KF, including anything which overhauls the site styles or otherwise tweaks the site in any way, shape, or form. This is inspired by numerous, sporadically active threads in this subforum, including an existing tweaks thread, suggestions for new styles for the site, and a recent original creation. In contrast with these other threads, this is intended to be a catch-all for discussion on styles, including for posting original creations, and to invite interest to theming the site.
TLDR; we discuss and contribute to ricing up this web site w/ tweaks and themes, you can publish or advertise your own tweaks and themes here.
A: User styles are individual CSS files which contain collections of classes and properties to control the style of a website. A user style can override the existing definitions contained in the stylesheet(s) of a web page to adjust the appearance of existing elements. They can range from simple tweaks, like color changes, to full on overhauls or major deviations in the appearance or theme of a web site and its web page(s).
In concept, user styles can be likened to the individual styles that are able to be picked in the style chooser on Kiwi Farms.
Q: Are userstyles related to the site styles I can pick from the style chooser?
A: Somewhat, except you can't select custom user styles from the style chooser; user styles are installed and loaded by a web extension and based on an existing site style. Staff/Null could potentially adapt userstyles to be listed among the site styles, however.
Q: How do I install userstyles?
A: First install a browser extension to add, manage, and automatically apply user styles: Stylus (for Firefox, Chrome) is an open source and great example of an extension able to do such, if not the best extension available.
If using Stylus, you can go to a user style repository to get user styles or create+paste CSS into new entries. In some repositories, such as userstyles.world or uso.kkx.one, a few Kiwi Farms styles are available.
Q: How do I create userstyles?
A: As mentioned, user styles are based on CSS. To get started with creating your own styles, if you are completely new to writing CSS, you can use this tutorial to learn the basics as well as this tutorial to start. Once you understand how CSS works in tandem with HTML/DOM elements, you can use a CSS reference to find properties and their syntax. The Inspect Element feature, present in most modern web browsers, allows one to view the structure of an HTML document and properties from stylesheets affecting HTML elements. This is useful for finding elements to target in created user styles and for understanding the effects of applying user styles to targeted pages.
Stylus has a built in editor that allows live previews while working on user styles. Because of said ability, I highly recommend using its in own editor to create and adjust user styles, especially so for novices since it allows one to understand and learn CSS and the effects of applying properties and/or values.
As userstyles are posted, you can examine their CSS to get an idea of how they work.
Keep in mind that user styles meant to be themes rather than adjustments could also be good future inspirations or prototypes, if not candidates, for new styles to be added to the style chooser, should there be new interest or desire to do so.
An easy way to post user styles or make them available for other users to install is to put the CSS in a code block or compress the CSS file into a .zip file and upload the .zip, however, if you want to post a style and foresee updating it in the future (especially frequently), you may want to consider hosting the user style on a repository. The above mentioned sites are especially good for updating user styles (Stylus has integration with userstyles.world to allow pushing updates), but you can also use other services to host your user style.
TLDR; we discuss and contribute to ricing up this web site w/ tweaks and themes, you can publish or advertise your own tweaks and themes here.
FAQ
Q: What are user styles/userstyles?A: User styles are individual CSS files which contain collections of classes and properties to control the style of a website. A user style can override the existing definitions contained in the stylesheet(s) of a web page to adjust the appearance of existing elements. They can range from simple tweaks, like color changes, to full on overhauls or major deviations in the appearance or theme of a web site and its web page(s).
In concept, user styles can be likened to the individual styles that are able to be picked in the style chooser on Kiwi Farms.
Q: Are userstyles related to the site styles I can pick from the style chooser?
A: Somewhat, except you can't select custom user styles from the style chooser; user styles are installed and loaded by a web extension and based on an existing site style. Staff/Null could potentially adapt userstyles to be listed among the site styles, however.
Q: How do I install userstyles?
A: First install a browser extension to add, manage, and automatically apply user styles: Stylus (for Firefox, Chrome) is an open source and great example of an extension able to do such, if not the best extension available.
If using Stylus, you can go to a user style repository to get user styles or create+paste CSS into new entries. In some repositories, such as userstyles.world or uso.kkx.one, a few Kiwi Farms styles are available.
Q: How do I create userstyles?
A: As mentioned, user styles are based on CSS. To get started with creating your own styles, if you are completely new to writing CSS, you can use this tutorial to learn the basics as well as this tutorial to start. Once you understand how CSS works in tandem with HTML/DOM elements, you can use a CSS reference to find properties and their syntax. The Inspect Element feature, present in most modern web browsers, allows one to view the structure of an HTML document and properties from stylesheets affecting HTML elements. This is useful for finding elements to target in created user styles and for understanding the effects of applying user styles to targeted pages.
Stylus has a built in editor that allows live previews while working on user styles. Because of said ability, I highly recommend using its in own editor to create and adjust user styles, especially so for novices since it allows one to understand and learn CSS and the effects of applying properties and/or values.
As userstyles are posted, you can examine their CSS to get an idea of how they work.
Beyond the traditional userstyles, you can apply the certain features of UserCSS to parametrize your userstyle to allow end user customization. (Writing UserCSS)
Modern Examples of Userstyles/Themes
KFKompact by @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.
Cave Theme by @Wol
https://userstyles.world/style/17733/I don't often write CSS or add userstyles for that matter, but I decided to make the style just today after getting an idea the other night to just make something.
Attached is the Cave Theme which uses a sandstone or sandy color as its base theme colors. Other colors can be substituted into the variables in the root element within it if wanted.
In addition to color/theme changes, this theme makes several significant modifications which include the following:
I figured this would be fairly simple while not being having too many radical adjustments.
- Gradients are added and overlaid on the original background. This includes a grey taper towards the bottom (which the site themes should all have tbh) and a short, theme colored gradient underneath the top navbar.
- The background image is made a bit smaller to fit all the panels/images on both sides on a 1080p monitor, now sure if anyone will really care but it's something to note.
- A bit more space is added between the user title and badges/banners.
- T&HF banner is now thematically colored and its text is now in bold.
- Notices (like the Community Happenings one) are slightly modified in how they are displayed.
- The notices now have rounded corners like all the other page sections/widgets as well as an internal rounded border for style.
- The Community Happenings notice on the main page, in particular, has its text now centered within the notice. Not like it was needed, but it seems to me to be slightly better that way.
- Highlighted posts have a small glow (to make it easier to find the alphabet agents).
- Fixes to the breadcrumbs (last chevron removed, vertical alignment fixed) are made as seemed to have been done with others.
- The page body, that is the thing behind and containing individual posts, is slightly transparent.
Some screenshots:
***
Simply talk about user styles, ask for advice for making user styles, post user styles, and solicit and give feedback about user styles.Keep in mind that user styles meant to be themes rather than adjustments could also be good future inspirations or prototypes, if not candidates, for new styles to be added to the style chooser, should there be new interest or desire to do so.
An easy way to post user styles or make them available for other users to install is to put the CSS in a code block or compress the CSS file into a .zip file and upload the .zip, however, if you want to post a style and foresee updating it in the future (especially frequently), you may want to consider hosting the user style on a repository. The above mentioned sites are especially good for updating user styles (Stylus has integration with userstyles.world to allow pushing updates), but you can also use other services to host your user style.
Last edited:
