Tumblr: How to manage CSS with message tags (UPDATE: Working method without jQuery!)

Question

It can be seen that this was done earlier, I am curious how this is done. An example can be found at http://wordographic.info/

For example, if I mark a message in blue, the bg color of the message turns blue, etc.

Does anyone know how to do this?

Thanks.

Answer 1

Found a way to do this only with HTML / CSS. It's pretty simple to add the {Tag} block to any div class that wraps the mail area, but make sure it is between {block: Posts} and {block: Text}, etc. Now everything that you put in the message 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’s important to add a space after {Tag}, otherwise they will not be separated in HTML.

CSS will look like this:

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

Work! Pretty simple, no jquery required!

Thanks Blender, I wouldn’t think about it for some reason if I hadn’t read your jquery method :)

Answer 2

With jQuery, anything is possible! This will not work right away, so configure it for your theme:

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

Answer 3

This has nothing to do with JS, such things are done on the server side. Depending on the tags, some properties are set in the messages, and then they are taken into account when rendering them in HTML.

Answer 4

You want to get message tags as class names so you can create messages using CSS, and there is a variable that you can use for this purpose. In the template, just use {TagsAsClasses} . This will create friendly HTML class names.

The message tag attribute corresponding to the attribute of the HTML class. Example: "new_york_city humorous office"

See the Post to section in Tumblr docs for more details.