20 votes

Tilweaks: A user style I made to "clean up" Tildes' interface

Posted by admicos (edited )
Tags: stylus, css, user created, themes.display

This was originally made just for personal use, but I decided to clean it up and share it.

  • Should support all built-in themes (Themes other than Dracula were afterthoughts and might not be as polished. Especially light themes)
  • All changes are toggle-able

Changes

  • Configurable font size
  • Remove sidebar background
    • Make the sidebar primary button clear (border only)
  • Add a border to the "main" element
  • Add extra spacing to various elements
    • Remove the alternating background from thread colors
  • Remove comment borders
    • Add depth indicators (dotted left border for children only)
    • Add comment backgrounds (to separate comments without borders)
  • Hide votes (disabled by default)

Installation

Configuration under Stylus

  1. Open the extension popup in when in tildes.net
  2. Click the cog next to Tilweaks
  3. Edit to your liking

16 comments

  1. entangledamplitude
    Link
    One of the aspects of the current Tildes homepage design that I really like is the alternating colors for successive items. Provides visual cues making it much easier to scroll while skimming...

    One of the aspects of the current Tildes homepage design that I really like is the alternating colors for successive items. Provides visual cues making it much easier to scroll while skimming headlines.

    15 votes
  2. tomf
    Link
    this is pretty awesome. I had no idea that Stylus could have an options menu like this. Really nice work!

    this is pretty awesome. I had no idea that Stylus could have an options menu like this. Really nice work!

    7 votes
  3. [2]
    Whom
    Link
    Huh, looks nice. I'm going to try this out later. Do you plan on keeping it up-to-date with site changes?

    Huh, looks nice. I'm going to try this out later.

    Do you plan on keeping it up-to-date with site changes?

    4 votes
    1. admicos
      Link Parent
      As long as I use it myself, definitely.

      Do you plan on keeping it up-to-date with site changes?

      As long as I use it myself, definitely.

      5 votes
  4. [3]
    Comment deleted by author
    Link
    1. Deimos
      Link Parent
      Definitely possible! I'm going to try it out and see what I think of some of the changes. The comment styling updates especially look interesting to me from screenshots but I'll need to test them...

      Definitely possible! I'm going to try it out and see what I think of some of the changes. The comment styling updates especially look interesting to me from screenshots but I'll need to test them out in actual usage for a while.

      6 votes
    2. cfabbro
      (edited )
      Link Parent
      It could definitely make for a decent "compact mode" overall... but I personally find many of the changes way too hard on my eyes, especially on my 1440p ultrawide. The selector options built into...

      It could definitely make for a decent "compact mode" overall... but I personally find many of the changes way too hard on my eyes, especially on my 1440p ultrawide. The selector options built into the style are pretty awesome though, and I would love to see more customization like that for the themes already available on Tildes.

      5 votes
  5. [2]
    synergy-unsterile
    Link
    Added to the Customizing Tildes wiki page.

    Added to the Customizing Tildes wiki page.

    4 votes
    1. Icarus
      Link Parent
      That is such a handy link, thank you! The ublock origin filters are great. Username blocking seems to work very well.

      That is such a handy link, thank you! The ublock origin filters are great. Username blocking seems to work very well.

      2 votes
  6. gpl
    Link
    Definitely like the comment styling. I might have to give this a try later.

    Definitely like the comment styling. I might have to give this a try later.

    3 votes
  7. [3]
    Turtle
    Link
    Just so you know, the logo does not appear on the Gruvbox Light theme.

    Just so you know, the logo does not appear on the Gruvbox Light theme.

    3 votes
    1. admicos
      Link Parent
      ouch. it seems like i forgot to add any color information whatsoever to the light gruvbox theme. working on it

      ouch. it seems like i forgot to add any color information whatsoever to the light gruvbox theme. working on it

      4 votes
    2. admicos
      Link Parent
      Done. Open the theme installation page again and re-install (or you can just wait for it to auto-update whenever it decides to)

      Done. Open the theme installation page again and re-install (or you can just wait for it to auto-update whenever it decides to)

      2 votes
  8. Omnicrola
    Link
    It's feels a lot cleaner but without radically changing the overall aesthetic, nice job! I did bump my font up to 20px to avoid eye strain though.

    It's feels a lot cleaner but without radically changing the overall aesthetic, nice job!

    I did bump my font up to 20px to avoid eye strain though.

    1 vote
  9. [3]
    admicos
    (edited )
    Link
    I most likely won't bump this thread for any "regular" updates, but bumping to let people using this know that I have moved the theme's auto-update URL. While this shouldn't (hopefully) be an...

    I most likely won't bump this thread for any "regular" updates, but bumping to let people using this know that I have moved the theme's auto-update URL. While this shouldn't (hopefully) be an issue and your theme should migrate over to the new URL, you might want to check if you got the 1.0.3 update. This might take ~24 hours, or maybe more depending on your update frequency settings in your preferred user style extension.

    Also I removed some hard-coded colors, since the last CSS update provides them as variables. This should help with cohesiveness for anyone using custom color schemes. One exception being the comment background color, which is still hand-picked for all the default themes. I need to find a way to automatically generate that in the future.

    edit: https://tild.es/s10#comment-5nh0 happened. 1.0.3 is out. If your style hasn't updated yet, you might need to update twice. Once for the new URL, then for the fixes.

    1 vote
    1. [2]
      admicos
      Link Parent
      I'm bumping this thread again because after some time this got a new update. Here are the new changes The link is no longer broken anymore, and because it's no longer on my server, I'd expect it...

      I'm bumping this thread again because after some time this got a new update. Here are the new changes

      • The link is no longer broken anymore, and because it's no longer on my server, I'd expect it to break less.
        • Not because of any stability issues, but because I often nuke and re-start my server.
        • I added a redirect to the last few links, so if you have automatic updates set on your userstyle injector, it should update in about a day. You can reinstall the style to make it quicker.
          • Unless you have a very old version.
      • New feature: "Make Long Content Easier to Read". This is a "port" of a style I personally used for some time now. It bumps up the font size of text and adds a bit of spacing. This is disabled by default.
        • I added it mainly because I was used to it, It probably does very little to improve reading in general.
      • New feature: "Hide votes". This is another "port" of one of the hide votes userstyles out there (can't recall which). Also disabled by default.
        • I recall having to modify it a bit to make it work, so probably not a direct port like the other one.
      • Disabled the donation box customization by default since the donation box hasn't been there for some time now. This is probably going to get removed in the future.
      • Bumped up the default font size to 20px.
      • Disabled the "themed logos" feature by default since it does 3rd party requests to GitLab, which some people might want to avoid.
      • Disabled the "thin logo font" feature by default since it looks bad on some fonts.

      I am not exactly sure if changes in the defaults will affect your own preferences, so consider checking if you previously modified one of the things I changed.

      4 votes
      1. admicos
        Link Parent
        Here's your yearly Tilweaks update: Themed logos have been removed (they were broken since forever) Also removed thinLogoFont because it's too small of a change Donation box customization has been...

        Here's your yearly Tilweaks update:

        • Themed logos have been removed (they were broken since forever)
          • Also removed thinLogoFont because it's too small of a change
        • Donation box customization has been removed as it hasn't been a thing for a while
        • "Make Long Content Easier to Read" has been removed because it really doesn't do what it promised
          • At least I gave up on it, if anyone actually benefited from it let me know and I'll add it back in

        I am also considering merging some options together, options like "No Sidebar Background" and "Clear Sidebar Button" make no sense without each other. Or the comment styling stuff which end up looking too wonky if you do not enable/disable them all. Are there anyone who toggles these options separately? Can you let me know?

        Also, can any CSS people here help me out with potentially getting rid of var(--tw-semitransparent)? I think it can be done but I have no idea how. Hand picking all the colors were just a temporary hack that kinda stuck (and I think I'm missing the Love themes still)

        Anyway, if you have the thing already installed it'll receive the update whenever your userstyle injector feels like it. Or you can always re-install it manually.

        2 votes