How to get hashtags to show up in front of the tags on Tumblr

tumblrtumblr-themes

I'm using the "Feather" theme on Tumblr, which I had to customize in order for it to display tags. The tags are showing up fine on my dashboard, but if I actually visit my blog URL, there is no hash (#) in front of them. This small change is annoying me terribly. Is there anyway to tell the tag system I want it to automatically put a hash there to separate them?

My HTML for the tags is as follows:

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

Best Answer

Variant 1: in HTML

If you want to include the # before each tag so that it could be copy&pasted, you could add it in your markup:

<a href=”{TagURL}”>#{Tag}</a>

Variant 2: in CSS

If you only want to display the #, you could use pseudo-elements (CSS):

a::before (content:"#";)

You'd need to use an appropriate selector so that it only adds the pseudo-element to the tag links; if there is no such class or ID, you could add a class to your markup, of course, e.g.:

<a href=”{TagURL}” class="tag">#{Tag}</a>

so then you could add to your CSS:

.tag::before (content:"#";)

Variant 3: tags itself

If you want your actual tags to start with a #, you'd need to re-tag your content. But I'd assume that Tumblr forbids the # character in tag names (but there doesn't seem to be any documentation which characters are allowed), so this wouldn't work.

I don't know/understand your exact use case, but I assume that you only need it as visual separator, so you should go with variant 2.

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.

How to make tags visible using this tumblr theme

Include the following code:

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

in the block for each type of post. So you will have this seven times: in {block:Text}, in {block:Audio}, etc.

Put this right before the closing of the block (so right before {/block:Text}, for example) to have the tags show up at the end of the post.

Tumblr provides some documentation on this here.