Search code examples
htmlcsstumblr

Aligning Tumblr blockquotes below, not within, one another

I'm a newbie to HTML/CSS. I decided to learn it so I could code my own Tumblr theme (and I'm proud to say it's nearly done!). I'm trying to style the replies, which are in the form of blockquotes. I want them to line up below one another, like rectangles one after the other (as in forum posts, etc.) but I can't work out how. At the moment, they're stacking within one another, as is default:

You can see the problem...1

Any suggestions would be greatly appreciated. Please and thank you :)

Solution

  • The {Caption} variable doesn't allow any manipulation so you would need to use a script. There is a plugin available to achieve this though, see un-nest tumblr captions.

    Alternatively, if you look in the new default tumblr theme's code, you will see that there is a wealth of undocumented variables they have used to achieve this.

    For a photo post, this is the code they have:

    {block:NotReblog}
<figcaption class="caption">
    {Caption}
</figcaption>
{/block:NotReblog}

{block:RebloggedFrom}
<div class="reblog-list">
    {block:Reblogs}
    <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
        <div class="post-reblog-header">
            <div class="post-avatar">
                <div class="post-avatar-wrapper">
                    {block:IsActive}
                    <a class="post-avatar-link{block:isNotOriginalEntry} sub-icon-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
                        <img class="post-avatar-image" src="{PortraitURL-64}">
                    </a>
                    {/block:IsActive}
                    {block:IsDeactivated}
                    <span class="inactive reblog-avatar{block:isNotOriginalEntry} sub-icon-reblog{/block:isNotOriginalEntry}">
                        <img class="post-avatar-image" src="{PortraitURL-64}">
                    </span>
                    {/block:IsDeactivated}
                </div>
            </div>
            {block:IsActive}
            <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}</a>
            {/block:IsActive}
            {block:IsDeactivated}
            <span class="inactive post-tumblelog-name">{Username}</span>
            {/block:IsDeactivated}
        </div>
        <div class="post-reblog-content">
            <div class="post-body">
                {Body}
            </div>
        </div>
    </div>
    {/block:Reblogs}
</div>
{/block:RebloggedFrom}

    Also a side note: From my experimenting with the above code, if you change {Portrait-64} to any of the other standard tumblr avatar sizes (like 30, 24 etc) it will revert back to just the blog that you're on's avatar.