How can I customize answer posts in a theme based on the Minimal theme?

Question

I want to customize the appearance of questions when they are in answer posts in my theme, which is based on the Minimal theme. I tried adding things from my previous template, which had asks formatted the way I want, but it didn't work.

Here's what I added:

A div with classes "question" and "bubble" around the {Question} element:

<div class="question bubble">
  {Question}
</div>

CSS for the bubble:

  .bubble {
    color: #9f6f6f;
    font-size: 13px;
    line-height: 20px;
    background: #f5f5f5;
    border: 1px solid #d5d5d5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 8px 12px;
    position: relative;
    display: block;
  }

This looked right when I open just that HTML/CSS as a snippet, but it didn't seem to have any effect at all on the theme. Nothing changed when I added it.

Furthermore, I wasn't able to find a {Question} hiding anywhere already in the Minimal theme.

How can I customize my {Question} display?

score 0 · Answer 1 · answered Oct 19 '13 at 07:22

{Question} is one of the blocks that doesn't work unless it's inside a top-level block, in this case {block:Answer}. There's an example on http://www.tumblr.com/docs/en/custom_themes:

{block:Answer}
    <div class="question">
        <div class="asker">{Asker}</div>
        <div class="asker-question">{Question}</div>
        <img class="asker-avatar" src="{AskerPortraitURL-96}" alt="">
    </div>

    {block:Answerer}
        <div class="answer">
            <div class="answerer">{Answerer}</div>
            <div class="answerer-answer">{Answer}</div>
            <img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt="">
        </div>
    {/block:Answerer}

    <div class="replies">
        {Replies}
    </div>
{/block:Answer}

...however this didn't do exactly what I wanted either. What I ended up doing was putting the following markup into my theme right after the line containing {/block:Text}:

                  {block:Answer}
                      <div class="bubble">
                        <div class="asker">{Asker}</div> asked: <div class="question">{Question}</div>
                      </div>
                      <div class="answer">
                        {Answer}
                      </div>
                  {/block:Answer}

and then adding this CSS at the bottom, just before the line containing {CustomCSS}:

/* Answer Posts */

  .bubble {
    color: #6f6f6f;
    font-size: 13px;
    line-height: 20px;
    background: #f5f5f5;
    border: 1px solid #d5d5d5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 8px 12px;
    position: relative;
    display: block;
    margin-bottom: 1em;
  }

  .asker {
    display:inline;
    font-weight:bold;
  }
  .question {
    display:inline;
  }

and for good measure I added {block:Answer}post-type-answer{/block:Answer} after {block:Audio}post-type-audio{/block:Audio} and {block:Answer}Answer{/block:Answer} after the audio block end as well, in the class name assignments for {block:Posts}.

and this gave me what I wanted:

Tumblr ask/answer post with bubble around question.

How can I customize answer posts in a theme based on the Minimal theme?

1 Answers1