blog.exotec

TYPO3 . XHTML/CSS . JavaScript/AJAX . iPhone/iOS

Archive for the ‘CSS’ Category

TYPO3 BootStrap Template

Samstag, November 9th, 2013

http://t3bootstrap.exotec.de/

360° Imageslider

Dienstag, Mai 21st, 2013

http://www.360slider.com/

Fancy Input

Dienstag, Mai 21st, 2013

http://dropthebit.com/demos/fancy_input/fancyInput.html

How To Change Default Text Selection Colour

Donnerstag, November 10th, 2011

Was es nicht alles so gibt. Mit CSS kann man sogar die Auswahlhintergundfarbe verändern.

TYPO3 “Klick-Vergrößern” zweimal anders

Freitag, Oktober 9th, 2009

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

Donnerstag, Oktober 8th, 2009

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 (
          |
          Klicken um Bild zu vergrößern
    )
    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

Samstag, Oktober 3rd, 2009

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

Sonntag, September 27th, 2009

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.

TYPO3 Slickmap Screenshot

Die Sitemap funktioniert bei mit einem üblichen Seitenbaum wie diesem:

Typischer Seitenbaum

Und als Content Element wird wie schon gesagt die Standard TYPO3 Sitemap verwendet (include des Static Template nicht vergessen!):

Standart TYPO3 Sitemap

Die Extension und den Demo-Seitenbaum kann man hier downloaden.


87,777 Spam-Kommentare
blockiert von
Akismet