Tumblr Themes – How to Make Tags Visible

tumblrtumblr-themes

I have just created a Tumblr blog using the Fluid theme. After creating a new post, I added a few tags, but then I noticed that the tags do not show up along with the post.

I tried searching for an option to make the tags visible, but I could not find it. As it was pointed out, apparently not all themes display the tags.

How do I make the tags visible if using the Fluid theme? What changes do I have to make to its HTML?

Best Answer

Go to the Customize section after you log in
Click on the Theme tab
Click Use custom HTML

This will bring up a edit box that contains the HTML and tumblr code used by the theme.

Put the code for the tags somewhere between the opening {block:Posts} and closing {/block:Posts} tags.

To start off easy, let's put the tags at the bottom of all your post types.

Where you see the following line:

{/block:Posts}

Insert the following starting chunk to look like this:

    {block:HasTags}
       {block:Tags}
          <a href="{TagURL}">{Tag}</a>
       {/block:Tags}
    {/block:HasTags}

{/block:Posts}

Click Update preview in the lower right corner of the edit box (or it will update itself)
Click Save + Close in the upper right of the dashboard.

Refresh your tumblr blog and you should now see the tags display.

You can read more of the specific tags markup needed on the Tags section of "Creating a custom HTML theme"

Related Solutions

Tumblr Themes – How to Separate Tags with Commas in Tumblr Themes

I've got another idea.

{block:Tags}<a class="tag" href="{TagURL}">{Tag}</a><span class="tagtail"></span>{/block:Tags}

This will add a span with the "tagtail" class after every tag.

Then, add this css:

span.tagtail + a.tag:before {
   content:", ";
}

This will select every tag anchor that comes after a tagtail span (so every one but the first). This way, we avoid the need to use the first-child or last-child selectors.

UPDATE:

If you want to ensure that the commas are styled apart from the anchor, I suppose you could also do:

{block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

and then style it like:

span.taghead { display:none; }
a.tag + span.taghead { display:inline; }

However, this might need tweaking because browsers differ on overriding rules.

Showing tags in Tumblr in Munich theme

I found the solution: At the bottom of the CSS, add:

#tags a {
    margin:20px 0 0 0;
    color:{color:Text};
    line-height:10px;
    color:{color:Links};
    text-decoration:none;
    font-variant:small-caps;
    font-family:Georgia;
    font-size:10px;
    position:relative;
    top:-75px;
}

And then place the HasTags code immediately before {/block:Posts}, so...

    {block:HasTags}
        <div id="tags">
            {block:Tags}
                <a href="{TagURL}">&nbsp;#{Tag}&nbsp;</a>
            {/block:Tags}
        </div>
    {/block:HasTags}
{/block:Posts}

Best Answer

Related Solutions

Tumblr Themes – How to Separate Tags with Commas in Tumblr Themes

Showing tags in Tumblr in Munich theme

Related Topic