Notice: Tildes has implemented native wikis. Visit individual groups' wikis for up-to-date information.
Customizing Tildes
Successor of the awesome-tildes project by @Emerald_Knight listing userthemes, userscripts, and extensions to improve your browsing experience!
Changes using the Web Browser
Extensions
Browser extensions (addons) for Firefox, Chrome, etc… They usually add a number of useful features, especially ones that require deeper integration with the browser.
Name | Author | Description |
---|---|---|
Extended | crius | Extension for Chrome and Firefox to enhance the UX/UI. |
Plus | tcp | Extension to add markdown previews to posts and comments. |
Scripts
Userscripts require an extension like Violentmonkey to work. They are similar to browser extensions but are usually less powerful.
Name | Author | Description |
---|---|---|
Tildenhancer | thykka | Various UI/UX enhancements, including automatic night mode. |
CSS Themes
Userstyles require an extension like Stylus in order to work. They allow a user to completely change the look and styling of a website to their liking.
Name | Author | Description |
---|---|---|
Compact | Bauke | Removes some elements and changes some sizes to make the layout a little more compact. |
“Baukula” | Bauke | Bauke’s take on the Dracula theme. This comment explains/shows the difference from the built-in Dracula theme available from the user settings. |
Dark & Flat | rndmprsn | A dark and flat theme + alt. version combined with pfg’s Collapse Comment Bar |
Aqua Dark | Exalt (openusercss) | A green/blue dark theme |
Tildes Darkish | Minikrob (userstyles.org) | Dark theme using lighter shades of grey. |
A Tildes Darkly | Derv Merkler (userstyles.org) | Has many popular variations on dark themes found in Linux ricing: Monokai, Obsidian, ArcDark, and Dracula |
Retroterminal | Emerald_Knight | Based on early computer displays, mostly black/green with scanlines. |
Custom userstyles
Userstyles can also be used to make smaller and more targeted adjustments. Use the browser developer tools, a browser extension such as Stylus and a resource like the Mozilla Developer Network web docs if you want to try on your own!
For example, the style below will make comment/topic text areas larger:
Credits to @hungariantoast and @Deimos
Bookmarklets
Bookmarklets are script snippets that you can save as bookmarks. When you use the bookmarklet on a page, it triggers an effect.
Change your current theme
Instructions: Copy the code for the theme you want and save it as a bookmark.
- In Firefox press
Ctrl+B
to open your bookmarks sidebar and right click on a bookmark to selectAdd a New Bookmark
.- Paste the javascript code in the
Location
field and fill out the other fields as you wish. Then place the bookmarklet in your bookmarks toolbar for easy access!
- Paste the javascript code in the
- In Chrome/Chromium press
Ctrl+Shift+O
to open the bookmark manager.- Right click anywhere in the manager and select
Add A New Bookmark
. - Paste the javascript code in the
URL
field. Once done you can place the bookmarklet in your bookmarks bar for easy access!
- Right click anywhere in the manager and select
- White:
javascript:(function() { document.cookie = "theme=white;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
- Solarized Light:
javascript:(function() { document.cookie = "theme=light;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
- Solarized Dark:
javascript:(function() { document.cookie = "theme=dark;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
- Dracula:
javascript:(function() { document.cookie = "theme=dracula;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
- Atom One Dark:
javascript:(function() { document.cookie = "theme=atom-one-dark;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
- Black:
javascript:(function() { document.cookie = "theme=black;path=%2F;domain=tildes.net;secure";document.location='https://tildes.net';})()
Thanks to @balooga who originally posted the bookmarklets here!
Specific Changes with Browser Extensions
uBlock Origin
Raymond Gorhill (creator of uBlock Origin):
uBlock Origin is NOT an “ad blocker”: it is a wide-spectrum blocker – which happens to be able to function as a mere “ad blocker”. The default behavior of uBlock Origin when newly installed is to block ads, trackers and malware sites – through EasyList, EasyPrivacy, Peter Lowe’s ad/tracking/malware servers, various lists of malware sites, and uBlock Origin’s own filter lists.
We can leverage uBlock Origin’s advanced capabilities to do things besides ad blocking, like filtering topics and comments from a specific user.
Custom Filters
! Filter topics from a specified user (case sensitive)
tildes.net##article.topic[data-topic-posted-by="Example_Username"]
! Filter comments from a specified user (case sensitive)
tildes.net##.comment-itself:has(> header > .link-user:has-text(/^Example_Username$/))
! Filter specific Tildes threads by ID (check the URL)
tildes.net##article[id="topic-7cv"]
! Hides ALL comment authors on Tildes (pseudo-anonymous mode)
tildes.net##.comment-itself > header > .link-user
! Hide comment vote button/count (YOU WILL NOT BE ABLE TO VOTE WITH UBLOCK ON)
tildes.net##button.btn-post-action[name="vote"]
! Hide topic vote button/count (YOU WILL NOT BE ABLE TO VOTE WITH UBLOCK ON)
tildes.net##button.topic-voting
! Hide a specified user's vote count (intended for oneself)
tildes.net##article.topic[data-topic-posted-by="rfr"] > div.topic-voting
tildes.net##.comment-itself:has(> header > .link-user:has-text(/^rfr$/)) > div.comment-votes
Instructions for use
- Open uBlock Origin Settings.
- Click the uBlock icon in your browser.
- There is a big “power button”. Below it are four icons, you want to click the far right one. Hovering will show “Open the dashboard”.
- Go to the “My Filters” tab.
- Copy and paste the above filters to the text area.
- Edit the filters
- e.g. replace
Example_Username
withrfr
. - The
^
and$
in the comment filter are important. Don’t remove them when changing the username. - Check the “short link” in the side bar for the topic id.
- e.g. replace
- Copy the filters and edit the necessary usernames/IDs again as many times as you wish. (e.g. to filter additional users/topics)
- Additionally, if you only want the filter(s) to apply in a certain group, add the group name to the domain like this:
tildes.net/~tildes.official##<filter>
- Additionally, if you only want the filter(s) to apply in a certain group, add the group name to the domain like this:
- Remember to click the “Apply Changes” button to save your filters.
- Refresh any previously open pages on Tildes. Your filters should now be working!
Credits to @rfr for making the instructions!