20 votes

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

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

  • Lower the font size to 18px (configurable)
  • Make the Tildes logo follow your theme (logos from https://gitlab.com/Bauke/tildes-logos)
    • Thin font-weight for the "Tildes" text
  • Remove sidebar background
    • Change donation progress box to better match the "new" sidebar
    • 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)

Comparison screenshots

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

ps: I would assume this would be the right group for this. If not, please let me know :)
pps: Feel free to suggest extra changes or report any bugs/weirdness

15 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]
    Bauke
    Link
    It's awesome to see the alternative logos put to use. :3 Great work! Maybe some of these changes could be merged into Tildes natively. @Deimos, thoughts?

    It's awesome to see the alternative logos put to use. :3 Great work! Maybe some of these changes could be merged into Tildes natively. @Deimos, thoughts?

    4 votes
    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. 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