Tumblr: How to control CSS with post tagging (UPDATE: Working Method without JQuery!)

Question

Seen this done before, am curious as to how it is done. Example can be found over at http://wordographic.info/

For example, if I tag a post blue, the bg-color of the post turns blue, etc.

Anyone know how this is done?

Thanks.

Magee

Answer 1

Found a way to do this with only HTML/CSS. Pretty simple, just add the {Tag} block to any div class wrapping the post area but make sure it's between {block:Posts} and {block:Text} etc. Now whatever you tag a post now becomes a new class.

{block:Posts}
  {block:Text}
    <div class="post {block:HasTags}{block:Tags}{Tag} {/block:Tags}{/block:HasTags}">
      {block:Title}<h2>{Title}</h2>{/block:Title}
      <p>{Body}</p>
    </div>
  {/block:Text}
{/block:Posts}

Pay attention to the third line down. it is important to add a space after {Tag} otherwise they won't be seperated in the HTML.

The CSS would look like this:

.post { /* default style */
    background: #ccc;
    float: left;
    margin: 10px;
    position: relative;
    }
.blue { /* when tagged blue, use this style */
    background: blue !important; 
    }

Works! Pretty simple, no jquery required!

Thanks Blender, wouldn't have thought of this for some reason if I didn't read your jquery method :)

Magee

<div class="post{block:HasTags}{block:Tags} {Tag}{/block:Tags}{/block:HasTags}"> (just a rearrangement of the spaces) works slightly better since it doesn't produce the extra space at the end. – Catiline

Answer 2

With jQuery, anything's possible! This isn't going to work right away, so tweak it for your theme:

$('.post-class .tag-container .tag').each(function() {
  $(this).closest('.post-class').addClass($(this).text());
});

Inerrant

Thanks will give this a shot. I was thinking it might be possible to do it with purely CSS, the idea was to place Tumblr's {Tags} block inside a div class, something like <div class="posts {Tags}"> and if it rendered, tagging 'blue' would render 'blue' as a class. – Magee

I guess I haven't used Tubmlr very much. Nice solution (I'd post it as an answer and accept it)! – Inerrant

Haha thanks, I did just that, I also tested it, it works really really well. – Magee

Answer 3

It is nothing to do with JS, such things are done on server-side. Depends on tags some properties are set to posts and then they are taken into consideration while rendering them to HTML.

Pignus

Answer 4

You want to get the post's tags as class names so you can style posts with CSS, and there is a variable you can use for this purpose. In your template simply use {TagsAsClasses}. This will render HTML friendly class names.

An HTML class-attribute friendly list of the post's tags. Example: "humor office new_york_city"

For detailed explanation see Post chapter in Tumblr docs.

Wolters