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

Answer 2

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.

Answer 3

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

Answer 4

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.