Figured I’d cobble together a quick-n-dirty greasemonkey/tapermonkey script to slighly modify the CSS to feel a little more like old.reddit with RES. Still not quite as compact as I’d like, but it’s getting there.

**edit/update: **

changelog

  • All future versions on github: https://github.com/soundjester/lemmy_monkey/
  • v0.4 - reformatted to remove greater-than signs; added observer to catch and reformat new comments;
  • v0.3 - added script to move the comment collapse button to be in front of user name (thanks @DarkwingDuck); tightened up the code, removed unneeded function call.
  • v0.2 - modified to work on any lemmy instance (thank you, God!)
// ==UserScript==
// @name         Lemmy to Old.Reddit Re-format (Observer)
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Reformat widescreen desktop to look more like Reddit
// @author       mershed_perderders, DarkwingDuck
// @match        https://*/*
// ==/UserScript==

(function() {
	'use strict';

	var isLemmy = document.head.querySelector("[name~=Description][content]").content === "Lemmy";

	function GM_addStyle(css) {
		const style = document.getElementById("GM_addStyleBy8626") || (function() {
			const style = document.createElement('style');
			style.type = 'text/css';
			style.id = "GM_addStyleBy8626";
			document.head.appendChild(style);
			return style;
		})();
		const sheet = style.sheet;
		sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
	}

	function MoveCommentCollapseButton(container) {
		var firstTargDiv = container.querySelector(".btn.btn-sm.text-muted");
		var secondTargDiv = container.querySelector(".mr-2");
		//-- Swap last to first.
		container.insertBefore(firstTargDiv, secondTargDiv);
	}

	function ApplyMoveCommentCollapseButton(element) {
		const observer = new MutationObserver(function(mutationsList) {
			for (let mutation of mutationsList) {
				if (mutation.type === 'childList') {
					for (let addedNode of mutation.addedNodes) {
						if (addedNode.matches('.d-flex.flex-wrap.align-items-center.text-muted.small')) {
							MoveCommentCollapseButton(addedNode);
						}
					}
				}
			}
		});

		observer.observe(element, { childList: true, subtree: true });
	}

  //Lemmy to old.Reddit style reformats (to be used for custom stylesheet at a later date)
	if (isLemmy) {
		GM_addStyle(".container-fluid, .container-lg, .container-md, .container-sm, .container-xl {   margin-right: unset !important; margin-left: unset !important;}");
		GM_addStyle(".container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 100% !important; }");
		GM_addStyle(".col-md-4 { flex: 0 0 20% !important; max-width: 20%; }");
		GM_addStyle(".col-md-8 { flex: 0 0 80% !important; max-width: 80%; }");
		GM_addStyle(".col-sm-2 { flex: 0 0 9% !important; max-width: 10%; }");
		GM_addStyle(".col-1 { flex: 0 0 4% !important; max-width: 5%; }");
		GM_addStyle(".mb-2, .my-2 { margin-bottom: 0.3rem !important; }");
		GM_addStyle(".mb-3, .my-3 { margin-bottom: .2rem !important; }");
		GM_addStyle(".mt-3, .my-3 { margin-top: .2rem !important; }");
		GM_addStyle(".thumbnail {   min-height: 100px; max-height: 125px; }");
		GM_addStyle(".vote-bar { margin-top: 15px !important; }");
		GM_addStyle(".comments {  margin-left: 20px; }");

		// Move comment collapse buttons for existing elements
		var divList = document.querySelectorAll(".d-flex.flex-wrap.align-items-center.text-muted.small");
		divList.forEach(MoveCommentCollapseButton);

		// Apply MoveCommentCollapseButton to dynamically loaded elements
		ApplyMoveCommentCollapseButton(document.documentElement);
	}
})();

Screenshot

>

    • mershed_perderdersOP
      link
      fedilink
      English
      132 years ago

      Maybe? I gotta be honest, UX / UI is not my area. I really had to poke around and stretch my CSS knowledge to make this script

      • KNova
        link
        fedilink
        English
        112 years ago

        Well, congrats because it looks great. You did way better than I would have done. Hoping someone else with more subject matter knowledge can weigh in. I would love to install this as default for my users.

        • mershed_perderdersOP
          link
          fedilink
          English
          82 years ago

          heh. I did what all good artists do: I shamelessly stole the idea from somebody else (reddit in this case)

  • The Real Geno Smith
    link
    fedilink
    English
    132 years ago

    for special children like me, how do we use such a thing? I’m guessing a browser plugin of some sort?

    Thanks for taking the effort to make this place feel like our old, abusive, but still comfortable, home. :)

    • mershed_perderdersOP
      link
      fedilink
      English
      11
      edit-2
      2 years ago

      Yeah, so this relies on a browser extension called Tampermonkey (or greasemonkey depending on your browser).

      You install the extension, then create a “new script” and paste in the code above. Then save, refresh the page, and Bob’s your uncle (or Betty’s your aunt)!

      • @sping
        link
        English
        22 years ago

        Also Violentmonkey. Tampermonkey is the least desirable AFAIK because it’s closed source.

        • mershed_perderdersOP
          link
          fedilink
          English
          2
          edit-2
          2 years ago

          Yeah, I personally use violentmonkey, but its usershare is a lot less than grease or tamper. Fortunately, this script “should” work with any of them…

    • @eric5949@beehaw.org
      link
      fedilink
      English
      62 years ago

      I don’t know how to use it but greasemonkey is a browser extension, I assume it lets you run scripts and this is a script for it.

    • KNova
      link
      fedilink
      English
      52 years ago

      Yep, you need either tampermonkey or grease monkey extensions for your browser.

    • DarkwingDuck
      link
      fedilink
      English
      3
      edit-2
      2 years ago

      I think @mershed_perderders@sh.itjust.works went to bed, but apparently a formatting issue occurred while copy-pasting, and > was replaced with > which would break the script.

      Should be

      var div_list = document.querySelectorAll(".d-flex.flex-wrap.align-items-center.text-muted.small");
      var div_array = [...div_list];
      
      div_array.forEach(container => {
          var firstTargDiv = container.querySelector (".btn.btn-sm.text-muted");
          var secondTargDiv = container.querySelector (".mr-2");
          //-- Swap last to first.
          container.insertBefore (firstTargDiv, secondTargDiv);
      });
      

      Edit again: something is fucky with right pointing arrow. If you’re having trouble, replace > with right pointing arrow.

      • @zeldis@sh.itjust.works
        link
        fedilink
        English
        32 years ago

        It looks like the lemmy ui itself is changing that after the page loads which seems like a bug. If you refresh and watch the code you can see it change

        • DarkwingDuck
          link
          fedilink
          English
          6
          edit-2
          2 years ago

          Alright then, let’s avoid right arrow for now. Here is a new and improved version with an Observer that will (or at least should) move the button for dynamically loaded comments as well. Note that the Observer piece was generated by ChatGPT.

          // ==UserScript==
          // @name         Lemmy to Old.Reddit Re-format (Observer)
          // @namespace    http://tampermonkey.net/
          // @version      0.1
          // @description  Reformat widescreen desktop to look more like Reddit
          // @author       mershed_perderders
          // @match        https://*/*
          // @grant        none
          // ==/UserScript==
          
          (function() {
          	'use strict';
          
          	var isLemmy = document.head.querySelector("[name~=Description][content]").content === "Lemmy";
          
          	function GM_addStyle(css) {
          		const style = document.getElementById("GM_addStyleBy8626") || (function() {
          			const style = document.createElement('style');
          			style.type = 'text/css';
          			style.id = "GM_addStyleBy8626";
          			document.head.appendChild(style);
          			return style;
          		})();
          		const sheet = style.sheet;
          		sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
          	}
          
          	function MoveCommentCollapseButton(container) {
          		var firstTargDiv = container.querySelector(".btn.btn-sm.text-muted");
          		var secondTargDiv = container.querySelector(".mr-2");
          		//-- Swap last to first.
          		container.insertBefore(firstTargDiv, secondTargDiv);
          	}
          
          	function ApplyMoveCommentCollapseButton(element) {
          		const observer = new MutationObserver(function(mutationsList) {
          			for (let mutation of mutationsList) {
          				if (mutation.type === 'childList') {
          					for (let addedNode of mutation.addedNodes) {
          						if (addedNode.matches('.d-flex.flex-wrap.align-items-center.text-muted.small')) {
          							MoveCommentCollapseButton(addedNode);
          						}
          					}
          				}
          			}
          		});
          
          		observer.observe(element, { childList: true, subtree: true });
          	}
          
          	if (isLemmy) {
          		GM_addStyle(".container-fluid, .container-lg, .container-md, .container-sm, .container-xl {   margin-right: unset !important; margin-left: unset !important;}");
          		GM_addStyle(".container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 100% !important; }");
          		GM_addStyle(".col-md-4 { flex: 0 0 20% !important; max-width: 20%; }");
          		GM_addStyle(".col-md-8 { flex: 0 0 80% !important; max-width: 80%; }");
          		GM_addStyle(".col-sm-2 { flex: 0 0 9% !important; max-width: 10%; }");
          		GM_addStyle(".col-1 { flex: 0 0 4% !important; max-width: 5%; }");
          		GM_addStyle(".mb-2, .my-2 { margin-bottom: 0.3rem !important; }");
          		GM_addStyle(".thumbnail {   min-height: 100px; max-height: 125px; }");
          		GM_addStyle(".mb-3, .my-3 { margin-bottom: .2rem !important; }");
          		GM_addStyle(".mt-3, .my-3 { margin-top: .2rem !important; }");
          		GM_addStyle(".vote-bar { margin-top: 15px !important; }");
          		GM_addStyle(".comments {  margin-left: 20px; }");
          
          		// Move comment collapse buttons for existing elements
          		var divList = document.querySelectorAll(".d-flex.flex-wrap.align-items-center.text-muted.small");
          		divList.forEach(MoveCommentCollapseButton);
          
          		// Apply MoveCommentCollapseButton to dynamically loaded elements
          		ApplyMoveCommentCollapseButton(document.documentElement);
          	}
          })();
          
  • @Bardak@lemmy.ca
    link
    fedilink
    English
    5
    edit-2
    2 years ago

    Now we just need to get rid of the image preview for really old farts like me. I also wouldn’t mind a theme that gets rid of the inline images in comments and just replaces them with a link.

    • @sping
      link
      English
      12 years ago

      Yeah, this would be really nice at a high level that prevents them from being loaded. Always the first thing I did on creating a new Reddit user.

    • mershed_perderdersOP
      link
      fedilink
      English
      5
      edit-2
      2 years ago

      The script is written to work on “sh.itjust.works” but you can easily change it to whatever instance you use by editing the @match https://sh.itjust.works/* to use that instance’s URL.

      Just drop in the top-level name, similar to what you see used here. Easy-peasy.

      I guess it IS a good argument to create a style like that other comment suggested. I’ll look at doing that.

      • God
        link
        fedilink
        English
        2
        edit-2
        2 years ago

        just so you know, you can make it universal by adding something very simple to your script:

        just wrap the script with this:

        var isLemmy =
          document.head.querySelector("[name~=Description][content]").content ===
          "Lemmy";
        
        if (isLemmy) {
          // your code here
        }
        

        that way ppl don’t have to modify their script and it just works by default :)

        • kopper [they/them]
          link
          fedilink
          English
          2
          edit-2
          2 years ago

          Instead of querying the description (which I’m not sure is hardcoded or not), a better way to do this would probably be just if (window.lemmyConfig). To me it seems pretty unused and might be gone in later versions, but it exists now and we can take advantage of it.

          There is also window.isoData which is probably bit more reliable, but no idea if that naming is Lemmy’s or from a framework Lemmy happens to use. Unlike lemmyConfig though it has plenty of data inside which might make it a lot more reliable if you dig deep enough.

          • God
            link
            fedilink
            English
            12 years ago

            What I use I’ve tested all throughout many instances and it hasn’t failed once yet. I didn’t understand the first thing but yeah I might go with your suggestion Anyway at least to try it because it seems a tiny bit better practice.

          • God
            link
            fedilink
            English
            12 years ago

            I wanna put this here later, if you get around to doing it before I stop being busy, lmk

            • DarkwingDuck
              link
              fedilink
              English
              4
              edit-2
              2 years ago

              This took way too long.

              var div_list = document.querySelectorAll(".d-flex.flex-wrap.align-items-center.text-muted.small");
              var div_array = [...div_list];
              div_array.forEach(container => {
                  var firstTargDiv = container.querySelector(".btn.btn-sm.text-muted");
                  var secondTargDiv = container.querySelector(".mr-2");
              
                  //-- Swap last to first.
                  container.insertBefore (firstTargDiv, secondTargDiv);
              });
              

              Edited because I screwed up and only moved the first comment’s collapse button. Whoopsie.

              @mershed_perderders care to add this?

  • Thomas
    link
    fedilink
    English
    32 years ago

    Good shit, That fixes most of the UI complaints from me. One other think I can think of is making the post a bit smaller to fit more on the screen. Much better than default though.

  • God
    link
    fedilink
    English
    2
    edit-2
    2 years ago

    Pull Request: I made the max width of comments and reply boxes to 840px

    lines changed: 64-65. Inserted:

    		GM_addStyle(".comment p {  max-width: 840px }");
    		GM_addStyle(".comment textarea {  max-width: 840px }");
    
    full code:
    // ==UserScript==
    // @name         Lemmy to Old.Reddit Re-format (Observer)
    // @namespace    http://tampermonkey.net/
    // @version      0.4
    // @description  Reformat widescreen desktop to look more like Reddit
    // @author       mershed_perderders, DarkwingDuck
    // @match        https://*/*
    // ==/UserScript==
    
    (function() {
    	'use strict';
    
    	var isLemmy = document.head.querySelector("[name~=Description][content]").content === "Lemmy";
    
    	function GM_addStyle(css) {
    		const style = document.getElementById("GM_addStyleBy8626") || (function() {
    			const style = document.createElement('style');
    			style.type = 'text/css';
    			style.id = "GM_addStyleBy8626";
    			document.head.appendChild(style);
    			return style;
    		})();
    		const sheet = style.sheet;
    		sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
    	}
    
    	function MoveCommentCollapseButton(container) {
    		var firstTargDiv = container.querySelector(".btn.btn-sm.text-muted");
    		var secondTargDiv = container.querySelector(".mr-2");
    		//-- Swap last to first.
    		container.insertBefore(firstTargDiv, secondTargDiv);
    	}
    
    	function ApplyMoveCommentCollapseButton(element) {
    		const observer = new MutationObserver(function(mutationsList) {
    			for (let mutation of mutationsList) {
    				if (mutation.type === 'childList') {
    					for (let addedNode of mutation.addedNodes) {
    						if (addedNode.matches('.d-flex.flex-wrap.align-items-center.text-muted.small')) {
    							MoveCommentCollapseButton(addedNode);
    						}
    					}
    				}
    			}
    		});
    
    		observer.observe(element, { childList: true, subtree: true });
    	}
    
      //Lemmy to old.Reddit style reformats (to be used for custom stylesheet at a later date)
    	if (isLemmy) {
    		GM_addStyle(".container-fluid, .container-lg, .container-md, .container-sm, .container-xl {   margin-right: unset !important; margin-left: unset !important;}");
    		GM_addStyle(".container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 100% !important; }");
    		GM_addStyle(".col-md-4 { flex: 0 0 20% !important; max-width: 20%; }");
    		GM_addStyle(".col-md-8 { flex: 0 0 80% !important; max-width: 80%; }");
    		GM_addStyle(".col-sm-2 { flex: 0 0 9% !important; max-width: 10%; }");
    		GM_addStyle(".col-1 { flex: 0 0 4% !important; max-width: 5%; }");
    		GM_addStyle(".mb-2, .my-2 { margin-bottom: 0.3rem !important; }");
    		GM_addStyle(".mb-3, .my-3 { margin-bottom: .2rem !important; }");
    		GM_addStyle(".mt-3, .my-3 { margin-top: .2rem !important; }");
    		GM_addStyle(".thumbnail {   min-height: 100px; max-height: 125px; }");
    		GM_addStyle(".vote-bar { margin-top: 15px !important; }");
    		GM_addStyle(".comments {  margin-left: 20px; }");
    		GM_addStyle(".comment p {  max-width: 840px }");
    		GM_addStyle(".comment textarea {  max-width: 840px }");
    
    		// Move comment collapse buttons for existing elements
    		var divList = document.querySelectorAll(".d-flex.flex-wrap.align-items-center.text-muted.small");
    		divList.forEach(MoveCommentCollapseButton);
    
    		// Apply MoveCommentCollapseButton to dynamically loaded elements
    		ApplyMoveCommentCollapseButton(document.documentElement);
    	}
    })();
    
  • wia
    link
    fedilink
    English
    22 years ago

    :( It doesn’t work for me. I’m using firefox, so maybe some levated security or something is getting in the way of it working.