think.Contao! – Beispiele aus dem Buch.
Beispiele aus dem Buch live ansehen und analysieren.
Leseprobe – Das CSS-Framework in Contao
Aufbau einer Website mit Contao
Lernen Sie den Aufbau einer Website in Contao Schritt für Schritt kennen. Erfahren Sie, wie Sie die Seitenstruktur, die Module und das Seitenlayout anlegen bis hin zur Verwendung von Schriftersetzungs-Techniken.
Beispielseite
Rastersysteme (Grids) in Contao
Analysieren Sie den Aufbau einer Webseite, die auf einem Rastersystem aufgebaut ist und lernen, wie Sie dies auch für Ihre Websites verwenden können.
Beispielseite
Ergänzende Tutorials
Bilder mit abgerundeten Ecken in Contao verwenden
Für gestalterische Akzente lassen sich auch Bilder mit abgerundeten Ecken oder auch kreisförmige, optisch runde Bilder verwenden - vorausgesetzt, das die Bilder als Hintergrundbilder innerhalb eines Elements über die CSS-Eigenschaft border-radius eingebunden werden.
Optische Unschärfe mit CSS3 in Contao einsetzen
Ab und an möchte man innerhalb eines Designs mit den Zuständen von Schärfe und Unschärfe arbeiten. Elemente sollen zuerst reduziert angezeigt werden und dann bei einer Interaktion in den Vordergrund treten.
Für eine Textunschärfe steht die CSS-Eigenschaft text-shadow zur Verfügung. Werden die Werte dafür und für die Textfarbe sinnvoll gewählt, lässt sich damit ein Unschärfeeffekt erreichen.
Für eine Bildunschärfe wird das Bild entsprechend vorab in einem Bildbearbeitungsprogramm „präpariert”; anschließend kann dann mit CSS-Sprites das Bild „ausgetauscht” werden.
Bildergalerien ohne Tabellen in Contao nutzen
Das Standard-Template für das Inhaltselement Galerie wird in Contao über eine Tabelle gelöst. Oft ist es aber sinnvoll, die Vorschaubilder der Bildergalerie als ungeordnete Liste auszugeben und die weitere Darstellung über CSS abzubilden. Zum Beispiel bei fluiden Layouts und Prozentangaben der Bildbreiten.
Schriften von typekit in Contao verwenden
Es gibt immer mehr Anbieter von Schriftdiensten, mit denen man relativ einfach systemübergreifende Schriften einsetzen kann. Ein weiteres Beispiel wird in diesem Tutorial gezeigt: Der Service von typekit.
Benötigt man bei Schriftersetzungstechnologien wie Cufón eine gültige Lizenz zur Verwendung und Einbettung einer Schrift oder Schriftenfamile und muss diese Schrift zunächst umwandeln, lassen sich die Schrift via typekit einfacher in die eigene Website integrieren.
Farbverläufe mit CSS3 in Contao verwenden
Für Farbverläufe benutzt man zur Zeit (noch) kleine Grafiken, die mal wiederholend dem jeweiligen Element zuweist. Mit CSS3 lassen sich diese Farbverläufe per CSS erstellen und anwenden. Reduziert eingesetzt unterstreicht es etwas die visuelle Gesamterscheinung und erreicht subtile Effekte…
Google Webfonts in Contao verwenden
Es gibt verschiedene Methoden, Schriften, die nicht systemübergreifend auf den Rechner der Besucher einer Website installiert sind, in die eigene Website einzubauen. Neben den Möglichkeiten, Schriftersetzungs-Methoden wie Cufón (siehe dazu auch im Buch ab Seite 168 ff; Kapitel 8.14.3) zu verwenden, bietet unter anderem Google mit seinem Font-Directory die Möglichkeit, einige Schriften in die eigene Website zu integrieren.
Tooltip-Funktion in Contao verwenden
Oft möchte man dem Besucher einer Website die Möglichkeit geben, die
Schriftgröße ändern zu können. Früher wurde dies oft auf
JavaScript-Basis erreicht. Mit aktuellen und modernen Browsern wie
Firefox, Opera, Safari, Chrome und auch dem Internet Explorer ab Version
8 lässt sich diese Funktion mit „Bordmitteln” erreichen. Nur wissen
viele Benutzer oft nicht um die - quasi versteckten - Methode.
> Die Tooltip-Funktion in Contao als Hinweis für Vergrößerung von Seiteninhalten verwenden
Beispiel Formulare in Contao mit CSS3
Wenden Sie CSS3 bei Formularen in Contao an.
Beispiele Bildergalerien mit CSS3
Wenden Sie CSS3 bei Bildergalerien in Contao an.
Den WYSIWYG-Editor für Redakteure konfigurieren
Mit wenigen Änderungen lässt sich der WYSIWYG-Editor TinyMCE an einzelne Benutzergruppen anpassen.
Wie das geht lesen Sie hier:
