Tumblr Themes: Comma Separated Tags

Tumblr Themes: Comma Separated Tags

This is a quick tutorial on displaying tags on your Tumblr in a comma-separated list.

I was prompted to share these instructions by Dorijan, who kindly wrote in to inquire about my method:

I recently started modifying a Tumblr theme and want to achieve a similar layout of tags like in your Midday Latte blog. Could you share some insights or code to achieve this?

For this example, I’m using the HTML straight out of the custom theme documentation.

<ul class="tags">
  <li><a href="{TagURL}">{Tag}</a></li>

Without any styling, the above generates a bulleted list of the tags for that post, with each linking to a tag page. Something like this:

Hooray! Appropriately semantic. From here, I can use my stylesheet to do the rest of the work. The following CSS resets browser defaults for unordered list items, floats each one left so the list is inline, and adds commas (except for on the last item).

.tags li {
  padding: 0;
  margin: 0;
  display: block;
  float: left;
.tags li:after { 
  content: '\002C\00a0'; /* Add comma and space after each tag */
.tags li:last-child:after {
  content: ' '; /* Eliminate comma after last tag */

Here’s what those additions produce. Ta-da! A comma-separated tag list.

One last note—if you want to add the number symbol (#) before each tag so that they look like hashtags (like #ui, #wireframes, #planning), just add this declaration to your CSS:

.tags li:before { content: '#'; }

That’s it! Follow me on Tumblr here.

Allison House is a designer and art director specializing in 3D visuals and motion graphics. Her work has appeared in the New York Times, Wall Street Journal, TIME, SPIN, Pitchfork, and many more.