Search code examples
csscustomizationtumblrtumblr-themes

Styling tumblr reblog comments

I've looked everywhere for this, with no luck! I hope you guys can help me with this :)

I'm making a custom tumblr theme, but one thing that I don't like it the tabular way tumblr displays its post comments. What I mean is specifically this:

enter image description here

In the code for the tumblr theme, there isn't really a specific call to the rendering of these comments, most of the time it's just part of the post body, the picture caption, etc. I know that the strings are rendered as block quotes, so by creating custom css for that I can change the appearance a little bit.

But the main thing i want to do is remove the nesting, so that the name of whoever added the comment is always by the comment itself and it's goes from top to bottom, oldest to newest. For example I would like the above reblog list to be rendered as: 

    unicornhairs: her suit tho omg
    bakinginthebatcave: I love wedding photos of strangers. I don't even know you but I'm so happy that you're happy and you look so lovely and it's so wonderful and affirming somehow. I don't know. Wedding photos make me happy. 
    rainbowrowell: Does her suit have stripes down the inside of the legs? REVERSE HAN SOLO.
    bookoisseur: oh i love this
I frickin love these kinds of weddings <3

Is this kind of thing possible? and how would I go about it?

Solution

  • To add to my comments, some time ago I wrote some css which resets some of the default tumblr styling for reblogs. These are often indented blockquote elements.

    This is my css:

    #header p, 
.post .sidebar p, 
.post h2, 
.post h3, 
.post strong, 
.post b, 
.post small, 
.post p, 
.post blockquote, 
.post ul, 
.post ol, 
.post .quote, 
.post .quote .quote, 
.post .conversation ul li, 
.description, 
 #footer .footer, 
 #footer .description p, 
 #footer h2 {
    font-size: 12px;
    font-weight: normal;
    line-height: auto;
}

.post p, 
.post blockquote, 
.post ul, 
.post ol {
    border-left: none;
    padding: 0;
    margin: 0;
}

    It might look like overkill (and it might be more than you need), but what I found was that when people reply to a post on tumblr or reblog and add comments, it is possible to cut and paste from another application which will preserve formatting and html elements, so it took me some time to identify the variants and then reset them, I had to keep adding to this list of css.

    It should be a good start though.