“Unnesting” Nested Blockquotes Using jQuery (to fit tumblr's September 2015 update)

Question

I'm working on a new tumblr theme for a very reblog-heavy blog. Per tumblr's latest update to the comment-chains, some posts get very lengthy. While it looks fine on my dashboard, it wrecks havoc on my blog because of the nested blockquotes.

I'd like to mimic how the comments look on my dashboard, without the user's icons and such, and with an alternating colour to help differentiate commentators. (Bonus if I can remove "blank" comments, but I can deal with that later.)

I've done some searching, but can only find how to get the alternating colours. I did see one post that broke down the comments completely, but I don't understand the code they provided.

I'm very new to HTML, CSS, and jQuery, so any help would be much appreciated!

Answer 1

There doesn't seem to be an official way to do it. However it is possible to achieve the effect using JS. The following script will flatten the nested blockquotes and also remove the ":" after the blog names and instead prepend them with "- ". Just put it in a new script tag under the body tag.

$(function() {
    // flatten reblogs
    $("div.cont blockquote").each(function() {
        $(this).parent().prepend($(this).children());
        $(this).remove();
    });

    // remove : and add -
    $("div.cont a.tumblr_blog").each(function() {
        var authorPTag = $(this).parent();
        authorPTag.html($(this));
        authorPTag.prepend("- ");
    });
});

It looks like this on the default theme:

Note however that this may break the next time Tumblr updates the way reblogs are rendered. It will also not work with endless scrolling.

Answer 2

@relgukxilef's answer almost worked for me.

I had to insert jQuery into the theme and then wait for jQuery to be initialised. Tumblr has also updated it's tagging.

Here is the solution I went with:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script type="text/javascript">
  $(document).ready(function () {
    // flatten reblogs
    $("div.post-content blockquote").each(function() {
      $(this).parent().prepend($(this).children());
      $(this).remove();
    });

    // remove : and add -
    $("div.post-content a.tumblr_blog").each(function() {
      var authorPTag = $(this).parent();
      authorPTag.html($(this));
      authorPTag.prepend("- ");
    });
  });
</script>

I added this to the bottom of the theme and everything worked perfectly