Für meinen shop habe ich eine neue Theme-Reihe erstellt und gleich 5 neue Themes eingestellt. Weil ich meinem Grundsatz mit möglichst einfachen Mitteln ohne viel zusätzliche Erweiterungen, angepasste Templates oder externe Skripte einfach zu verwendende Themes erstellen möchte, stehe ich manchmal vor einem Problem, denn die Super-Effekte sind meist doch nur mit Hilfe von jQuery oder MooTools zu erreichen.

Aber ein kleines Highlight habe ich dennoch gefunden.

Big Pictures im Webseitenhintergrund. Es braucht auf einer Webseite manchmal nicht viel, wenn es schöne und sorgfältig ausgesuchte Bilder gibt. Die Macht der Bilder ist einfach unschlagbar, aber wie jetzt Bilder ohne die zusätzliche Erweiterung Background-Stretcher einbauen?

Mit CSS3 gibt es eine neue Auszeichnung: background-size. Stellt man hier den Wert auf cover, wird ein Hintergrundbild auf die Breite des Viewports proportional gestreckt. Das Unschöne daran ist aber, dass das Bild, bei langen Webseiten, natrülich irgendwann einmal endet und die normale Hintergrundfarbe zum Vorschein kommt. Nicht ganz so fein. Umgehen kann man das Ganze jedoch, indem man das gute alte background-attachment:fixed ins Spiel bringt.

Und weil der IE8 background-size:cover nicht versteht, fügt man für das Bild einfach
background-position: center top; hinzu. In den meisten Fällen muss man ja ein großes Hintergrundbild sowieso in größeren Abmessungen hinzufügen damit die Qualität nicht leidet. Deshalb kann man große Hintergrundbilder auch über background-position meist so positionieren, dass sie mittig hinter dem wrapper liegen. Beim IE8 schaut zwar dann zwar links und rechts Hintergrundfarbe von boy raus – aber mir persönlich macht es nichts aus, wenn es imIE8 halt nur ein Behelf ist.

Beispiel anschauen

Contao Theme baskanik 4

Nicht jeder kann zur Contao-Konferenz kommen, aus welchen Gründen auch immer. Und deswegen finde ich es klasse, wenn die Inhalte auch für die Daheimgebliebenen als auch für alle Contao-Interessierte online nachzulesen sind.

Für seinen Workshop “Javascript up my Contao” hat Joe Ray Gregory die Inhalte zusammengefasst und zum Nachlesen online gestellt.

Inhalte:
- Scroll and fix navigation
- einfache Scroll-Interaktionen mit ScrollBuddy.js
- Individuelle Bildergalerie
- Content-Slider einbinden
- Tabs

Inhalte des Workshops besuchen:
http://ck2013.may17.de/home.html

Mit Version 3 wurde der Contao Layoutbuilder geändert. Das Framework setzt nun auf die so genannte “Holy Grail” Struktur, weshalb sich sowohl das Markup, als auch das Framework-CSS entscheident geändert haben.

Als Vorteil von Holygrail sind die Verbesserung hinsichtlich Suchmaschine und Lesbarkeit für Screenreader zu nennen, denn im Holygrail-Layout erscheint der Inhalt der Hauptspalte, also der Bereich, in welchem für gewöhnlich die wichtigen Inhalte stehen, zuerst. Erst dann folgen die Inhalte der Spalten left und right.

Um die Unterschiede besser zu verstehen, hier eine kurze Betrachtung des alten und des Layoutbuilders:

Alter Layoutbuilder
In der fe_page konnte man sehen, dass (wenn vorhanden) zuerst die Inhalte der linken Spalte, dann die der rechten Spalte und erst zum Schluss die Inhalte der Hauptspalte ausgegeben würden. Mit CSS wurde die linke Spalte nach links und die rechte Spalte nach rechts gefloatet. Die Hauptspalte schob sich automatisch immer zwischen beide Spalten.

Neuer Layoutbuilder mit Holygrail
Im Holygrail Layout erscheint in der fe_page zuerst die Hauptspalte  gefolgt von rechter und linker Spalte. Alle drei Spalten floaten nach links. Eine entscheidene Rolle nimmt der umgebende #container ein. Damit sich die Spalten – obwohl im Markup in der Reihenfolge #main, #left und #right – im Frontend zur Reihenfolge  #left, #main, #right zusammenpuzzeln, wird links und rechts neben #main Platz benötigt. Dieser Platz wird durch ein dem container zugeschriebenes padding geschaffen. Padding für den Container ist immer so breit wie die Spalten sind. Mit negativen margins und position relative können die Spalten anschließend links und rechts neben der Hauptspalte ihren zugedachten Platz einnehmen. Das in groben Zügen.

Der Nachteil des Holygrail-Layouts ist jedoch, dass prozentuale Spaltenbreiten eher mal nicht möglich sind, was im Hinblick auf responsive Layouts meiner Meinung nach unpassend ist und zudem die ohnehin gewachsenen Anforderungen nicht gerade erleichtert. Ein weiterer Nachteil ist das instabile Verhalten der Konstruktion, vor allem, wenn die Spaltenbreiten sehr breit werden – insbesondere bei 3-spaltigen Layouts. An diesem Punkt nämlich finde ich einen Wechsel auf ein responsive Grid, welches einem die arbeitsintensive Anpassung an mobile Endgeräte abnimmt, verständlich und bei großen Webseiten sinnvoll.

Während noch vor 3-4 Jahren Designs “out of the box” als Sahneschnitte besprochen wurden, zwingen nun die mobilen Geräte zurückzurudern, was sich derzeit – so meine ich beobachtet zu haben – auch in der Gestaltung niederschlägt. Wer hat schon noch Zeit für Schatten und runde Ecken wenn die Kosten nicht exorbitant explodieren sollen? Kein Wunder also, dass flat-Designs auf dem Vormarsch sind. Aber nachdem wir uns in den vergangenen 2 Jahren ja an überbordenden Mustern und Müsterchen satt gesehen haben, tut etwas Ernüchterung ja auch wieder mal ganz gut.

Aber ich schweife ab – zurück zum Holygrail.

Für meinen Contao-Themes-shop arbeite ich derzeit sowohl an neuen, aber auch an alten Layouts und stelle mir dabei die ehrgeizige Aufgabe allen Layouts eine Seitenvorlage für 3 Spalten hinzuzufügen. An sich ist das kein Problem, wenn man die Seitenvorlage adaptive macht – also feste Breiten für #wrapper vorgibt, die je nach Breakpoint geändert werden.

Solche Design unterscheiden sich an der Oberfläche nicht arg viel von den Layouts vor “Web3″, denn zumeist bleibt es bei einer Ausgangswrapperbreite von 960px. Nicht berücksichtigt wird dabei jedoch, dass es inzwischen nicht nur eine Menge kleiner Endgeräte gibt, sondern auch Flatscreens mit 1600 Pixel und mehr. Und auf großen Monitoren – also denen, vor denen ein Webseitenbesucher sich genüsslich räkelt und den vollen Designgenuss erwartet – stört es mich dann schon, dass sich ein 960 Pixel breites Design schon fast unscheinbar in der Breite verliert – mehr Raum drumherum hat, als innendrin.

Abgesehen davon kann man meiner Meinung nach nicht mehr kalkulieren für welche Geräte man Breakpoints einrichtet. Im Grunde ist es völlig egal wer sich nun mit was das Internet anschaut. Ein Design muss flüssig zusammenschiebbar und an jedem Punkt mindestens bedien- und benutzbar sein, denn wer weiß welches Gerät als nächstes auf den Markt kommt und welche Abmessungen es haben wird?

Ausgangspunkt ist also ein dreispaltiges Layout mit max-width von mindestens 1440 Pixel und ca. 420 Pixel breiten Seitenspalten. Um mir die Bezüge klar zu machen, habe ich mir eine Arbeitsinstallation gebaut, die hier angeschaut werden kann:

Zweispaltiges Layout mit Spalte links

Beispiel: http://www.themes.jukeshop.de/holygrail/index.php/

Im Backend sind 3 Seitenlayouts angelegt:
Wichtig: jedes Layout hat seine eigene Bodyklasse. cols2.links steht für das zweispaltige Layout mit Spalte links, cols2.rechts für den Zweispalter mit Spalte rechts und cols3 für das dreispaltige Layout.

In den Einstellungen habe ich für die Breite der Spalte 420 Pixel angegeben. Diese Breite ist dann auch immer die Breite des paddings-left von #container und der Abstand um den die relativ positionierte Spalte links verschoben werden muss, damit sie sich links neben der Hauptspalte anlegt. Die im Layoutbuilder gemachten Eingaben werden von Contao als Stylesheet eingefügt.

Das CSS-Framework besorgt den Rest indem linke und Hauptspalte nach links gefloatet werden und Spalte links als auch rechts einen negativen margin von -100% erhalten.

Mit 420 Pixel ist die Spalte links schön breit, aber zu breit für Viewportgrößen von 1024px und kleiner. Also habe ich als nächstes einen Breakpoint eingefügt, der die Spaltenbreite im Bereich von 1024 bis 769 Pixel auf 320 Pixel herabsetzt. Das entsprechende padding beim #container müssen dabei ebenfalls geändert werden.

Im Ergebnis läasst sich das Layout bis zum major-breakpoint gut zusammenschieben, ab 768px greift dann das Contao-mediaquery und löst die floats der Spalten so auf, dass die Inhalte untereinander stehen.

Zweispaltiges Layout mit Spalte rechts

http://www.themes.jukeshop.de/holygrail/index.php/spalte-rechts.html

Das Layout mit Spalte rechts verhält sich analog zum Layout mit Spalte links. Es gibt nur einen kleinen Unterschied, der aber wird vom Contao-Framework geliefert. Die relative positionierte Spalte #right muss nicht verschoben werden.

Dreispaltiges Layout

http://www.themes.jukeshop.de/holygrail/index.php/id-3-spalten.html

Wie eingangs schon angedeutet – der Dreispalter ist eine kleine Herausforderung. Die rechte und linke Spalte beginnt wieder mit 420px Breite, diese werden aber schnell zu breit, so dass der erste Breakpoint schon bei 1450px einsetzt. Die mediaqueries sind hier auch mit einer unteren Mindestbreite von 1024px angegeben.

Weil es aber ab 1024px noch etwas zu früh wäre die Spalten zu “entfloaten” wünscht man sich, dass der Dreispalter zunächst in einen Zweispalter übergeht. Weil wir aber wissen, dass in der fe_page die Spalte #main zuerst kommt und sich – in der Regel -  in der linken Spalte wichtigere Inhalte wie z.B. eine Subnavigation befindet, war es mein Ziel die linke Splate nach rechts zu befördern.

Zwischen 920 und 1024 px habe ich daher erstmal die ganze Spalten sozusagen auf Null gesetzt und die Spalten entfloatet. In einem zweiten Schritt werden sie dann mit prozentualen Breiten und float:right; neu eingerichtet bzw. die Spalte rechts ohne float auf den Bereich unter main und left angeordnet.

Ich habe auch eine Möglichkeit ausprobiert bei der die Spalte links einfach da bleibt wo sie ist und sich nur die rechte Spalte nach unten verschiebt. Dabei muss man das Holygrail nicht  resetten. Weil man dann jedoch padding- left für #container beibehalten muss, kann die Spalte rechts, die sich dann unter main und left befindet nie die volle Breite einnehmen.

Unter 920px wird dann beim Dreispalter eine Frühgeburt eingeleitet indem die Auszeichnungen, die bei den anderen Layout erst ab 769px greifen, schon jetzt gesetzt werden. Damit lösen sich die Spalten schon hier zu untereinander liegenden Blöcken auf.

Eine Sache noch.
Für den IE8 habe ich respond.js eingebaut, damit der IE8 mediaqueries versteht.

Ich hoffe, dass ich verständlich und nachvollziehbar beschrieben habe, was ich genau ich gemacht habe. Es wäre schön, wenn ihr bis hierher durchgehalten habt und mir in den Kommentaren eure Meinung dazu schreibt. Vielleicht gibt es auch Kritik oder Vorschläge, wie man das Problem auch noch anders angehen könnte.

Wer mag, kann die Installation als Template für Contao 3.1. bekommen.
Schreib mir einfach eine E-Mail an juke@jukemedia.de.

Ach ja, wenn dir mein Beitrag gefallen hat, dann bedanke dich doch mit einem Like auf Facebook. Darüber freue ich mich immer.

In meiner Zeit vor Contao, auch als ich noch sehr viel mit WordPress gearbeitet habe, war das Schreiben eines Stylesheets per Hand etwas völlig Normales zumal man dazu allenfalls einen guten Texteditor brauchte. In WordPress konnte man zwar schon immer aus dem CMS heraus auf die stylesheets zugreifen und z.B. einzelne Auszeichnungen schnell ändern, der Editor hatte aber nicht die Qualität, wie ich sie später in Contao vorgefunden habe.

Ich muss zugeben, dass das Arbeiten mit dem internen Style-Editor von Contao anfangs gewöhnungsbedürftig war, ich mich später aber schnell an den Komfort gewöhnt hatte, so sehr, dass ich schon fast nicht mehr gemerkt habe, wieviel einem durch Bequemlichkeit auch verloren gehen kann.

Aus meinem Schlafwandel herausgerissen wurde ich dann jedoch mit den neuen Anforderungen hinsichtlich responsive Webdesign. Das Eingeben der mediaqueries mit Editor, das andauernde Hin- und Herschalten – es nervte. So begann ich, anfänglich und eigentlich nur zu Entwicklungszwecken, für die Anpassung einer Webseite bzgl. mobile devices ein externes Stylesheet zu schreiben und es via zusätzliche headtags einzubinden. Was für eine Erleichterung alle meine breakpoints hintereinanderweg im Blick zu haben.

Dann kam eins zum anderen und nun habe ich dem internen Stylesheet-Editor ade gesagt und benutze derzeit den kostenpflichtigen Editor RapidCSS um meine stylesheets zu schreiben. RapidCSS hat nämlich den unschlagbar grandiosen Vorteil, dass man eine FTP-Verbindung einrichten kann und somit die Stylesheets direkt auf dem Webserver öffnen und bearbeiten. Das lästige Hochladen entfällt damit komplett, was die Bearbeitungszeit nicht nur verkürzt, sondern auch ein wesentlich ruhigeres Arbeiten ermöglicht.

Weil ich aber nun nicht sagen möchte, dass der Stylesheet-Editor von Contao nicht auch seine Berechtigung hätte, habe ich mal die Vor- und Nachteile zusammengestellt:

• Der Stylesheet-Editor ist eine feine Sache für Leute, die sich mit CSS nicht so gut auskennen. Ein Laie mit profundem Halbwissen errät intuitiv welche Auszeichnungen man wo verändern kann. Im Zweifelsfall probiert er oder sie einfach mal aus ohne dabei Gefahr zu laufen gleich die ganze Webseite in Schutt und Asche zu legen.
• Contao nimmt einem die komplizierten Dinge wie z.B. die Einbindung spezieller behavior Dateien für die Crossbrowserkompabilität (sprich Internet Expolorer) ab und sorgt für die korrekte Syntax wenn Vendor-Prefixes eingesetzt werden müssen.
• Über die korrekte Schreibweise, insbesondere der neueren CSS3 Auszeichungen (z.B. beim Anlegen von Schatten oder runden Ecken) muss man sich keine Gedanken machen, auch das nimmt Contao einem ab.
• Wenn der Designer seine styles sauber angelegt und jede Auszeichung mit der korrekten Kategorie versehen hat, ist es recht übersichtlich, wenn sich man zur Bearbeitung nur die styles anzeigen lassen kann, auf die der Blick gerichtet ist.

Alles super, alles bequem, aber auch alles wie im richtigen Leben auch. Wer sich nicht genug bewegt, verlernt das Laufen. Das, was gut gemeint ist, ist nicht auch immer wirklich gut, jedenfalls nicht für Webdesigner, wie ich an mir selber feststellen musste. Wenn einem zu viel abgenommen wird, setzt man sich nicht mehr mit der List und den Tücken so mancher Auszeichnungen auseinander, man denkt nicht mehr über den sinnvollen Aufbau eines stylesheets nach. Zu gut Deutsch: man wird faul und regrediert.

Vorteile von stylesheets mit einem externen Editor

• Google Webfonts lassen sich schneller über @import einbinden. Im Zweifelsfall legt man sich einfach ein zweites Stylesheet mit allen Schriften, die man gerne verwendet, an und kann so superschnell die Schrift einer Webseite ändern. Wenn die Seite online geht, muss man nur noch die Schriften, die man nicht braucht, löschen.
• RapidCSS ermöglicht, wie schon gesagt, das Öffnen und Bearbeiten einer Datei, die auf dem Webserver liegt. Das heißt: hat man etwas geändert, ist die Änderung an der Webseite sofort sichtbar. Ich muss nur noch den Browser refreshen.
• Alle Stylesheet Dateien meiner Installationen liegen in der RapidCSS Seitenbaumansicht nebeneinander. Wenn mir also einfällt, dass ich z.B. einen Grundstyle für eine Pagination brauche, kann ich mir die Auszeichnungen ganz bequem von einer in eine andere Installation hereinkopieren.
• Bei einer sichtbaren Style-Datei habe ich alle meine Auszeichungen im Blick und kann die Suchen-Funktion benutzen um einen Selektor zu finden. Ich muss nicht mehr grübeln in welches Modul bzw. unter welcher Kategorie ich die Auszeichnung gepackt habe(n könnte).
• Wenn ich Firebug benutze stimmt die Zeilenanzahl immer mit den Zeilen im Editor überein, so dass ich schnell die Stelle finde, wo etwas geändert werden muss, wenn sich z.B. Auszeichnungen überschreiben.

Und jetzt du.

Was benutzt du lieber? Internen oder externen Editor?
Welche Vor- und Nachteile siehst du, welche Erfahrungen hast du gemacht?

Weil Contao multidomainfähig ist, kann man mit diesem System mehrsprachige Webseiten aufsetzen. Mehrsprachig heißt aber nicht länderspezifisch, denn geht es um die Sprache, muss man sich vergegenwärtigen, dass sich z.B. der deutsche Sprachraum, auch über die Nachbarländer Schweiz und Österreich erstreckt, (oder umgekehrt ;-).

Diese Länder könnten also den, in Contao angelegten, deutschen Sprachbaum benutzen, wenn denn auch das Informations- oder sonstige Angebot für alle drei von gleich großem Interesse ist.

Letzeres ist aber nicht immer der Fall. So gibt es durchaus Unternehmen, die mit bestimmten Produkten nur in Deutschland verkaufen, mit anderen nur in der Schweiz und mit wieder anderen in Österreich. Weil aber in allen drei Ländern Deutsch gesprochen wird, kann man mit den bei der Mehrsprachigkeit eingesetzen Inserttags “if-language” nichts anfangen.

Doch es gibt eine Lösung, wie im Blog von Carolina Köhn von kik-Media zu lesen. “Man benötigt also am Besten Insert-Tags, die ihre Wirkung auf jeweils einem einzigen Seitenbaum entfalten und den Rest entweder nicht beachten oder (besser) dort etwas anderes bewirken. Geht nicht? Doch, das geht. Mit der kleinen Extension ‘inherit_insert_tags’ , die der Kollege Leo Unglaub dankenswerterweise zur Verfügung gestellt hat. Die erlaubt es nämlich, für Seitenbäume eigene Insert-Tags zu definieren.”

Ganzen Beitrag von Carolina Koehn – kik media lesen

–
Foto: © Tatjana Balzer – Fotolia.com

Listen, Überschriften, Links – es gibt viele Elemente in einer Webseite, die man mit kleinen, vorangestellten Icons besonders hervorheben kann. Manchmal sieht es einfach nur hübsch aus und unterstreicht die assoziative Wirkung, manchmal schreit es regelrecht nach einem Icon um Funktionen stärker in den Fokus des Betrachters zu rücken.

Um z.B. kleine Pfeile einem .more oder .back Link voranstellen habe ich dazu bisher entweder Bilder oder die CSS-Pseudoklassen :before und :after mit html-Entities benutzt. Bei letzterem mit mehr oder weniger schlechtem Gewissen, denn der IE kann erst ab Version 8 mit diesen Pseudoklassen umgehen … was mich aber weiterhin nicht davon abhält.

In meinem Grafikprogramm habe ich einen Haufen frei erhältliche Symbolschriftarten installiert und liebe die kleinen Pictogramme. Wenn man mit einem Vektorprogramm wie Illustrator oder CorelDraw arbeitet, ist es einigermaßen praktikabel sich die Icons herauszufischen, die man für eine Webseite braucht. Weil jedoch aufgrund der bunten Landschaft der mobilen Endgeräte das Thema responsive Webdesign mächtig Fahrt aufgenommen hat, fällt der Nachteil, dass die Ränder von statischen Grafiken unschön verschwimmen, immer stärker unangenehm auf.

Iconfonts haben den Vorteil, dass es keine Grafiken, sondern Schriftzeichen sind, die wie eine ganz normale Schrift skaliert werden und ihre scharfe Umrandung beibehalten.

Wie man Iconfonts mit Hilfe des Webfontloaders in Contao verwenden kann

Demo hier anschauen

Schritt 1 – Webfontlaoder installieren

Der Webfontloader kann über den Erweiterungkatalog installiert werden.
http://contao.org/de/extension-list/view/wfl.html
Lizenz GNU Lesser Public License (LGPL)
Urheberrecht 2011 de la Haye Kommunikationsdesign
Autor Christian de la Haye (christian) www.delahaye.de

Schritt 2 – @font-face-kit holen

Iconfonts unterliegen den gleichen Lizenzbedingungen wie normale Fonts. Also: bitte auf die Bestimmungen achten. Du kannst freie Fonts von Fontsquirrel benutzen.
http://www.fontsquirrel.com
Klicke in der Menüleiste oben auf “@font-face-kits“.

In der Rubrik Dingbats findest du einige, frei verwendbare Iconfonts.
In meinem Demobeispiel habe ich das Pflanzenblatt aus der Schrift Entypo verwendet.

Mit der rechten Maustaste auf “Get Kit” klicken und “Link in neuem Tab öffnen” wählen. Aus der Adresszeile des Browsers die URL des Kits in die Zwischenablage der Maus kopieren.

Schritt 3 – Das kit im Webfontloader eintragen.

Im Backend von Contao links auf “Webfontloader” klicken und als erstes eine neue Schriftensammlung anlegen und diese beispielsweise mit “Fontsquirrel” benennen.

Dann weiter über das Bearbeiten-Symbol und Klick auf “neue Schriftdefintion” die Schrift Entypo anlegen. Dabei aus dem Selectmenü “Fontsquirrel” auswählen und ganz unten den Haken bei “Veröffentlichen” nicht vergessen.

Nun den Menüpunkt “Seitenlayouts” aufrufen und in dem Seitenlayout, in welchem der Icontfont benutzt werden soll, aus den zur Verfügung stehenden Optionen eine Auswahl treffen.

Schritt 4 – Anwendungsbeispiel, eine Liste mit vorangestelltem “Blatt” gestalten

Wie eingangs schon erwähnt, war mein Objekt der Begierde das Blatt aus dem Iconfont Entypo. Es ist etwas tricky herauszufinden, unter welchem Buchstaben der Tastatur sich das Blatt versteckt. Leider habe ich keine praktikablere Methode gefunden als die, in einen Artikel von Contao zu gehen und dort zunächst einmal einen Absatz über den Texteditor anzulegen. Als Text am besten einfach das ABC (groß und klein) runtertippen. Dem Absatz die CSS-Klasse “entypo” geben und via CSS die Icons anzeigen lassen. Hat man das Zeichen gefunden, Absatz wieder löschen.

Im Falle der Entypo-Iconfont ist das Blatt unter “G” zu finden.

Die CSS-Auszeichnung des Listenelementes habe ich folgendermaßen angelegt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.mainmenue a:before,.mainmenue span.active:before {
 
width:20px;
height:20px;
top:13px;
position:relative;
display:inline-block;
margin-right:5px;
padding-top:5px;
padding-right:20px;
border:1px solid #a19f9f;
font:64px/5% EntypoRegular;
color:#000;
content:" G ";
}
 
.mainmenue a:hover:before,.mainmenue span.active:before {
 
border:1px solid #f39;
font:64px/5% EntypoRegular;
color:#f39;
content:" G ";
}

Die Schwierigkeit, die sich hier zeigt war, dass die voreingestellte Schriftgröße von 14px zu klein für das Icon ist und ich sie auf 64px erheblich vergrößern musste. Da sich vorangestellte Icons aus einem Iconfont aber wie ein Schriftzeichen verhalten, wurde damit der Zeilenabstnad zu groß.

nach einigem Ausprobieren habe ich das Problem mit der Reduzierung der Zeilenhöhe auf 5% und einer Einjustierung des Zeichens mit position:relative beheben können.

Weiterführende Links zum Thema:

Skalierbare retina display ready iconfonts für responsive Webdesign
Ellen Bauer erklärt, wie man die Icons von Font Awesome einbinden und benutzen kann.

Icomoon – Nur die Icons zusammenstellen, die man auch wirklich braucht.
Sascha Lack erklärt was das Besondere an Icomoon ist.

Fontello – ein ähnlicher Dienst wie Icomoon, nur schon etwas länger da
Beitrag auf Prägnanz.de – interessant auch die Kommentare zur Benutzung von Iconfonts hinsichtlich Screenreader.

Iconfonts – Vor- und Nachteile gegenüber Sprites
Lesenswerter, zweiteilier Beitrag von Coding-People

Das Hintergrundbild einer Webseite ist ein beliebtes Stilmittel um eine Webseite zu gestalten weil große, imposante Fotos große, imposante Eindrücke hinterlassen. Mit dem Contao Backgroundstretcher und jetzt auch neu mit dem Contao easy Backgroundstretcher ist dies jede Contao-Installation ohne viel Umstände möglich.

Weitestgehend unabhängig von der Größe des Bildes wird das Foto mit der Javascript Bibliothek jQuery immer passend auf die jeweilige Monitorgröße skaliert – und wenn man möchte auch noch mehr, denn der Backgroundstretcher ist, im Unterschied zum easy Backgroundstretcher außerdem auch eine Hintergrund-Slideshow.

Demo anschauen

Background Stretcher
(Slideshow für Hintergrundbilder in einer Contao Webseite)

Die Erweiterung backgroundstretcher im Katalog

bgstretcher

Easy Background Stretcher
Einfügen eines statischen Hintergrundbildes

Die Erweiterung backgroundstretcher im Katalog

Contao 2.11.x | /easy_bg_stretcher.10000009.de.html
Contao 3 | easy_bg_stretcher.10000019.de.html

Installationshinweise Backgroundstretcher

1. Slider anlegen, Optionen wählen und Bilder hinzufügen

Nach der Installation der Erweiterung über den Erweiterungskatalog steht in der Werkzeugleiste des Backends ein neuer Menüpunkt mit der Aufschrift “Background stretcher” bereit. Über diesen Menüpunkt wird zunächst der Backgroundstretcher (“Slideshow”) angelegt. Bei den Optionen können neben der Größe auch die Einblendungsdauer, die Effektart und -dauer als auch die Abspielreihenfolge gewählt werden. Sind die Optionen gewählt wird der Hintergrundstretcher abgespeichert. Über das Bearbeiten-Symbol und “neues Element einfügen” werden nun die Bilder, die als Hintergrundbild verwendet werden sollen, hinzugefügt.

2. Modul erstellen

Als nächstes muss ein Modul vom Typ “Backgroundstretcher” erstellt werden. Anschließend das Modul entweder im Artikel als Inhaltselement einfügen oder in der Seitenvorlage bei den Modulen hinzufügen (Layoutbereich ist egal). Bei der Seitenvorlage drauf achten, dass Jquery aktiviert ist.

Erweiterte Optionen

Weitere Einstellmöglichkeiten
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

Hinweise Easy Backgroundstretcher

Easy Backgroundstretcher ist so etwas wie der kleiner Bruder von Backgroundstretcher, denn er verzichtet auf Einstellmöglichkeiten und Bildwechsel. Er eignet sich immer dann, wenn nur ein (1) Bild als sich auf die jeweilige Monitorgröße anpassendes, Hintergrundbild eingesetzt werden soll.

Installation

Nach der Installation steht der easy backgroundstretcher als Inhaltselement zur Verfügung. Einfach in den Artikel gehen, das Inhaltselement einfügen, Bild aussuchen – fertig.

Hinweis: In der Seitenvorlage muss jQuery aktiviert sein.
Wenn’s nicht tut, moo_jquery_nc aktivieren.

Das Theme gleich anschauen
Das Theme im online-shop

Ende letzten Jahres habe ich auf jukemedia.de einen webshop eröffnet in welchem ich Contao-Themes zum Kauf anbiete. Nach einer ersten Anlaufphase geht es nun mit mit noch mehr themes weiter.

Bei dem neu eingestellten Theme ist an prominenter Stelle Platz für ein aussagekräftiges Bild, welches man mit einem Hingucker-Text und Link zum Weiterlesen bestücken kann. Das Theme ist zwar fix mit 960 Pixel, aber weil man das Bild auch gut gegen einen Contentslider austauschen kann, hielt ich eine fixe Breite für sinnvoller, denn: nicht jeder Slider kann sich auf flexible Breiten einstellen.

Weiterhin arbeitet das theme mit der contao-eigenen Möglichkeit das Framework in der zentralen Seitenvorlage fe_page um ein eigenen Layoutbereich zu erweitern. Das hat mehrere Gründe. Zum einen wird im theme eine Pulldown-Hauptnavigation mitgeliefert, die 3 Ebenen darstellen kann. Damit jedoch die ausklappbaren Untermenüebenen immer über dem zentralen Bild liegen, ist das Design stabiler, wenn der z-index von #header immer größer gewählt werden kann als das im eigenen Layoutbereich #subheader liegende Bild. Darüberhinaus kann #subheader – wie auf der Starsteite zu sehen – nicht nur mit einem Bild, sondern auch mit weiteren Inhaltselementen (hier: Spalten mit Links zum Weiterlesen) bestückt werden.

Klingt erstmal kompliziert, ist es aber im Grunde nicht und außerdem gibt’s zum theme wieder eine mehrseitige Anleitung so dass auch Newbies damit zurechtkommen sollten.
Im Fußbereich sind die Inhalte wieder via Spaltenset eingefügt.

Links in Navigationsmodulen sollten idealerweise maximal 1-2 Wörter enthalten, die treffegnau beschreiben welcher Inhalt zu erwarten ist. In den meisten Fällen klappt das auch ganz gut, wenn es sich jedoch um erkärungsbedürftige Leistungen oder Produkte handelt, möchte man dem Benutzer mehr Hinweise geben. Basierend auf dem Blogartikel von Thomas Weitzel gibt es nun eine kleine aber feine Weiterentwicklung, die Tooltipps auch für Contao Navigationsmodule ermöglicht.

Eine Beispielinstallation, Download und eine Anleitung zum Nachbauen, habe ich auf meiner Contao-Spielwiese bereitgestellt.

Als Fortsetzung meiner kostenlosen themes für Contao habe ich für die im Core miteglieferte Inhaltsstruktur von music-academy ein neues Design erstellt. Es heißt schlicht und ergreifend Music-Acamdemy-003 und lässt sich wie die beiden ersten themes ebenso einfach installieren.

Runde Ecken, Farbverlauf und Schatten habe ich mit CSS3 realisiert, was jedoch etwas Pech für den InternetExplorer bedeutet, denn der unterstützt diese features bis einschließlich der Version 8 leider nicht. Mit einigen workarounds und den MS Filtern könnte man hier gewiss das eine oder andere simulieren. Ich bin jedoch der Ansicht, dass das Layout auch mit eckigen Kanten noch ganz passabel ausschaut und habe daher darauf verzichtet.

Demo, Download und Intallationshinweise jukemedia-music-academy 003