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.

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 :)