Spielereien mit tumblr: Was einige der Default-Layouts bei
soup.io von den von
tumblr.com bereitgestellten unterscheidet, sind bunte Icons, die die Herkunft bzw. Art des Eintrags kennzeichnen.
Wie ich nun
hier erfahren durfte, kann tumblr das auch. Einträge verschiedener Typen (Zitat, Foto etc.) lassen sich ohnehin verschieden stylen (und so auch mit Icons versehen); importierte Einträge unterschiedlicher Quellen kriegen aber bei tumblr ebenfalls - falls gewünscht - ihre Icons.
Umgesetzt habe ich das zunächst mit dem Twitter-Import. Das tumblr-Element {TagsAsClasses} liest den als Tag ("twitter_com") hinterlegten Twitter-Import aus und packt ihn in die class-Angabe des div-Containers. Und mit einer entsprechenden CSS-Klasse erhalten alle importierten Tweets das türkisfarbene Icon.
Und hier sind die entsprechenden Codeschnipsel. Zunächst sollte man ein Twitter-Icon (im folgenden ist das "twitter.png") herunterladen und auf eigenem Webspace (z.B. auf dem Server, der eine eigene Web Site beherbergt) ablegen. In den CSS-Teil der Theme-Datei kommt dann etwa folgendes:
.twitter_com {
background-image: url(twitter.png);
padding-left:22px;
background-position: 0px 1px;
background-repeat:no-repeat;
}Natürlich muss in die Klammer nicht nur der Dateiname, sondern der gesamte URL kommen, da die Grafik ja nicht auf dem tumblr-Server abgelegt wurde.
Und in den HTML-Teil kommt folgendes:
{block:Text}
<div class="{TagsAsClasses}">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</div>
{/block:Text}Hierbei ist nur noch zu beachten, dass manche tumblr-Themes statt block:Text lieber block:Regular benutzen.
Zuviel Technobabble? Kuckstu
hier.