• Activity
  • Votes
  • Comments
  • New
  • All activity
  • Showing only topics with the tag "css". Back to normal view
    1. User-styles don't work on Tildes anymore?

      I can't seem to get any CSS user-style to work with Tildes anymore. I'm using Stylus on Firefox. Has something changed recently on Tildes which is causing this? Edit: I was using Stylus already,...

      I can't seem to get any CSS user-style to work with Tildes anymore. I'm using Stylus on Firefox. Has something changed recently on Tildes which is causing this?
      Edit: I was using Stylus already, just thought it was Stylish.

      10 votes
    2. 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...

      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
      20 votes
    3. Wide Tildes: A user-style for better utilization of large monitors

      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; }...

      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;
      }
      }
      
      25 votes
    4. Tildes CSS and Android accessibility

      Hi all. On my Pixel phone I have the accessibility option for font size and display size turned up a notch or two but noticed that not all of the text in Tildes adheres to this. Some front page...

      Hi all. On my Pixel phone I have the accessibility option for font size and display size turned up a notch or two but noticed that not all of the text in Tildes adheres to this. Some front page topic text is bigger, some of them remain small.

      Is this something that can be quickly tested and fixed if it's a bug? It might drive poor sighted people away from the site.

      I'm assuming it's not me, as my Pixel 7 is quite new .... but I am on the Android beta program.

      Can anyone else try and see if it's a localised issue or more global?

      I can post screen shots of needed but not sure what image sharing sites you prefer to use in here!

      Edit:

      Fixed with a chrome flag....

      the text-scaling is being replaced by the "Accessibility Page Zoom" feature (currently hidden behind the feature flag in chrome://flags)

      23 votes
    5. Groups don't show unsubscribed topics

      On https://tildes.net/groups it looks like at least on Firefox 88 the normal link color: a.link-user:visited, a.link-group:visited is overriding the unsubscribed color:...

      On https://tildes.net/groups it looks like at least on Firefox 88 the normal link color:

      a.link-user:visited, a.link-group:visited
      

      is overriding the unsubscribed color:

      .group-list-item-not-subscribed a.link-group
      
      4 votes
    6. Its still rough, but I made a really busy tildes theme

      I decided to rewrite this from scratch. You can try it out if you're game. album I wiped out my profile in Chrome the other day and forgot to back up stylus and some other settings for a few...

      I decided to rewrite this from scratch. You can try it out if you're game.

      album


      I wiped out my profile in Chrome the other day and forgot to back up stylus and some other settings for a few extensions. I found an old post where I listed part of a theme I'd started working on, but had since abandoned.

      I couldn't find a copy of the ol' Tiltweaks stylus theme, either, so I decided to bring back that old, unfinished gem to get my theme back to roughly where I had it before... then I added a bunch of other crap in.

      Anyway, here's the link to a busy screencap.

      The two column layout isn't for everybody, but in the brief time I've spent with it, I'm starting to like it.

      Just thought I'd share. I'm about 99.6% certain everybody will see it and say, 'gross' :)

      15 votes
    7. Any custom themes using Stylus?

      I switched to the light theme the other day. I'm typically all-in with dark themes for everything, but there was some convincing research. I started working on a light theme, but it's fairly...

      I switched to the light theme the other day. I'm typically all-in with dark themes for everything, but there was some convincing research.

      I started working on a light theme, but it's fairly basic.

      I was digging through the old thread and found a few gems, but I'm wondering what everybody has been up to since. Time for some show and tell!

      10 votes
    8. Stylus userstyle that hides comment vote counts

      This simple stylus userstyle hides vote counts on both voted and unvoted comments and your own comments. I really like what Deimos did, it significantly improved my time here on Tildes. If you...

      This simple stylus userstyle hides vote counts on both voted and unvoted comments and your own comments. I really like what Deimos did, it significantly improved my time here on Tildes. If you want the feature back, install Stylus extension, click the Stylus icon > write style for tildes.net and paste this:

      /* Hide vote count for unvoted comments */
      .btn-post-action[name="vote"] {
          visibility: hidden;
          position: relative;
      }
      .btn-post-action[name="vote"]:after {
          visibility: visible;
      	content: "Vote";
          position: absolute;
      }
      
      /* Hide vote count for voted comments */
      .btn-post-action[name="unvote"] {
          visibility: hidden;
          position: relative;
      }
      .btn-post-action[name="unvote"]:after {
          visibility: visible;
      	content: "Voted";
          position: absolute;
      }
      
      /* Hide vote count for your own comments */
      .comment-votes {
          display: none;
      }
      

      Known issues

      • There is extra padding around Vote button
      • Extensions such as Vim Vixen cannot interact with Vote button
      10 votes
    9. Weird bug. CSS messes up, even after page reload.

      https://tildes.net/~hobbies/bzx/what_are_your_hobbies_and_how_do_you_get_into_them#comment-2z4f See for yourself. Text is squished to the left side of the page, one or two words per line. No idea...

      https://tildes.net/~hobbies/bzx/what_are_your_hobbies_and_how_do_you_get_into_them#comment-2z4f

      See for yourself. Text is squished to the left side of the page, one or two words per line. No idea if anyone else can see this but since it happens every time l visit that link l thought it was worth asking.

      Going to poke @Deimos on this one l suppose.

      Edit: Issue created.

      6 votes
    10. Could someone proficient with CSS make a userstyle that moves the vote buttons on posts to the left?

      I'm left handed and having to reach the right side of the screen is pretty annoying when browsing one handed on mobile. I know this seems like a silly issue(and it very much is) but I'd be very...

      I'm left handed and having to reach the right side of the screen is pretty annoying when browsing one handed on mobile. I know this seems like a silly issue(and it very much is) but I'd be very grateful if someone could help

      18 votes
    11. Firefox plugin Stylus no longer working on Tildes

      I have poor vision and I rely heavily on a Firefox plugin called Stylus to make websites readable - in particular the trend for low contrast and small text. That includes Tildes. I updated it to...

      I have poor vision and I rely heavily on a Firefox plugin called Stylus to make websites readable - in particular the trend for low contrast and small text. That includes Tildes.

      I updated it to v1.5.0 and now the styles I set for Tlldes no longer work - most other sites still appear to work but I've not checked them exhaustively.

      I immediately tried rolling back a release or two (1.4.23 and 1.4.22) but those versions no longer work for any site. I tried randomly downgrading to even older versions but the same result. I think I'm stuck with the latest version..

      I notice in the browser console there are 2 errors reported on Tildes e.g. on this page I see:

      Content Security Policy: The page's settings blocked the loading of a resource at inline ("script-src"). new_topic:1:1
      Content Security Policy: The page's settings blocked the loading of a resource at inline ("style-src"). new_topic:1:1

      Using the Firefox Developer tools Inspector - I see my style settings for Tildes injected by Styuls (after the body) but they do not work any more.

      Since only Tildes so far is not working with my Stylus settings I guess there is also a recent change to Tildes that is causing Stylus to fail.

      This is a rather serious issue for me as all the colour options in the setting are low contrast and cause eye strain which becomes painful without the Stylus settings.

      Thanks for any help you can offer.

      17 votes
    12. Why is there guid-like parameter when requesting js or css?

      Hi, I looked through JS files and I noticed that all JS and CSS are called with weird parameter. tildes.css?aadf6c54 tildes.js?e6d30b42 third_party.js?4393e99 (I changed the string after ?) Does...

      Hi, I looked through JS files and I noticed that all JS and CSS are called with weird parameter. tildes.css?aadf6c54 tildes.js?e6d30b42 third_party.js?4393e99 (I changed the string after ?)

      Does anyone know why is it done and what does it mean?

      6 votes
    13. Coding Noob Needs Help/Guidance on Small Project

      Hi, There's a certain site which hosts media files and has a player that depends on a lot of third-party resources to play, while browsers have native support for those file types. Those 3rd-party...

      Hi,

      There's a certain site which hosts media files and has a player that depends on a lot of third-party resources to play, while browsers have native support for those file types. Those 3rd-party resources are often blocked by ad blockers and I have no desire to white-list them. I would like to extract the direct link to the media file and make it playable on my custom web page.

      The link to the media file is present in the page source of each page, always on the same line. It's not anchored in HTML but present in the JavaScript for the player, like so:

          $(document).ready(function(){
            $("#jquery_jplayer_1").jPlayer({
              ready: function () {
                $(this).jPlayer("setMedia", {
                  [ext]: "https://[domain]/[filename.ext]"
                });
              },
      

      In this example it's on line #5. [ext] = the file extension.

      I want to build the following:

      • A web page with a form with a single input field meant to receive links from that specific file host
      • [Something] that extracts the file link from the source of the host's page
      • Present the linked file as playable in an embedded native player

      So far I've managed to create a form with an input box and a submit button, but it doesn't do anything yet. What is the best way to build the actual functionality? I know HTML/CSS. I have some rudimentary understanding of JavaScript/jQuery and Python3, so those would be my preferred tools.

      For those worried about piracy: The files in question are not copyrighted and I'm not looking to make copies. I just want to make them playable. This is for personal use.

      Thank you for reading this far. Any and all advice is welcome!

      10 votes
    14. Confused about paragraph width in posts and comments

      Solved thanks to @MrGrey in the comments! Leaving the post text here for posterity. Whenever I join a new site one of the first things I do is customize the style to my liking with CSS skins. I'm...

      Solved thanks to @MrGrey in the comments! Leaving the post text here for posterity.


      Whenever I join a new site one of the first things I do is customize the style to my liking with CSS skins. I'm having a little trouble here, though, specifically with the fact that no matter what I do, I can't increase the width of the paragraphs in posts and comments.

      As far as I can tell, the div.topic-text-full element spans all the way across the main element, with just a little margin space. .topic-text-full's child p elements only span maybe 80% of .topic-text-full's width, though, and my attempts to make them wider have met with failure:

      .topic-full-text p {
        width: 10%;
        }
      

      successfully shrinks the element, and so do any other widths under 100%. Setting it to any number above 100% makes no changes. Similarly, setting the width in pixels can shrink the element width, but not increase it.

      The same goes if you replace .topic-full-text with .comment-text.

      Is there something very simple that I'm missing? It just really bugs me that the paragraphs don't go all the way across, but since that's such a small issue I'd rather fix it on my end rather than file an official complaint about it.

      3 votes
    15. A couple of the colours on ~ need adjustment

      Now, this is in solarised dark (1 true colourscheme represent), but this specific issue is present in all current schemes - the blue and purple are way too close together. This also impacts...

      Now, this is in solarised dark (1 true colourscheme represent), but this specific issue is present in all current schemes - the blue and purple are way too close together. This also impacts visited vs unvisited links.

      On this same note, the button style for solarised dark is not colour-shifted between schemes.

      14 votes
    16. Userstyle issues

      I had a look at the available themes and being a person who is sometimes inclined to rice, decided to port my colourscheme to tildes using the Stylish firefox extension. Unfortunately, Content...

      I had a look at the available themes and being a person who is sometimes inclined to rice, decided to port my colourscheme to tildes using the Stylish firefox extension. Unfortunately,
      Content Security Policy: The page's settings blocked the loading of a resource at self ("style-src")

      comes up in the debugger on every page. How can I work around this?

      5 votes
    17. Tildes CSS Changes

      There were a few things that I was a bit uncomfortable with, so I created a few css styles to improve some aspects of the experience. Reddit like theme I'm used to Reddit, so I created a quick...

      There were a few things that I was a bit uncomfortable with, so I created a few css styles to improve some aspects of the experience.

      Reddit like theme
      I'm used to Reddit, so I created a quick theme to make Tildes a bit more like Reddit: https://pastebin.com/1rMhbFMF

      Hidden tags
      Seeing a [Joke] tag can sometimes ruin a joke, so I created a snippet that hides tags unless you hover over them: https://pastebin.com/Bzvr3Vmp

      Moved the submit a comment box
      I made a snippet to move the comment box to the top of the page: https://pastebin.com/WCqv3Mr2

      11 votes