2

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!

Community
  • 1
  • 1
LoveOtherLemons
  • 21
  • 4
  • 1
    As long as you're not trying to look up icons of rebloggers, I think (haven't tried anything yet) that this can be done with just CSS. What have you tried so far? Do you have an example page? See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – user812786 Oct 06 '15 at 16:04
  • 1
    I don't really know how to format the posts, though. By default, the comments are nested and Google's only showed how to give the blockquotes different colours. I was thinking maybe have the thread reversed so the blockquotes are "stacked" atop each other chronologically, but I'm not knowledgeable enough to know how to try that. – LoveOtherLemons Oct 06 '15 at 16:36
  • 1
    You're still missing an example.. I can't help you fix code that you haven't provided. Please post the relevant theme code / CSS / rendered HTML for what you've worked on so far. What is your specific issue? Why doesn't the solution in the linked post work for you? – user812786 Oct 06 '15 at 18:23
  • For reblog chains on Tumblr, the HTML structure itself is nested. Tumblr processed posts server-side and arrange these chains into a flat layout. Working from the theme blocks and CSS there's no way we can achieve the same effect unless we throw some complicated jQuery/JavaScript to _parse the HTML of the post_. This is a bad idea because the post might contain just about anything. – approxiblue Oct 10 '15 at 02:59
  • [The post](http://stackoverflow.com/questions/25736897/styling-tumblr-reblog-comments) you link only style the reblog chains so that none of the posts are indented. It doesn't reorder the content to pair up usernames and posts. – approxiblue Oct 10 '15 at 03:01

2 Answers2

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.

relgukxilef
  • 343
  • 6
  • 13
1

@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

EmandM
  • 922
  • 6
  • 12