Tech'n Stuff

del.icio.us Tag-Cloud im Serendipity Joshua Template

Wie gestern schon kurz angekündigt habe ich die rechte Spalte des Blogs um meine del.iciou.us Tag-Cloud erweitert. Leider gibt es derzeit noch kein Plugin mit dem man genau das out of the box einbauen kann. Zumindest ermöglichen das del.icio.us-Plugin von Riscky sowie die erweiterte Version von Matthias Gutjahr die Einbindung persönlicher del.icio.us Bookmarks – allerdings nicht als Tag-Cloud sondern lediglich in Form einer Link-Liste die via RSS-Feed gefetched wird.

Also rein in’s Template und selber rumgehackt. Zuerstmal muss man sich über die del.icio.us tagrolls-Hilfe die nötigen Parameter für die Einbindung des Javascript-Codes generieren. Anschliessend den generierten Code in die index.tpl des Templates übernehmen. Das sieht dann, für mein Blog in der rechten Spalte, in etwa so aus:

  <td id="serendipityRightSideBar" valign="top">
    {serendipity_printSidebar side="right"}
    <div class="serendipitySideBarItem
                  container_serendipity_categories_plugin">
      <script type="text/javascript"
              src="http://del.icio.us/feeds/js/tags/yourusername
                  ?icon;size=13-24;color=999966-0066cc;
                  title=my%20del.icio.us%20tags">
      </script>
    </div>
  </td>

Jetzt noch das style.css des Templates angepasst, damit sich die Tag-Cloud auch schön smooth in das Design einfügt. Um zu verhindern das die vom obigen del.icio.us Script ausgepuckten CSS-Definitionen nicht zum Teil die Template-Definitionen überschreiben, kann man sich der für die Darstellung unter Firefox und Internet Explorer 7 die !important-Regel zunutze machen. Das sieht dann so aus:

  /* title of an individual item
      NOTE: die Klasse serendipitySideBarTitle existiert
      bereits - die delicious-banner Klasse soll exakt die
      gleichen Styles haben */
  .serendipitySideBarTitle, .delicious-banner {
      background-color: #80a5c7;
      -moz-border-radius: 9px 9px 0px 0px;
      color: #fff;
      font-family: Arial, sans-serif;
      font-size: x-small;
      text-align: center;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: .2em;
      padding: 3px;
      margin-bottom: 5px;
      margin-top: -4px;
  }

  /* die folgenden, neuen Definitionen sind für das
      Look & Feel der Tag-Cloud (inkl. Header) zuständig */
  .delicious-banner a {
      color               : #FFFFFF;
  }

  .delicious-banner a img {
      width               : 9px;
      height              : 8px;
  }

  .delicious-cloud {
      background-color    : #f0f0e5;
      -moz-border-radius  : 0px 0px 9px 9px;
      border              : 1px solid #e0e0d0;
      padding-right       : 8px !important;
      margin-right        : 0px !important;
      padding-left        : 8px !important;
      padding-bottom      : 5px !important;
  }

  .delicious-cloud li {
      padding-left        : 0px !important;
  }

Und fertig ist der Zauber. Mit ein paar kleineren CSS-Anpassungen ist das ganze auch für andere s9y-Templates verwendbar. Eine Umsetzung als Plugin müsste eigentlich auch relativ schnell möglich sein. Werde ich wohl auf meiner Todo-Liste an tausendster Stelle unter “wenn mir mal fad ist” einreihen … vielleicht fühlt sich ja irgendjemand inspiriert und übernimmt das ;-)

So long, good fight, good night!

Update (4. März 2007): Matthias Gutjahr hat die Idee netterweise aufgegriffen und unterstützt in der neuen Version 0.45 seines Social Bookmark Plugins del.icio.us Tag-Clouds. Diese Version hat diesbzgl. allerdings noch einen kleinen Bug und vermisst ein paar CSS-Definitionen um browserübergreifend (getestet mit IE 7.x und FF 2.0.x) korrekt zu funktionieren.

Besagter Bug kann mit diesem Patch behoben werden. Die nötigen CSS-Anpassungen für das Joshua-Template (wie üblich für alle anderen Templates mit geringen Anpassungen auch möglich) sehen dann wie folgt aus:

.delicious-banner {
	display		: none;
}

.delicious-cloud {
	padding-right	: 6px !important;
	margin-right	: 0px !important;
	padding-left	: 0px !important;
	padding-bottom	: 0x !important;
}

.delicious-cloud li {
	padding-left	: 0px !important;
}

© 2007 Andreas de Pretis.