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

Seen this done before, am curious as to how it is done. Example can be found over at http://wordographic.开发者_StackOverflow社区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.

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

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());
});

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.

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.