”Freestyle School” Theme Dokumentation

Theme version 1.1

Hüpfende Navigationsleiste in Chrome

Seit einem der letzten Updates des Chrome-Browsers kann es zu einem ungewünschten Sprung des Hauptmenüs kommen, wenn man über einen Eintrag mit Untermenü fährt. Das lässt sich jedoch leicht beheben:

Navigieren Sie zu Files->school->css->dropdown.css

Ändern Sie #nav folgendermaßen ab:

#nav {
        width: 100%;
        position: absolute;
        top:0;
        margin: 0;
        }

Das sollte das Problem beheben.

Installation

Möglichkeit A – Installation als Theme

  1. Den school_#.zip-Ordner lokal entpacken.
  2. Navigieren Sie im Contao-Backend zu Themes > Theme-import, wählen Sie school_#.cto als Quell-Datei und folgen Sie den Anweisungen. Beachten Sie dabei, wirklich alle Schritte zu befolgen. Sie sollten das Theme dann in der Liste der verfügbaren Themes sehen. Nun können Sie loslegen.

Möglichkeit B – Als Webseiten-Template installieren (inkl. Demo-Inhalten)

Dies ist die empfohlene Methode für neue Projekte, und um sich mit dem Theme vertraut zu machen.

Wichtig: die folgenden Schritte müssen in der Reihenfolge eingehalten werden:

  1. Installieren Sie eine neue Instanz von Contao 4.x
  2. Den school_#.zip-Ordner lokal entpacken.
  3. Navigieren Sie im Contao-Backend zu Themes > Theme-import, wählen Sie school_#.cto als Quell-Datei und folgen Sie den Anweisungen. Beachten Sie dabei, wirklich alle Schritte zu befolgen und die Theme-Installation komplett abschliessen.
    (Hinweis: Statt das Theme über das Backend zu installieren, können Sie auch einfach per FTP den mitgelieferten Ordner „Upload” in die Contao-Installation kopieren. Das muss jedoch ebenfalls vor dem nächsten Schritt geschehen)
  4. Laden Sie die Datei school_#.sql in den Templates-Ordner der Contao-Installation.
  5. Navigieren Sie zu www.ihredomain.com/contao/install und loggen Sie sich ein.
  6. Unter „Ein Template importieren” wählen Sie school_#.sql als Quelldatei aus.
  7. Nach Klick auf „Template importieren” werden die Tabellen samt Inhalten kopiert.
    Achtung! Dabei gehen alle existierenden Inhalte verloren.
  8. Loggen Sie sich nun ins Backend ein als Standard-Contao Administrator:
    Benutzer: k.jones
    Password: kevinjones
  9. Achten Sie darauf, das Login des Administrators sofort zu ändern, falls Sie an einer öffentlich zugänglichen Webseite arbeiten!
  10. Navigieren Sie zu „Dateiverwaltung” > school und bearbeiten Sie diesen (Stift-Symbol). Stellen Sie sicher, dass bei „Öffentlich” ein Haken gesetzt ist.

Standard-Variablen ändern

Contao besitzt ein System von „Global-Variablen”. Diese werden in den internen Style-Sheet-Einstellungen definiert und bei der Erzeugung der CSS-Dateien durch die entsprechenden Werte ersetzt, vergleichbar mit LESS oder SCSS. Das Freestyle School Theme verwendet Global-Variablen, um Anpassungen von Farben, Schriften und -größen etc. rasch und unkompliziert vornehmen zu können.

Falls Sie die Farben des Themes anpassen möchten, öffnen Sie die Theme-Verwaltung und klicken Sie auf das CSS-Symbol. Durch Klick auf das Werkzeug-Symbol der Einträge von Basic_settings, Settings_DesktopSettings_Tablet und Settings_small ändern Sie die entsprechenden Werte. Sie können die Liste der Globalen Variablen nach Belieben erweitern..

Falls Sie Änderungen an den Breitenangaben für Desktop, Table und Small-Displays (Breakpoints) vornehmen, müssen Sie die Werte entsprechend auch in den externen CSS-Dateien Pockegrid.css, Typo.css und Layout.css vornehmen.

Globale Variablen

In den Einstellungen der jeweiligen internen Style-Sheets finden Sie eine Reihe vordefinierter Werte, die in den CSS-Daklarationen Anwendung finden. Die Werte werden jeweils nur für den Style-Sheet verwendet, in welchem Sie definiert werden! Falls Sie Werte deklarieren möchten, die für alle Style-Sheets gelten, müssen diese eine Ebene höher, nämlich in den Einstellungen des ganzen Themes definiert werden.

Seitenlayouts: CSS-Einstellungen

Die mitgelieferten internen und externen CSS können nach Wunsch angepasst werden. Damit das Theme korrekt funktioniert, müssen immer zuerst die externen Style Sheets, und dann die internen geladen werden. Die Reihenfolge der Style Sheets sollte nicht verändert werden!

Eine kurze Erläuterung der unterschiedlichen CSS:

  • Basic_settings: Einstellungen, die alle Bildschirmgrößen betreffen.
  • Settings_small: Einstellungen, die kleine Bildschirmgrößen betreffen (z.B. Smartphones).
  • Settings_Tablet: Einstellungen, die mittelgroße Bildschirmgrößen betreffen (z.B. Tablets).
  • Settings_Desktop: Einstellungen, die große Bildschirmgrößen betreffen.

 

  • grid.css: enthält eine Anzahl vordefinierter Spalten-Breiten. Sie können diese ändern oder ergänzen, sowie weitere Breakpoints hinzufügen. Sie könenn ebenfalls ihre ganz eigenen Klassen entwerfen, und deren Breiten jeweils mit Prozent-Angaben definieren.
  • layout.css: enthält die wichtigsten Klassen, die für die Darstellung des Themes benötigt werden. Vorsicht bei Änderungen!
  • normalize.css: Klassen, um Browser zu „normalisieren”
  • pocketgrid.css: Das Pocketgrid-Framework. Nicht ändern. 
  • typo.css: enthält vor allem Typographie und Theme-Styling.
  • dropdown.css: enthält die Klassen, die für das mitgelieferte Dropdown-Menü zuständig sind. Falls ein anderes Navigations-Menü Anwendung finden soll, kann dieser Style-Sheet komplett ausgelassen werden.
  • mobile_menu.css:enthält die Klassen, die für das mitgelieferte Mobile-Menü zuständig sind. Falls ein anderes Navigations-Menü Anwendung finden soll, kann dieser Style-Sheet komplett ausgelassen werden.

Ihr Seiten-Layout

Sie können zwischen zwei Grund-Layout-Systemen wählen:

  • Ganze Breite (full-width): der Viewport erstreckt sich über die gesamte Bildschirmbreite. Damit können Sie Layouts erstellen, wie sie z.Z. sehr beliebt sind.
  • Boxed: Das Layout wird in einem Kasten mit fester Breite eingefasst. Ein Hintergrundbild kann definiert werden, sowie optional ein Schatten hinter dem Kasten. Das ist das Standard-Layout des Themes.

Das Theme wird mit einigen vordefinierten Varianten des jeweiligen Layouts geliefert.

Pocketgrid verwenden

Das Grid-System des Themes beruht auf Pocketgrid und kann nach Belieben verändert werden (Datei grid.css), um flüssige und vollkommen responsive Designs zu erzielen. Sie können beliebige Klassen-Namen verwenden. Die vordefinierten Klassen (.b1, b2, b25-25...) sind lediglich Beispiele.

Um die Klassen anzuwenden fügen Sie im CSS-Feld (unter Experten-Einstellungen) einem Inhalts-Elemente einfach die entsprechenden Block-Klasse hinzu, um die gewünschte Breite zu erzielen. Sobald 100% Breite erreicht sind, bricht die Reihe um (z.B. nach drei Elementen mit jeweils 33.33%).

 

Pocketgrid-Klassen können jedem Element zugeordnet werden, das die Klasse „block” besitzt.

Eine eingehende Dokumentation zu Pocketgrid finden Sie hier.

Karten („cards”)

Um Text-Elemente als Karten darzustellen, fügen Sie diesen jeweils die Klassen „two-cards”,„three-cards",„four-cards",„five-cards"  oder „six-cards"  hinzu.

Artikel-Stile und Overlays

Das Theme wird mit einer Auswahl an vordefinierten Styles geliefert, die Sie einem Artikel zuordnen können, um bestimmte Effekte zu erzielen. Diese Stile werden style-1, style-2, style-3... genannt und können in den internen Stylesheets unter basic_settings.css angepasst und erweitert werden. Sie können z.B. farbige Hintergründe oder Hintergrund-Bilder hinzufügen.

Zusammen mit den ebenfalls vordefinierten Overlay-Klassen (overlay-1, overlay-2...) können Sie somit sehr interessante Effekte erzielen. Auch diese lassen sich erweitern.

Headerimage und Slider

Edge-to-edge Header-Bilder und Slider, die mitskalieren liegen voll im Trend. Mit diesem Theme können Sie den Contao-Slider dafür einsetzen.

Schritt 1: Erstellen Sie einen neuen Artikel und lassen Sie ihn in der Kopfzeile anzeigen. Fügen Sie dem Artikel die CSS-Klasse ”header-image” hinzu.

Schritt 2: Erstellen Sie ein Inhaltselement vom Typ „Text” (oder „Bild”, falls kein Text gebraucht wird). Wählen Sie nun als ”Individuelles Template” ce_text_headerimage oder ce_text_headerimage_parallax. Das ist wichtig!
Nun können Sie mit dem Richtext-Editor den Text des Header-Bildes gestalten.

Falls Sie statt eines einzelnen Bildes einen Slider verwenden möchten, wiederholen Sie Schritt 2 für jeden Slide und umfassen die so entstandenen Inhalts-Elemente mit einem öffnenden und einem schließenden Slider-Element.

Helfer-Klassen

.hide-controls

Fügen Sie dem Slider-Start-Element die Klasse "hide-controls" hinzu, um „vorwärts” und „zurück” auszublenden.

.no-margin

Die ”no-margin” Klasse kann verwendet werden, um einem Artikel Padding und Margin zu nehmen. Das kann z.B. für Tile-Layout praktisch sein. Hinweis: Text behält trotzdem Padding und Margin.

.new-row

Die ”new-row” Klasse kann verwendet werden, um eine neue Reihe zu erzwingen

.center

Die ”center” Klasse kann verwendet werden, um ein Element horizontal zu zentrieren.

.right

Fürgen Sie einem Element die ”right” Klasse hinzu, um es rechtsbündig zu floaten. Hinweis: Das funktioniert nur mit Elementen, die keine Breite von 100% besitzen.

.offsetxx

Die Klasse ”offset10”... "offset90" kann verwendet werden, um ein Element horizontal zu verschieben (offset10 verschiebt ein Element um 10%, offset20 um 20%...). Funktioniert nur mit Elementen, die keine Breite von 100% besitzen.

.radius3, .radius5, .radius10

Die Klassen ”radius3”, "radius5" or "radius10" fügen einem Element einen Border-Radius von 3px, 5px or 10px hinzu. Die Klasse wirkt sich auf alle Elemente aus, die in der Hierarchie niedriger stehen. Wird z.B. die Klasse "radius5" einem Artikel zugewiesen, werden z.B. automatisch alle Bilder in diesem Artikel einen Radius von 5px bekommen.

.light

Die Klasse ”light” kann einem Element zugefügt werden, um die Textfarbe auf weiß zu setzen und einen leichten Text-Schatten zu verleihen. Nützlich, wenn mit dunklen Hintergründen gearbeitet wird.

Overlay-Effekte

Mit eine "overlay-#" Klasse können Sie diesem bestimmte Effekte zuweisen. Diese können im Basic_settings Stylesheet angepasst oder nach Belieben erweitert werden. Einzige Voraussetzung ist, dass die Klasse mit ”overlay" beginnen muss. Die Deklaration des Effekts geschieht dann anhand einer Klasse namens "overlay-xyz:before".

Auch Gradienten können verwendet werden. Der Contao-Stylesheet-Editor bietet bereits einfache Möglichkeiten dazu. Für kompliziertere Verläufe können Tools wie http://angrytools.com/gradient verwendet werden, deren erzeugter Code dann in das Feld für „Eigenen Code” kopiert wird.

Buttons

Box-Stile

Die ”box” Klasse kann verwendet werden, um ein Element als Box zu definieren.

Infobox

Die Klasse ”infobox” erzeugt eine Box mit Info-Icon.

Confirmation

Die Klasse ”infobox success” erzeugt eine grüne Box mit Bestätigungs-Icon.

Warning

Die Klasse ”infobox warning” erzeugt eine rote Box mit Warn-Icon.

Vordefinierte Klassen, um Abstände anzupassen

Manchmal wird am Anfang und/oder Ende eines Elements mehr Abstand benötigt. In solchen Fällen können folgende Klassen verwendet werden:

  • space-top10
  • space-top20
  • space-top30
  • space-top40
  • space-top50
  • space-bottom10
  • space-bottom20
  • space-bottom30
  • space-bottom40
  • space-bottom50

Trenn-Linien

.divider-top

Erzeugt einen Inset-Schatten am oberen Rand des Elements. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

.divider-top-bottom

Erzeugt einen Inset-Schatten am oberen und unteren Rand des Elements.  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

.divider-bottom

Erzeugt einen Inset-Schatten am unteren Rand des Elements.  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

.feature-item

Fügen Sie die Klasse ”feature-item” plus eine ”icon-” Klasse zu einem Text-Element hinzu, um Feature-Items mit großen Symbolen zu erzeugen:

Nemo enim ipsam voluptatem

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

Sed ut perspiciatis

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

Neque porro quisquam

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

Sed ut perspiciatis

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

Icons

Um in Ihrem Design Icons zu verwenden, fügen Sie einer Seite oder einem Element die entsprechende Klasse hinzu. Wenn Sie z.B. dem CSS-Feld der Start-Seite die Klasse „icon-home” hinzufügen, erscheint ein kleines Haus-Symbol im Navigations-Menü neben dem Seitennamen.

Eine Demo-HTML-Datei befindet sich im Ordner /fonts, mit deren Hilfe Sie die korrespondierenden Text-Codes finden können, falls Sie diese für CSS-Deklarationen verwenden möchten.

Reference
icon-glass0xe800
icon-note0xe801
icon-note-beamed0xe802
icon-music-10xe803
icon-music0xe804
icon-search0xe805
icon-mail0xe806
icon-heart0xe807
icon-heart-empty0xe808
icon-star0xe809
icon-star-empty0xe80a
icon-star-half0xe80b
icon-user0xe80c
icon-users0xe80d
icon-video0xe80e
icon-videocam0xe80f
icon-picture0xe810
icon-camera0xe811
icon-camera-alt0xe812
icon-search-10xe813
icon-th-large0xe814
icon-th0xe815
icon-th-list0xe816
icon-ok0xe817
icon-ok-circled0xe818
icon-ok-circled20xe819
icon-cancel0xe81a
icon-cancel-circled0xe81b
icon-cancel-circled20xe81c
icon-plus0xe81d
icon-plus-circled0xe81e
icon-minus0xe81f
icon-minus-circled0xe820
icon-help-circled0xe821
icon-info-circled0xe822
icon-home0xe823
icon-link0xe824
icon-attach0xe825
icon-lock0xe826
icon-lock-open0xe827
icon-pin0xe828
icon-eye0xe829
icon-eye-off0xe82a
icon-tag0xe82b
icon-tags0xe82c
icon-bookmark0xe82d
icon-flag0xe82e
icon-thumbs-up0xe82f
icon-thumbs-down0xe830
icon-flashlight0xe831
icon-mail-10xe832
icon-download0xe833
icon-heart-10xe834
icon-upload0xe835
icon-forward0xe836
icon-export0xe837
icon-heart-empty-10xe838
icon-pencil0xe839
icon-edit0xe83a
icon-print0xe83b
icon-retweet0xe83c
icon-comment0xe83d
icon-chat0xe83e
icon-bell0xe83f
icon-attention0xe840
icon-attention-circled0xe841
icon-location0xe842
icon-trash-empty0xe843
icon-doc0xe844
icon-folder0xe845
icon-folder-open0xe846
icon-phone0xe847
icon-cog0xe848
icon-cog-alt0xe849
icon-wrench0xe84a
icon-basket0xe84b
icon-calendar0xe84c
icon-login0xe84d
icon-logout0xe84e
icon-volume-off0xe84f
icon-volume-down0xe850
icon-volume-up0xe851
icon-headphones0xe852
icon-clock0xe853
icon-block-group0xe854
icon-resize-full0xe855
icon-resize-small0xe856
icon-resize-vertical0xe857
icon-resize-horizontal0xe858
icon-zoom-in0xe859
icon-zoom-out0xe85a
icon-down-circled20xe85b
icon-up-circled20xe85c
icon-down-dir0xe85d
icon-up-dir0xe85e
icon-left-dir0xe85f
icon-right-dir0xe860
icon-down-open0xe861
icon-left-open0xe862
icon-right-open0xe863
icon-up-open0xe864
icon-down-big0xe865
icon-left-big0xe866
icon-right-big0xe867
icon-up-big0xe868
icon-right-hand0xe869
icon-left-hand0xe86a
icon-up-hand0xe86b
icon-down-hand0xe86c
icon-cw0xe86d
icon-ccw0xe86e
icon-arblock-groups-cw0xe86f
icon-shuffle0xe870
icon-play0xe871
icon-play-circled20xe872
icon-stop0xe873
icon-pause0xe874
icon-to-end0xe875
icon-to-end-alt0xe876
icon-to-start0xe877
icon-to-start-alt0xe878
icon-fast-fw0xe879
icon-fast-bw0xe87a
icon-eject0xe87b
icon-target0xe87c
icon-signal0xe87d
icon-award0xe87e
icon-inbox0xe87f
icon-globe0xe880
icon-cloud0xe881
icon-flash0xe882
icon-umbrella0xe883
icon-flight0xe884
icon-leaf0xe885
icon-scissors0xe892
icon-briefcase0xe893
icon-off0xe894
icon-road0xe895
icon-list-alt0xe896
icon-barcode0xe898
icon-book0xe899
icon-adjust0xe89a
icon-tint0xe89b
icon-check0xe89c
icon-asterisk0xe89d
icon-gift0xe89e
icon-fire0xe89f
icon-magnet0xe8a0
icon-chart-bar0xe8a1
icon-credit-card0xe8a2
icon-floppy0xe8a3
icon-megaphone0xe8a4
icon-key0xe8a5
icon-truck0xe8a6
icon-hammer0xe8a7
icon-lemon0xe8a8
icon-star-10xe8a9
icon-star-empty-10xe8aa
icon-user-10xe8ab
icon-users-10xe8ac
icon-user-add0xe8ad
icon-video-10xe8ae
icon-picture-10xe8af
icon-camera-10xe8b0
icon-layout0xe8b1
icon-menu-10xe8b2
icon-check-10xe8b3
icon-cancel-circled-10xe8b4
icon-cancel-squared0xe8b5
icon-plus-10xe8b6
icon-plus-circled-10xe8b7
icon-plus-squared-10xe8b8
icon-minus-10xe8b9
icon-minus-circled-10xe8ba
icon-minus-squared-10xe8bb
icon-help-10xe8bc
icon-help-circled-10xe8bd
icon-info-10xe8be
icon-info-circled-10xe8bf
icon-back0xe8c0
icon-home-10xe8c1
icon-link-10xe8c2
icon-attach-10xe8c3
icon-lock-10xe8c4
icon-lock-open-10xe8c5
icon-eye-10xe8c6
icon-bookmark-10xe8c7
icon-bookmarks0xe8c8
icon-flag-10xe8c9
icon-thumbs-up-10xe8ca
icon-thumbs-down-10xe8cb
icon-download-10xe8cc
icon-upload-10xe8cd
icon-upload-cloud-10xe8ce
icon-reply-10xe8cf
icon-reply-all-10xe8d0
icon-forward-10xe8d1
icon-quote0xe8d2
icon-code-10xe8d3
icon-export-10xe8d4
icon-pencil-10xe8d5
icon-feather0xe8d6
icon-print-10xe8d7
icon-retweet-10xe8d8
icon-keyboard-10xe8d9
icon-chat-10xe8da
icon-bell-10xe8db
icon-attention-10xe8dc
icon-alert0xe8dd
icon-vcard0xe8de
icon-address0xe8df
icon-location-10xe8e0
icon-map-10xe8e1
icon-direction-10xe8e2
icon-compass-10xe8e3
icon-cup0xe8e4
icon-trash-10xe8e5
icon-doc-10xe8e6
icon-docs-10xe8e7
icon-doc-landscape0xe8e8
icon-doc-text-10xe8e9
icon-doc-text-inv-10xe8ea
icon-newspaper-10xe8eb
icon-book-open0xe8ec
icon-folder-10xe8ed
icon-archive0xe8ee
icon-box-10xe8ef
icon-rss-10xe8f0
icon-phone-10xe8f1
icon-cog-10xe8f2
icon-tools0xe8f3
icon-share-10xe8f4
icon-shareable0xe8f5
icon-basket-10xe8f6
icon-bag0xe8f7
icon-calendar-10xe8f8
icon-login-10xe8f9
icon-logout-10xe8fa
icon-mic-10xe8fb
icon-mute-10xe8fc
icon-sound0xe8fd
icon-volume0xe8fe
icon-clock-10xe8ff
icon-lamp0xe900
icon-light-down0xe901
icon-light-up0xe902
icon-adjust-10xe903
icon-block-group-10xe904
icon-resize-full-10xe905
icon-resize-small-10xe906
icon-popup0xe907
icon-publish0xe908
icon-window0xe909
icon-arblock-group-combo0xe90a
icon-down-circled-10xe90b
icon-left-circled-10xe90c
icon-right-circled-10xe90d
icon-up-circled-10xe90e
icon-down-open-10xe90f
icon-left-open-10xe910
icon-right-open-10xe911
icon-up-open-10xe912
icon-left-open-mini0xe913
icon-right-open-mini0xe914
icon-up-open-mini0xe915
icon-down-open-big0xe916
icon-left-open-big0xe917
icon-right-open-big0xe918
icon-up-open-big0xe919
icon-down-10xe91a
icon-left-10xe91b
icon-right-10xe91c
icon-up-10xe91d
icon-down-dir-10xe91e
icon-left-dir-10xe91f
icon-right-dir-10xe920
icon-up-dir-10xe921
icon-down-bold0xe922
icon-left-bold0xe923
icon-right-bold0xe924
icon-up-bold0xe925
icon-left-thin0xe926
icon-right-thin0xe927
icon-up-thin0xe928
icon-ccw-10xe929
icon-cw-10xe92a
icon-arblock-groups-ccw0xe92b
icon-level-down-10xe92c
icon-level-up-10xe92d
icon-shuffle-10xe92e
icon-loop0xe92f
icon-switch0xe930
icon-play-10xe931
icon-stop-10xe932
icon-pause-10xe933
icon-record0xe934
icon-to-end-10xe935
icon-to-start-10xe936
icon-fast-forward0xe937
icon-fast-backward0xe938
icon-progress-10xe939
icon-progress-20xe93a
icon-progress-30xe93b
icon-target-10xe93c
icon-palette0xe93d
icon-list-10xe93e
 icon-list-add0xe93f
icon-signal-10xe940
icon-trophy0xe941
icon-battery0xe942
icon-back-in-time0xe943
icon-monitor0xe944
icon-mobile-10xe945
icon-network0xe946
icon-cd0xe947
icon-inbox-10xe948
icon-install0xe949
icon-globe-10xe94a
icon-cloud-10xe94b
icon-flash-10xe94c
icon-moon-10xe94d
icon-flight-10xe94e
icon-paper-plane-10xe94f
icon-leaf-10xe950
icon-lifebuoy-10xe951
icon-mouse0xe952
icon-briefcase-10xe953
icon-suitcase-10xe954
icon-dot0xe955
icon-dot-20xe956
icon-dot-30xe957
icon-brush-10xe958
icon-magnet-10xe959
icon-infinity0xe95a
icon-erase0xe95b
icon-chart-pie-10xe95c
icon-chart-line-10xe95d
icon-chart-bar-10xe95e
icon-tape0xe95f
icon-graduation-cap-10xe960
icon-language-10xe961
icon-ticket-10xe962
icon-water0xe963
icon-droplet0xe964
icon-air0xe965
icon-credit-card-10xe966
icon-floppy-10xe967
icon-clipboard0xe968
icon-megaphone-10xe969
icon-database-10xe96a
icon-drive0xe96b
icon-bucket0xe96c
icon-thermometer0xe96d
icon-key-10xe96e
icon-flow-cascade0xe96f
icon-flow-branch0xe970
icon-flow-tree0xe971
icon-flow-parallel0xe972
icon-rocket-10xe973
icon-gauge-10xe974
icon-traffic-cone0xe975
icon-cc-10xe976
icon-cc-by0xe977
icon-cc-nc0xe978
icon-cc-nc-eu0xe979
icon-cc-nc-jp0xe97a
icon-cc-sa0xe97b
icon-cc-nd0xe97c
icon-cc-pd0xe97d
icon-cc-zero0xe97e
icon-cc-share0xe97f
icon-cc-remix0xe980
icon-cancel-10xe984
icon-tag-10xe985
icon-comment-10xe986
icon-book-10xe987
icon-hourglass-40xe988
icon-down-open-mini0xe989
icon-down-thin0xe98a
icon-progress-00xe98b
icon-cloud-thunder0xe98c
icon-chart-area-10xe98d
icon-flow-line0xe98e
icon-acrobat0xeb20
icon-move0xf047
icon-link-ext0xf08e
icon-check-empty0xf096
icon-bookmark-empty0xf097
icon-phone-squared0xf098
icon-twitter0xf099
icon-facebook0xf09a
icon-github-circled0xf09b
icon-rss0xf09e
icon-hdd0xf0a0
icon-certificate0xf0a3
icon-left-circled0xf0a8
icon-right-circled0xf0a9
icon-up-circled0xf0aa
icon-down-circled0xf0ab
icon-tasks0xf0ae
icon-filter0xf0b0
icon-resize-full-alt0xf0b2
icon-beaker0xf0c3
icon-docs0xf0c5
icon-blank0xf0c8
icon-menu0xf0c9
icon-table0xf0ce
icon-magic0xf0d0
icon-pinterest-circled0xf0d2
icon-pinterest-squared0xf0d3
icon-gplus-squared0xf0d4
icon-gplus0xf0d5
icon-money0xf0d6
icon-columns0xf0db
icon-sort0xf0dc
icon-sort-down0xf0dd
icon-sort-up0xf0de
icon-mail-alt0xf0e0
icon-linkedin0xf0e1
icon-gauge0xf0e4
icon-comment-empty0xf0e5
icon-chat-empty0xf0e6
icon-sitemap0xf0e8
icon-paste0xf0ea
icon-lightbulb0xf0eb
icon-exchange0xf0ec
icon-download-cloud0xf0ed
icon-upload-cloud0xf0ee
icon-user-md0xf0f0
icon-stethoscope0xf0f1
icon-suitcase0xf0f2
icon-bell-alt0xf0f3
icon-coffee0xf0f4
icon-food0xf0f5
icon-doc-text0xf0f6
icon-ambulance0xf0f9
icon-medkit0xf0fa
icon-fighter-jet0xf0fb
icon-beer0xf0fc
icon-h-sigh0xf0fd
icon-plus-squared0xf0fe
icon-angle-double-left0xf100
icon-angle-double-right0xf101
icon-angle-double-up0xf102
icon-angle-double-down0xf103
icon-angle-left0xf104
icon-angle-right0xf105
icon-angle-up0xf106
icon-angle-down0xf107
icon-desktop0xf108
icon-laptop0xf109
icon-tablet0xf10a
icon-mobile0xf10b
icon-circle-empty0xf10c
icon-quote-left0xf10d
icon-quote-right0xf10e
icon-circle0xf111
icon-reply0xf112
icon-github0xf113
icon-folder-empty0xf114
icon-folder-open-empty0xf115
icon-smile0xf118
icon-fblock-groupn0xf119
icon-meh0xf11a
icon-flag-empty0xf11d
icon-code0xf121
icon-reply-all0xf122
icon-star-half-alt0xf123
icon-direction0xf124
icon-crop0xf125
icon-fork0xf126
icon-unlink0xf127
icon-help0xf128
icon-info0xf129
icon-attention-alt0xf12a
icon-eraser0xf12d
icon-puzzle0xf12e
icon-mic0xf130
icon-mute0xf131
icon-shield0xf132
icon-calendar-empty0xf133
icon-extinguisher0xf134
icon-rocket0xf135
icon-angle-circled-left0xf137
icon-angle-circled-right0xf138
icon-angle-circled-up0xf139
icon-angle-circled-down0xf13a
icon-html50xf13b
icon-anchor0xf13d
icon-lock-open-alt0xf13e
icon-bullseye0xf140
icon-rss-squared0xf143
icon-play-circled0xf144
icon-ticket0xf145
icon-minus-squared0xf146
icon-minus-squared-alt0xf147
icon-level-up0xf148
icon-level-down0xf149
icon-ok-squared0xf14a
icon-pencil-squared0xf14b
icon-link-ext-alt0xf14c
icon-export-alt0xf14d
icon-compass0xf14e
icon-expand0xf150
icon-collapse0xf151
icon-expand-right0xf152
icon-euro0xf153
icon-pound0xf154
icon-dollar0xf155
icon-doc-inv0xf15b
icon-doc-text-inv0xf15c
icon-thumbs-up-alt0xf164
icon-thumbs-down-alt0xf165
icon-youtube-squared0xf166
icon-youtube0xf167
icon-youtube-play0xf16a
icon-dropbox0xf16b
icon-stackoverflow0xf16c
icon-instagram0xf16d
icon-flickr0xf16e
icon-bitbucket0xf171
icon-bitbucket-squared0xf172
icon-tumblr0xf173
icon-tumblr-squared0xf174
icon-down0xf175
icon-up0xf176
icon-left0xf177
icon-right0xf178
icon-apple0xf179
icon-windows0xf17a
icon-android0xf17b
icon-linux0xf17c
icon-dribbble0xf17d
icon-skype0xf17e
icon-trello0xf181
icon-female0xf182
icon-male0xf183
icon-sun0xf185
icon-moon0xf186
icon-box0xf187
icon-bug0xf188
icon-pagelines0xf18c
icon-stackexchange0xf18d
icon-right-circled20xf18e
icon-left-circled20xf190
icon-collapse-left0xf191
icon-dot-circled0xf192
icon-wheelchair0xf193
icon-vimeo-squared0xf194
icon-plus-squared-alt0xf196
icon-space-shuttle0xf197
icon-mail-squared0xf199
icon-graduation-cap0xf19d
icon-yahoo0xf19e
icon-google0xf1a0
icon-stumbleupon-circled0xf1a3
icon-stumbleupon0xf1a4
icon-delicious0xf1a5
icon-digg0xf1a6
icon-child0xf1ae
icon-paw0xf1b0
icon-spoon0xf1b1
icon-cube0xf1b2
icon-cubes0xf1b3
icon-behance0xf1b4
icon-behance-squared0xf1b5
icon-recycle0xf1b8
icon-cab0xf1b9
icon-taxi0xf1ba
icon-tree0xf1bb
icon-spotify0xf1bc
icon-soundcloud0xf1be
icon-database0xf1c0
icon-file-pdf0xf1c1
icon-file-word0xf1c2
icon-file-excel0xf1c3
icon-file-powerpoint0xf1c4
icon-file-image0xf1c5
icon-file-archive0xf1c6
icon-file-audio0xf1c7
icon-file-video0xf1c8
icon-file-code0xf1c9
icon-codeopen0xf1cb
icon-lifebuoy0xf1cd
icon-circle-notch0xf1ce
icon-git-squared0xf1d2
icon-git0xf1d3
icon-hacker-news0xf1d4
icon-qq0xf1d6
icon-paper-plane0xf1d8
icon-paper-plane-empty0xf1d9
icon-history0xf1da
icon-circle-thin0xf1db
icon-sliders0xf1de
icon-share0xf1e0
icon-share-squared0xf1e1
icon-soccer-ball0xf1e3
icon-tty0xf1e4
icon-binoculars0xf1e5
icon-plug0xf1e6
icon-slideshare0xf1e7
icon-newspaper0xf1ea
icon-wifi0xf1eb
icon-calc0xf1ec
icon-paypal0xf1ed
icon-bell-off0xf1f6
icon-bell-off-empty0xf1f7
icon-trash0xf1f8
icon-copyright0xf1f9
icon-at0xf1fa
icon-eyedropper0xf1fb
icon-brush0xf1fc
icon-birthday0xf1fd
icon-chart-area0xf1fe
icon-chart-pie0xf200
icon-chart-line0xf201
icon-toggle-off0xf204
icon-toggle-on0xf205
icon-bicycle0xf206
icon-bus0xf207
icon-angellist0xf209
icon-cc0xf20a
icon-meanpath0xf20c
icon-leanpub0xf212
icon-cart-plus0xf217
icon-cart-arblock-group-down0xf218
icon-diamond0xf219
icon-ship0xf21a
icon-motorcycle0xf21c
icon-street-view0xf21d
icon-heartbeat0xf21e
icon-genderless0xf22d
icon-facebook-official0xf230
icon-pinterest0xf231
icon-whatsapp0xf232
icon-server0xf233
icon-user-plus0xf234
icon-user-times0xf235
icon-bed0xf236
icon-train0xf238
icon-subway0xf239
icon-expeditedssl0xf23e
icon-mouse-pointer0xf245
icon-i-cursor0xf246
icon-sticky-note0xf249
icon-sticky-note-o0xf24a
icon-clone0xf24d
icon-balance-scale0xf24e
icon-hourglass-o0xf250
icon-hourglass-10xf251
icon-hourglass-20xf252
icon-hourglass-30xf253
icon-hourglass0xf254
icon-hand-grab-o0xf255
icon-hand-paper-o0xf256
icon-hand-scissors-o0xf257
icon-hand-lizard-o0xf258
icon-hand-spock-o0xf259
icon-hand-pointer-o0xf25a
icon-hand-peace-o0xf25b
icon-trademark0xf25c
icon-registered0xf25d
icon-creative-commons0xf25e
icon-get-pocket0xf265
icon-safari0xf267
icon-chrome0xf268
icon-firefox0xf269
icon-opera0xf26a
icon-internet-explorer0xf26b
icon-television0xf26c
icon-contao0xf26d
icon-amazon0xf270
icon-calendar-plus-o0xf271
icon-calendar-minus-o0xf272
icon-calendar-times-o0xf273
icon-calendar-check-o0xf274
icon-industry0xf275
icon-map-pin0xf276
icon-map-signs0xf277
icon-map-o0xf278
icon-map0xf279
icon-commenting0xf27a
icon-commenting-o0xf27b
icon-vimeo0xf27d
icon-reddit-alien0xf281
icon-edge0xf282
icon-credit-card-alt0xf283
icon-usb0xf287
icon-pause-circle0xf28b
icon-pause-circle-o0xf28c
icon-stop-circle0xf28d
icon-stop-circle-o0xf28e
icon-shopping-bag0xf290
icon-shopping-basket0xf291
icon-hashtag0xf292
icon-percent0xf295
icon-wpforms0xf298
icon-envira0xf299
icon-universal-access0xf29a
icon-wheelchair-alt0xf29b
icon-question-circle-o0xf29c
icon-blind0xf29d
icon-volume-control-phone0xf2a0
icon-braille0xf2a1
icon-assistive-listening-systems0xf2a2
icon-asl-interpreting0xf2a4
icon-sign-language0xf2a7
icon-low-vision0xf2a8
icon-snapchat0xf2ab
icon-snapchat-ghost0xf2ac
icon-snapchat-square0xf2ad
icon-google-plus-circle0xf2b3
icon-font-awesome0xf2b4
icon-github-squared0xf300
icon-twitter-squared0xf304
icon-facebook-squared0xf308
icon-linkedin-squared0xf30c
icon-gplus-10xf30f
icon-evernote0xf333

Animationen

Um ein Element zu animieren, schreiben Sie in das CSS-Feld die Klasse „animation”, gefolgt von der Klasse des gewünschten Effekts (z.B. fadeIn).
Hinweis: bei Slidern wird in machen Browsern nur der erste Slide animiert wiedergegeben.

Zusätzlich kann eine Verzögerung definiert werden, um Elemente in bestimmter Abfolge erscheinen zu lassen.

Um die Animationen der Termin-Listen anzupassen (z.B. „wobble” statt ”bounceIn”, öffnen Sie das jeweilige Template und ändern Sie dort in der ersten Zeile den Effekt wie gewünscht ab.

Sie können hier mehr über die Animationen erfahren. Vergessen Sie nicht, dass Animationen viel Ressourcen beanspruchen; beschränken Sie sich deshalb auf ein Minimum!

Animations-Effekte

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig

fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut

rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
slideInUp
slideInDown
slideInLeft
slideInRight
slideOutUp
slideOutDown
slideOutLeft
slideOutRight
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
hinge
rollIn
rollOut

Verzögerungs- und Geschwindigkeits-Klassen

  • delay-250 (i.e. .25s)
  • delay-500 (i.e. .5s)
  • delay-750 (i.e. .75s)
  • delay-1000 (i.e. 1s)
  • delay-1250 (i.e. 1.25s)
  • delay-1500 (i.e. 1.5s)
  • delay-1750 (i.e. 1.75s)
  • delay-2000 (i.e. 2s)
  • delay-2500 (i.e. 2.5s)
  • delay-3000 (i.e. 3s)
  • delay-3500 (i.e. 3.5s)

Animationen modifizieren:

  • slow: Animationsgeschwindigkeit von 1.5s
  • slower: Animationsgeschwindigkeit von 2s
  • slowest: Animationsgeschwindigkeit von 3s