Category: CSS
360° Imageslider
http://www.360slider.com/
Fancy Input
http://dropthebit.com/demos/fancy_input/fancyInput.html
How To Change Default Text Selection Colour
Was es nicht alles so gibt. Mit CSS kann man sogar die Auswahlhintergundfarbe verändern.
TYPO3 “Klick-Vergrößern” zweimal anders
Hier noch 2 Beispiel wie man die clickEnlarge Funktion von TYPO3 abwandeln kann:
klicken für Demo 1
klicken für Demo 2
Wie genau das angestellt wurde zeige ich auch noch, heute ist es aber einfach schon zu spät dafür.
TYPO3 “Klick-Vergrößern” mit Lupensymbol
von: www.elemente-websolutions.ms/blog/
Jeder TYPO3 Redakteur kennt die kleine Checkbox im Inhaltselement “Bild” oder “Text mit Bild”: “Klick-Vergrößern” für Bilder. Hinter diesem recht eigenartigen Wortkonstrukt verbirgt sich nichts anderes als die Funktionalität bei Mausklick auf ein kleines Vorschaubild eine entsprechend größere Variante des gewünschten Bildes in einem neuen Fenster anzuzeigen.
Das Problem dieser nützlichen Funktion zeigt sich allerdings an der Präsentation der selben auf der Website: Der Besucher kann auf dem ersten Blick diese gar nicht erkennen, sind die “klick-vergrößerten” Bilder von Normalen doch nicht zu unterscheiden. Eine Lupe als Symbol eignet sich gut, um dem Benutzer einen visuellen Hinweis zu bieten, aber dieses Icon jedes Mal in das gewünschte Bild zu integrieren und zu speichern ist recht praxisfern und kann für den normalen TYPO3-Redakteur nicht bewerkstelligt werden. Zudem würde die Lupe im Bild auch erscheinen, wenn der Besucher die vergrößerste Ansicht des Bildes betrachtet.
Die Lösung für dieses Problem liefern in ein paar Zeilen TYPOscript und eine Javascript-Funktion. Mit folgendem TYPOscript wird der stdWrap des Inhaltselements “IMAGE” um das Lupensymbol erweitert:
tt_content.image.20 { 1 { stdWrap.innerWrap ( |) stdWrap.innerWrap { if.isTrue.field = image_zoom ifEmpty.field = image_link } } }
Hiermit wird hinter dem eigentlichen Link für die “Klick-Vergrößern”-Funktionalität ein weiterer eingefügt, der mit der notwendigen Javascript-Funktion versehen ist und eine beliebige Grafik enthält – eben die besagte Lupe als Hinweis für den Besucher. Die Javascript-Funktion “openPreviousLink” ist ein Einzeiler und ruft das onclick-Ereignis des vorherrigen A-Tags auf:
function openPreviousLink(elem) { elem.parentNode.getElementsByTagName('a')[0].onclick(); }
Fertig ist unsere Lupe, die unter http://www.elemente-websolutions.ms als Plus-Symbol am unteren, rechten Bildrand integriert wurde. Mit ein wenig TYPO- und Javascript-Kenntissen kann die “Lupe” abgewandelt und auf Erweiterungen wie “tt_news” übertragen werden. Somit erhält der Besucher einer Website nun endlich ein hilfsreiches “Feature”, die Userability steigt.
Comment: Der Code hat mir bei einem aktuellen TYPO3 Template sehr geholfen. Danke
Fluid 960 Grid System
Schon Anfang des Jahres hat Dave Shea auf das Fluid 960 Grid System von Steven Bau verwiesen welches auf dem 960 Grid System von Nathan Smith basiert. Ich sehe es selber gerade zum ersten Mal und bin begeistert. Das Ding schreit in meinen Augen förmlich danach in ein TYPO3 Template verwandelt zu werden.
TYPO3 SlickMap CSS
Heute bin auf die SlickMap CSS Sitemap gestossen und habe sie eben als TYPO3 Extension angelegt (ein Demo ist hier zu finden). Die Extension überschreibt einfach nur das TypoScript Template der Standard Sitemap und bringt die notwendigen CSS Styles und Grafiken mit sich die von http://astuteo.com/ stammen.
Die Sitemap funktioniert bei mit einem üblichen Seitenbaum wie diesem:
Und als Content Element wird wie schon gesagt die Standard TYPO3 Sitemap verwendet (include des Static Template nicht vergessen!):
Die Extension und den Demo-Seitenbaum kann man hier downloaden.