Chukki.de - Der Tumblr-Blog über Webdesign, Wordpress, Social Media, Cloud und Webentwicklung

Das Design der Facebok Fan-Box bzw. Like-Box ist sicherlich jedem bekannt. Es orientiert sich an dem Design von Facebook mit weiß und einigen blautönen. Dies hat einen hohen wiedererkennungswert zu folge, oftmals ist dies jedoch sehr unpassend bei vielen Designs. Auf dunklen Seiten ist dies z.B. total unpassend und zerschießt das komplette Design.

Das Design lässt sich eigentlich sehr leicht durch einen zusätzlichen Aufruf von ein paar CSS Klassen regeln, ist von Facebook selber jedoch schlecht bis garnicht dokumentiert.

Wichtig: Um das Design anzupassen muss das alte fb:fan anstatt des neuen fb:like-box benutzt werden, denn dort hat Facebook die Designanpassungen bisher nicht unterstützt. Die etwas ältere Facebook Lib wird geladen und mit der "profile_id" wird eure Fan-Site mitgegeben - diesem Code muss lediglich der Link zur CSS Datei hinzugefügt werden (css="fb.css?1"):

Tooltips haben die schöne Funktion Zusatzinformationen zu Links, Bildern und ähnlichem zu zeigen, wenn man mit der Maus darüber fährt. Diese Tooltips haben jedoch leider die negative Eigenschaft das sie nicht mit CSS anpassbar sind - das Betriebssystem bzw. der Browser gibt vor, wie sie auszusehen haben.

Durch diese Einschränkung führen die Tooltips ein sehr unterbewertetes Leben im Webdesign - lediglich zu Suchmaschinenoptimierungszwecken oder von Online-Shops, welche oft ein Tooltip hinter einem der etlichen unverständlichen Icons verstecken wird diese Funktion genutzt - der Mehrwert fehlt oft auch einfach weil sie nicht durchgehend genutzt und mit sinnvollen Infos gefüllt werden. Es können weder Bilder eingebunden werden, noch eine Formatierung der Schrift vorgenommen werden, was sie zu einem sehr unschönen Werkzeug verkommen lassen.

Nach ein paar schönen Tagen im Bayrischen Oberstdorf, stell ich euch nun das nächste Tutorial bereit. Diesmal handelt es sich um eine simple Tab-Navigation mittels Mootools.
Tabs sind im Trend... moderne Browser nutzen sie, Photoshop CS4 nutzt sie und auch viele Websites sind mit dieser platzsparenden Art der Contentverwaltung ausgestattet.

Sicherlich mag es mehrere Wege geben wie man diese Funktion umsetzten kann. Ich werde euch den Weg aufzeigen, welchen ich bisher immer genutzt habe. Für weitere, eventuell auch leichtere und bessere Umsetzungen würde ich mich über ein Kommentar freuen.