From the workbench
It took me some work to put the small Twitter logo next to each of my Tweets here in my tumblelog. Actually, the work was done almost exclusively by Jörg, based on an idea found here, and the only reason I had to mess around with it was because Jörg is using a different theme with different tumblr elements. Took me quite a while to find out…
Anyway: Marc from tumblr’s tech support suggested that I share the code snippets necessary to put a Twitter logo next to your Tweets (of course, the same thing applies to other imports).
tumblr uses the TagsAsClasses variable to read the tags associated with a tumblr entry (you didn’t know there were tags? Neither did I, and they are very well hidden unter “Advanced options” on the entry form). Twitter imports now are automatically tagged “twitter_com” by tumblr, and you can use the TagsAsClasses variable to perform a little CSS magic.
Here’s what to do:
First, download a Twitter icon and save it somewhere on the Web (for instance, in the image directory of your web site).
Next, enable “custom HTML” in the Customize section of the dashboard. Add the following snippet to the CSS section of your theme:
.twitter_com {
background-image: url(twitter.png);
padding-left:22px;
background-position: 0px 1px;
background-repeat:no-repeat;
} (you need to enter the complete URL of the image file, not just the file name, as I did in this example) and finally, modify the appropriate tumblr block (further down in the theme’s HTML file) accordingly:
[block:Text]
<div class="[TagsAsClasses]">
[block:Title]
<h3><a href="[Permalink]">[Title]</a></h3>
[/block:Title]
[Body]
</div>
[/block:Text] Important: You need to replace all square brackets [ ] in this snippet with curly ones { }; I couldn’t use them here because tumblr always tried to parse them… Please note also that some themes apparently use block:Regular instead of block:Text.
And now: have fun!
(Eine deutsche Ausgabe dieser Anleitung findet sich in meinem Werkstattblog.)
blog comments powered by Disqus
