25 votes

Wide Tildes: A user-style for better utilization of large monitors

Posted by gadling (edited )
Tags: css, userstyles

Install from here: Wide Tildes on UserStyles.world

Features

  • Multiple columns on list pages
  • Wider site on all pages

Source

@-moz-document domain("tildes.net") {
header#site-header {
    width: 97vw;
}

.topic-listing li {
    break-inside: avoid-column;    
}

.topic-listing {
    column-width: 25em;
}

.topic-text-excerpt {
    display: none;
}
}

12 comments

  1. Trauma
    Link
    After struggling with Greasemonkey and Tilde's Content Security Policy that forbids inline style sheets I finally broke down and installed Firemonkey which has native userstyles support. For the...

    After struggling with Greasemonkey and Tilde's Content Security Policy that forbids inline style sheets I finally broke down and installed Firemonkey which has native userstyles support. For the benefit of anyone else using it:

    /*
==UserCSS==
@name             Wide Tildes
@match            *://tildes.net/*
@version          1.0
==/UserCSS==
*/

header#site-header {
    width: 97vw;
}

[...]

.topic-text-excerpt {
    display: none;
}
    7 votes
  2. [2]
    widedub
    Link
    I love this idea. Tested on a Dell U3419W (3440 x 1440) using Firefox 116.0b2 with Stylebot and Dracula theme Home This post Profile This is a really nice start. I think the home page can be...

    I love this idea. Tested on a Dell U3419W (3440 x 1440) using Firefox 116.0b2 with Stylebot and Dracula theme

    Home
    This post
    Profile

    This is a really nice start. I think the home page can be cleaned up further and some changes can be made on the postlist and post pages. Id try my hand at a contribution or two if you're tracking this anywhere

    3 votes
    1. gadling
      Link Parent
      I've hosted it on UserStyles World. (I don't feel like setting up a repo for this :D )

      I've hosted it on UserStyles World. (I don't feel like setting up a repo for this :D )

      2 votes
  4. [6]
    Alanh02
    Link
    How do I use this? I can see it is CSS but wanted to trial it on a 42" monitor

    How do I use this?

    I can see it is CSS but wanted to trial it on a 42" monitor

    1 vote
    1. [4]
      coveleski
      Link Parent
      You can use an extension like Stylus or Stylish to load custom CSS styles.

      You can use an extension like Stylus or Stylish to load custom CSS styles.

      3 votes
      1. [2]
        gadling
        Link Parent
        To add to this, Install Stylus Visit tildes.net and click on the Stylus icon on the toolbar and click on "Write style for..." Paste in the CSS above You should see it work

        To add to this,

        • Install Stylus
        • Visit tildes.net and click on the Stylus icon on the toolbar and click on "Write style for..."
        • Paste in the CSS above
        • You should see it work
        4 votes
        1. Alanh02
          Link Parent
          Thank You Kind Tilderoo

          /*
          ==UserCSS==
          @name Wide Tildes
          @match ://tildes.net/
          @version 1.0
          ==/UserCSS==
          */

          header#site-header {
          width: 97vw;
          }

          [...]

          .topic-text-excerpt {
          display: none;
          }

          Thank You Kind Tilderoo

          1 vote
      2. Alanh02
        Link Parent
        Aha! Thanks for that, I will give it a shot and report back

        Aha! Thanks for that, I will give it a shot and report back

        1 vote
    2. gadling
      Link Parent
      I just uploaded it to UserStyles World and edited the original post.

      I just uploaded it to UserStyles World and edited the original post.

      1 vote