28 votes

Share your themes for Tildes!

Why not have a post for sharing any CSS modifications you've made to Tildes, big or small? Here are some by @tesseractcat (post here) to start off, and so my post isn't so bare :0

Reddit like theme

Hidden tags

Moved the submit a comment box

Three pretty minor/small tweaks to ~ by me:

Remove redundant username on own account page

Move subscriber count further away from subscribe(d) button

Make usernames and username mentions bold red

Warning - the last one is a little ugly :S

50 comments

  1. [6]
    Comment deleted by author
    Link
    1. [2]
      Luca
      Link Parent
      I'm also using the dracula theme, very well done. One minor nitpick - the browse ~ page is broken, it looks like this.

      I'm also using the dracula theme, very well done.

      One minor nitpick - the browse ~ page is broken, it looks like this.

      2 votes
      1. [2]
        Comment deleted by author
        Link Parent
        1. apoctr
          Link Parent
          This should fix it: body .table.table-striped tbody tr:nth-of-type(2n+1) { background-color: #44475a; } If the aim is for all of them to be the same colour.

          This should fix it:

          body .table.table-striped tbody tr:nth-of-type(2n+1) {
              background-color: #44475a;
          }
          

          If the aim is for all of them to be the same colour.

          1 vote
    2. Tetracyclic
      Link Parent
      I'm a big fan of this theme. The only tweak I've made so far is applying the button styling to all .post-button elements. body .post-button { border: 1px dashed #8be9fd !important; padding: 10px...

      I'm a big fan of this theme. The only tweak I've made so far is applying the button styling to all .post-button elements.

      body .post-button {
          border: 1px dashed #8be9fd !important;
          padding: 10px !important;
          margin-right: 10px !important;
      }
      
      2 votes
    3. [2]
      apoctr
      Link Parent
      Ah, that's traumatizing. I'd spent about ~1-2 hours the other day re-implementing my old dracula-inspired theme by separating it by page area/function, commenting/explaining everything, etc....

      Ah, that's traumatizing. I'd spent about ~1-2 hours the other day re-implementing my old dracula-inspired theme by separating it by page area/function, commenting/explaining everything, etc. Finally had it looking really nice, and didn't need the old theme anymore. So I proceeded to delete the new theme instead of the old one.

      Your theme looks very nice though, might just steal that :D

      1 vote
      1. [2]
        Comment deleted by author
        Link Parent
        1. apoctr
          Link Parent
          I'm not sure how I would have backed it up in this case (wrote it straight in Stylus). But yeah, it's a lesson to actually double check I want to delete what I've selected haha. Off topic, but...

          I'm not sure how I would have backed it up in this case (wrote it straight in Stylus). But yeah, it's a lesson to actually double check I want to delete what I've selected haha.

          Off topic, but I've never seen :^) that way round before. It...it disturbs me :0

          1 vote
  2. [3]
    ilios
    Link
    Well, it isn't quite perfect yet, but I was inspired by @Bauke and their fantastic Dracula theme and ended up losing the better part of my afternoon making a dark, terminal inspired theme I call...

    Well, it isn't quite perfect yet, but I was inspired by @Bauke and their fantastic Dracula theme and ended up losing the better part of my afternoon making a dark, terminal inspired theme I call Terminally Ilios. I think it's pretty easy on the eyes and looks especially nice at night. Screenshot. I'm just running it through Stylish, let me know if anyone finds any oddities.

    8 votes
    1. apoctr
      Link Parent
      Certainly very nice on the eyes! Runs fine through Stylus.

      Certainly very nice on the eyes! Runs fine through Stylus.

      1 vote
    2. Gaywallet
      Link Parent
      cheers my dude, added it to my stylish been looking for a good night mode

      cheers my dude, added it to my stylish been looking for a good night mode

      1 vote
  3. [2]
    Stone-D
    (edited )
    Link
    Some minor Stylish tweaks: p {max-width: 95%; text-align: justify;} blockquote { max-width: 92%; } #sidebar {min-width: 250px; width: 250px;} body .post-button-used {color: #FF8C00; } .btn-used {...

    Some minor Stylish tweaks:

    p {max-width: 95%; text-align: justify;}
    blockquote { max-width: 92%; }
    #sidebar {min-width: 250px; width: 250px;}
    body .post-button-used {color: #FF8C00; }
    .btn-used { background-color: #FF8C00; color: #FFFFFF; }
    .is-comment-mine > .comment-itself { border-left: 3px solid orangered !important; }
    .is-comment-mine > .comment-itself > header { background: gold !important; }
    

    Most are geared towards widescreen use (p, blockquote, #sidebar). The vote buttons I've made orange if I've already voted. The original blue vs a slightly different blue wasn't clear enough for my eyes.

    Own-post highlighting (.is-comment-mine lines) I stole and modified from here by @tomf.

    7 votes
    1. apoctr
      Link Parent
      Yeah, @Deimos said he'd be looking into changing those colours. It's especially terrible for colourblind people.

      Yeah, @Deimos said he'd be looking into changing those colours. It's especially terrible for colourblind people.

      3 votes
  4. [6]
    Silbern
    Link
    Not really a theme per se, but here's my Tilde colorscheme. I override all sites with these colors to make them more ergonomic and blend in with my desktop theme better, which looks like this (for...

    Not really a theme per se, but here's my Tilde colorscheme. I override all sites with these colors to make them more ergonomic and blend in with my desktop theme better, which looks like this (for context. And if the pictures look blurry, that's imgur messing them up, try right clicking and selecting "view image", or if that doesn't work try downloading and viewing them in your native image viewing app. The text especially should look razer sharp and clean, and at 1280x768, it's unlikely you have a lower resolution then I do :P ). If you want to replicate this yourself, using Firefox, just go to preferences, search for "colors", and set text to black, background to #DCDCDC, unvisited links to the third box from the bottom of the black / white column, and visited links to the bottomost square in the yellow / orange column. (the fourth column from the left). It's very plain and sometimes breaks sites that rely on custom color / fonts, but it's so easy and comfortable to read that it makes it well worth it.

    4 votes
    1. [4]
      ilios
      Link Parent
      Woah your setup takes me BACK, nostalgia wave!

      Woah your setup takes me BACK, nostalgia wave!

      4 votes
      1. [3]
        Silbern
        Link Parent
        Thanks! I've always very much adored late 90's / early 2000's design, so I thought I'd try to make a culmination of everything I know and put it into one theme for my ThinkPad. It runs super fast...

        Thanks! I've always very much adored late 90's / early 2000's design, so I thought I'd try to make a culmination of everything I know and put it into one theme for my ThinkPad. It runs super fast even on this 12 year old laptop, it's very customizable and functional, and it's (in my opinion) very ergonomic, kind of like this website haha. I've heard this kind of style is making a comeback, and I've love to see that happen :D

        2 votes
        1. [2]
          geosmin
          Link Parent
          Can you post some extra examples of your desktop? Digging the old look.

          Can you post some extra examples of your desktop? Digging the old look.

          2 votes
          1. Silbern
            Link Parent
            Absolutely! I put together an imgur album with some more examples of what it looks like, and comments under each picture to tell you what's going on. And once again I apologize if imgur distorts...

            Absolutely! I put together an imgur album with some more examples of what it looks like, and comments under each picture to tell you what's going on. And once again I apologize if imgur distorts the images, it looks hideous when I browse it, but it's extremely clean and sharp IRL, and hopefully it's only because it has to resize since the browser window is smaller then my screen. If imgur won't show them at the proper resolution for you, I'd be more then happy to put them in a google drive folder or something, maybe that would help...

            4 votes
    2. apoctr
      Link Parent
      Ah, don't get hung up on my use of 'theme' - I just mean any modifications to ~. That said, I think your colorscheme definitely counts as a theme :D It's nice, very...classic? Not sure of the...

      Ah, don't get hung up on my use of 'theme' - I just mean any modifications to ~. That said, I think your colorscheme definitely counts as a theme :D

      It's nice, very...classic? Not sure of the right word, but it's got a nice feel to it. Not quite my cup of tea, but I can certainly understand the appeal of it. I like the cat especially :)

      1 vote
  5. [9]
    rorso
    Link
    Very much a work in progress, but here's my attempt at a nostalgic terminal/CRT style theme for Tildes: https://gitlab.com/snippets/1721975 Screenshots: https://i.imgur.com/scwKpAX.png...

    Very much a work in progress, but here's my attempt at a nostalgic terminal/CRT style theme for Tildes:

    https://gitlab.com/snippets/1721975

    Screenshots:

    https://i.imgur.com/scwKpAX.png
    https://i.imgur.com/ArtwT6w.png

    4 votes
    1. acr
      Link Parent
      This is pretty cool.

      This is pretty cool.

      2 votes
    2. [6]
      Emerald_Knight
      Link Parent
      It looks like it's currently reliant on the black theme as the base, as the colors seem to differ from your screenshots when a different base theme is selected. Though, like you said, it's a work...

      It looks like it's currently reliant on the black theme as the base, as the colors seem to differ from your screenshots when a different base theme is selected. Though, like you said, it's a work in progress. I just want to make sure this issue is made clear so you can address it when you're good and ready :)

      Cool theme in any case. I'm really liking it!

      2 votes
      1. [5]
        rorso
        Link Parent
        Thanks, and yeah I made it on the black theme but when it's finished the idea is for it to be theme independent and much more complete.

        Thanks, and yeah I made it on the black theme but when it's finished the idea is for it to be theme independent and much more complete.

        1 vote
        1. Emerald_Knight
          Link Parent
          Oh, pro tip! For your scanlines section, do position: fixed; for the :before and :after pseudo selectors. The scanlines will remain fixed in place that way, providing a more authentic CRT...

          Oh, pro tip! For your scanlines section, do position: fixed; for the :before and :after pseudo selectors. The scanlines will remain fixed in place that way, providing a more authentic CRT experience. I was just struggling for the last hour or so trying to figure this one out! :)

          1 vote
        2. [3]
          Emerald_Knight
          Link Parent
          I'm looking forward to seeing how it turns out! I'm currently using a slightly modified version right now because I really enjoy the aesthetic (I found the green for e.g. self comment headers to...

          I'm looking forward to seeing how it turns out! I'm currently using a slightly modified version right now because I really enjoy the aesthetic (I found the green for e.g. self comment headers to be a bit too bright for my tastes and went with a darker #006400, among some other minor changes). I'll be keeping an eye out for any updates :)

          1. [2]
            rorso
            Link Parent
            I'm still figuring Gitlab out, but I've made it a project here if you'd like to add to it. I'll work on it more next week when kids are at school. I really like this visual style so I plan on...

            I'm still figuring Gitlab out, but I've made it a project here if you'd like to add to it.

            I'll work on it more next week when kids are at school. I really like this visual style so I plan on spending some time polishing this up to a complete theme.

            2 votes
            1. Emerald_Knight
              Link Parent
              Sure, I wouldn't mind contributing a bit. Naturally you can veto any of my changes in favor of keeping the style as you prefer it and I'll update accordingly. Odds are I'll just keep my own...

              Sure, I wouldn't mind contributing a bit. Naturally you can veto any of my changes in favor of keeping the style as you prefer it and I'll update accordingly. Odds are I'll just keep my own separate clone updated with my own override preferences :)

              2 votes
    3. Silbern
      Link Parent
      Very nice! I was thinking of something like this for a night mode, this is a fantastic start. I think I might change the grey / white text to an amber or red color, to make it more retro while...

      Very nice! I was thinking of something like this for a night mode, this is a fantastic start. I think I might change the grey / white text to an amber or red color, to make it more retro while also improving ergonomics a little. Thank you very much for sharing :)

  6. [9]
    tomf
    Link
    Using Stylish, I've only added a few things .topic-full, main, .post-listing {padding: 60px 0.4rem;} #site-header {position: fixed;background: #002b36;min-width: 100%;border-bottom: 1px #AAA...

    Using Stylish, I've only added a few things

    .topic-full, main, .post-listing {padding: 60px 0.4rem;}
    #site-header {position: fixed;background: #002b36;min-width: 100%;border-bottom: 1px #AAA solid;padding:10px;z-index: 99999;}
    #sidebar {padding: 60px 0.4rem;}
    .is-comment-mine {background: rgba(255,255,255,.5);}
    

    nothing crazy. It makes the header static and highlights own-comments. My CSS is rusty, so there's probably a better way to go about this.

    3 votes
    1. [3]
      Stone-D
      (edited )
      Link Parent
      I'm stealing this. :) EDIT My version: .is-comment-mine > .comment-itself { border-left: 3px solid orangered !important; } .is-comment-mine > .comment-itself > header { background: gold...

      .is-comment-mine {background: rgba(255,255,255,.5);}

      I'm stealing this. :)

      EDIT
      My version:

      .is-comment-mine > .comment-itself { border-left: 3px solid orangered !important; }
      .is-comment-mine > .comment-itself > header { background: gold !important; }
      

      The background is unchanged from the original. The left border is 'orangered', while the header with the username is now gold.

      2 votes
      1. [2]
        giodamelio
        (edited )
        Link Parent
        That is nice. (This comment mostly exists to test that css :)) My variation: .is-comment-mine > .comment-itself { border-left: 3px solid #FF4136 !important; } .is-comment-mine > .comment-itself >...

        That is nice. (This comment mostly exists to test that css :))

        My variation:

        .is-comment-mine > .comment-itself {
          border-left: 3px solid #FF4136 !important;
        }
        .is-comment-mine > .comment-itself > header > .link-user {
          color: #FFFFFF !important;
          background: #0074D9 !important;
          padding: 3px 6px 3px 6px;
          border-radius: 7px;
        }
        
        1 vote
        1. Stone-D
          Link Parent
          I like it! I've adopted your link-user css. :)

          I like it! I've adopted your link-user css. :)

          2 votes
    2. [5]
      apoctr
      Link Parent
      Someone posted the other day saying that they couldn't theme Tildes properly using Stylish, while identical themes in Stylus worked. I take it the same issue has not occurred for you?

      Someone posted the other day saying that they couldn't theme Tildes properly using Stylish, while identical themes in Stylus worked. I take it the same issue has not occurred for you?

      1 vote
      1. [4]
        tomf
        Link Parent
        nah, not my experience at all. I originally had a bunch of color changes and stuff without any issues. It's weird that the same CSS would work in Stylus, but not Stylish.

        nah, not my experience at all. I originally had a bunch of color changes and stuff without any issues.

        It's weird that the same CSS would work in Stylus, but not Stylish.

        1 vote
        1. [3]
          apoctr
          Link Parent
          Yeah. It was something related to Firefox AFAIK, something that stopped Stylish injecting CSS but not Stylus. Very odd.

          Yeah. It was something related to Firefox AFAIK, something that stopped Stylish injecting CSS but not Stylus. Very odd.

          1 vote
          1. [2]
            tomf
            Link Parent
            oh! that could be it. I'm using Chrome. Still weird. Great idea for a thread, btw.

            oh! that could be it. I'm using Chrome. Still weird.

            Great idea for a thread, btw.

            1 vote
            1. apoctr
              Link Parent
              Hah, thanks. My motive for this was definitely not to just steal other people's css ;)

              Hah, thanks. My motive for this was definitely not to just steal other people's css ;)

              2 votes
  7. Grapevine
    Link
    Commenting so I can come back later and install these (wish there was a save feature haha)

    Commenting so I can come back later and install these (wish there was a save feature haha)

    3 votes
  8. [14]
    crius
    Link
    Oh well I didn't know so many came up with their own theme. I don't have a theme but am writing an extension for tildes (search "tildes extended" for Chrome or Firefox) and was just thinking this...

    Oh well I didn't know so many came up with their own theme.

    I don't have a theme but am writing an extension for tildes (search "tildes extended" for Chrome or Firefox) and was just thinking this morning what could I add to it.

    An interface to load CSS, given an URL provided by the user seems quite interesting.
    I'lll work on it after lunch.

    2 votes
    1. [13]
      apoctr
      Link Parent
      You made a thread about it the other day, I think? You can feel free to link it :D

      You made a thread about it the other day, I think? You can feel free to link it :D

      1. [11]
        crius
        Link Parent
        Done, it's in queue to be updated on both chrome and firefox marketplace: https://chrome.google.com/webstore/detail/tildes-extended/dinimcigfnjcblajimodbacmbknmicgl...
        2 votes
        1. [10]
          apoctr
          Link Parent
          I assume it's because the page is using HTML, but entering https://gitlab.com/Bauke/TildesDracula/raw/master/css/tildes.css as the custom style URL doesn't result in a themed page. You said that...

          I assume it's because the page is using HTML, but entering https://gitlab.com/Bauke/TildesDracula/raw/master/css/tildes.css as the custom style URL doesn't result in a themed page. You said that you were testing it with Dracula, did you use a different path?

          1. [8]
            crius
            Link Parent
            mhm, it does work for me @apoctr. Did you reloaded the page? I didn't implement an auto refresh of tildes already opened tabs Now that I think of it, I could implement a way of pooling the url...

            mhm, it does work for me @apoctr. Did you reloaded the page? I didn't implement an auto refresh of tildes already opened tabs

            Now that I think of it, I could implement a way of pooling the url stored, like once a day. To keep the source CSS stored in the browser updated with the remote version.

            Anyway in case something goes wrong I set some console.log around to catch exceptions with more detailed info. Just fyi :)

            1 vote
            1. [7]
              apoctr
              Link Parent
              Hm. Yeah, I refreshed the page. Everything else in the extension works. Have you tested it in Firefox? It comes to mind that your extension might have the same issue as Stylish when it comes to...

              Hm. Yeah, I refreshed the page. Everything else in the extension works. Have you tested it in Firefox? It comes to mind that your extension might have the same issue as Stylish when it comes to injecting CSS due to a bug(?) in Content Security Policy.

              Nice extension regardless, though. Now I don't need to right-click + open in new tab on every other post :D

              1 vote
              1. [6]
                crius
                Link Parent
                This is very weird. I did test it but I tried again and it works for me: https://imgur.com/Qy75UEe If you don't mind, if you have a couple of minutes, could you open the dev console while on a...

                This is very weird. I did test it but I tried again and it works for me: https://imgur.com/Qy75UEe

                If you don't mind, if you have a couple of minutes, could you open the dev console while on a tildes.net tab, refresh the page and see if there is some weird message in it?

                Also if you open the inspector in dev tools, you should see the last element of the <HEAD> being something like:

                <style type="text/css" id="customStylesheet">body {
                
                1. [5]
                  apoctr
                  Link Parent
                  I'm pretty sure it is Content Security Policy now. When your extension is enabled, this comes up in the Console: Content Security Policy: The page's settings blocked the loading of a resource at...

                  I'm pretty sure it is Content Security Policy now. When your extension is enabled, this comes up in the Console:

                  Content Security Policy: The page's settings blocked the loading of a resource at self ("style-src"). Source: body {
                  color: #f8f8f2 !important;
                  ba....
                  

                  It trails of after that, but the snippet is clearly the beginning of the Dracula CSS file.

                  The style element is loaded as the last thing under <head>, so it is there, it's just not being applied. Honestly I think this might just be down to how I've (mis)configured Firefox, no fault of yours.

                  1. crius
                    Link Parent
                    It definitely is CSP but weird that I don't have that issue. Maybe I've disabled it some time ago and forgot it. I'll push an update with a fix after dinner, no worries

                    It definitely is CSP but weird that I don't have that issue.

                    Maybe I've disabled it some time ago and forgot it.

                    I'll push an update with a fix after dinner, no worries

                    1 vote
                  2. [3]
                    crius
                    Link Parent
                    After nearly 3 hours digging in google results.... it appears to be another of the fucking ridiculous decision of Mozilla unfortunately. Initially I hadn't any "content_security_policy" specified...

                    After nearly 3 hours digging in google results.... it appears to be another of the fucking ridiculous decision of Mozilla unfortunately.

                    Initially I hadn't any "content_security_policy" specified in my manifest.json as I develop primarly for chrome and as stated by the W3C: https://www.w3.org/TR/CSP/#extensions

                    Policy enforced on a resource SHOULD NOT interfere with the operation of user-agent features like addons, extensions, or bookmarklets. These kinds of features generally advance the user’s priority over page authors, as espoused in [HTML-DESIGN].
                    Moreover, applying CSP to these kinds of features produces a substantial amount of noise in violation reports, significantly reducing their value to developers.
                    Chrome, for example, excludes the chrome-extension: scheme from CSP checks, and does some work to ensure that extension-driven injections are allowed, regardless of a page’s policy.

                    But even adding the proper specification, "content_security_policy": "script-src 'self'; object-src 'self'; style-src 'unsafe-inline'" Firefox is apparenty ignoring it.

                    There are several bug reports opened about this issue.
                    In one specifically, that now I can't find again, the final comment was about how they didn't want extension to have the liberty of allowing inline-unsafe (<script> or <style>) as it's bad practice. To which I agree... if they could give me another way of achieving what I want :)

                    So unfortunately for now it's not going to work on Firefox unless you disable the SCP in the browser itself by going into about:config, searching the flag security.csp.enable and turn it off.

                    I'll add a note in the setting page and will keep an eye on the bug reports in Bugzilla.

                    1 vote
                    1. [2]
                      apoctr
                      Link Parent
                      Thank you of looking into it, I guess I'll look into doing that :)

                      Thank you of looking into it, I guess I'll look into doing that :)

                      1. crius
                        Link Parent
                        It bothers me because I really prefer mozilla over google for obvious reasons but sometimes they just get fixated on this things and really drag things in the mud for no other reason than personal...

                        It bothers me because I really prefer mozilla over google for obvious reasons but sometimes they just get fixated on this things and really drag things in the mud for no other reason than personal (or better, team) belief.

                        1 vote
          2. crius
            Link Parent
            I used a pastebin link but it shouldn't be any different. on save in the settings I'm taking the content of the URL and store it in the local storage of the browser. Give me a minute to check it

            I used a pastebin link but it shouldn't be any different. on save in the settings I'm taking the content of the URL and store it in the local storage of the browser.

            Give me a minute to check it

      2. crius
        Link Parent
        I'll link it once I've done it. Just testing it right now with Dracula Theme :)

        I'll link it once I've done it. Just testing it right now with Dracula Theme :)

        1 vote
  9. tomf
    Link
    I already commented below, but I figured you might be interested. For the username mentions alone I am using body a[href^="/user/"]:not(.link-user):not(.logged-in-user-username)...

    I already commented below, but I figured you might be interested.

    For the username mentions alone I am using body a[href^="/user/"]:not(.link-user):not(.logged-in-user-username) {color:#FF79C6!important}

    2 votes