Contao Community Documentation - Benutzerbeiträge [de]

Eigene Templates trotz fehlender Auswahlmöglichkeit

2013-09-12T11:39:54Z

Jantheofel: Hinweis auf Erweiterung template_override ergänzt

{{AppliesTo|TLVersion=Alle Versionen|Version=ab 2.9}}
[[Category: Admin_HOWTOS]]
[[Category: Dev_HOWTOS]]

Es gibt den ein oder anderen Fall, wo man gerne verschiedene Templates in Modulen nutzen möchte, aber leider nicht die Auswahl hat im Modul selber.

Da kann man sich mit einem kleinen Trick behelfen.

Man vergibt der Stelle wo man ein extra Template nutzen möchte eine bestimmte CSS Klasse und fragt diese ab. Je nach dem, läd man dann die passende eigene Template Datei.

=Vorgehen '''Möglichkeit 1'''=

# Kopie des Original Templates anlegen (siehe auch [[Templates_bearbeiten|Templates_bearbeiten]])
# Zwei neue Templates anlegen (oder mehr.. wenn man das braucht) die man dann später benutzen möchte:
#* template_1.tpl mit dem Oringinal Code
#* template_2.tpl mit dem geänderten
# Jetzt nimmt man sich das Template was immer geladen wird und bringt dort die If-Abfrage ein, welches Template man nun wirklich laden möchte:

<source lang="php">
<?php

if(in_array('klasse_die_man_abfragen_will', explode(' ', $this->class)))
{
include('template_1.tpl');
}
else
{
include('template_2.tpl');
}
?>
</source>

=Vorgehen '''Möglichkeit 2''' (mit nur einer Datei)=

Man kopiert das entsprechende Core-Template in den Ordner '''roots/templates/''' (per FTP oder übers BE) und erzeugt darin folgende Struktur.

<source lang="php">
<?php if(in_array('klasse_die_man_abfragen_will', explode(' ', $this->class))): ?>
eigenes Template
<?php else: ?>
default Template
<?php endif; ?>
</source>

Wichtig ist eben, das man die Klasse auch richtig vergibt ;-)

'''Möglichkeit 2''' ist mehrfach getestet.

=Vorgehen '''Möglichkeit 3''' (mit Erweiterung)=

Wer lieber eine Auswahlliste im Backend hat, kann alternativ die Erweiterung "template_override" einsetzen. Diese fügt an sehr vielen Stellen (z.B. in allen Content-Elementen) eine Auswahlmöglichkeit des Templates hinzu. Außerdem wird in der Template-Auswahl markiert, welche Templates vom Core verwendet werden und welche aus dem Theme stammen.

----

--[[Benutzer:MacKP|MacKP]] 17:36, 29. Sep. 2010 (CEST)

[[Benutzer:ways2web|ways2web]] 00:01, 02. Jun. 2011 (CEST) '''thx 2 Florian'''

--[[Benutzer:Andreas|Andreas Burg]] 01:48, 20. Aug. 2012 (CEST)

News4ward

2013-08-01T15:42:06Z

Jantheofel: /* Update von Contao 2.x auf 3.x */

{{stub}}
[[en:News4ward]]
[[pt:News4ward]]
[[Category:Admin_HOWTOS]]
[[Category:Extensions]]

=News4ward für Contao3=
{{ExtInfo
| DevSite=http://www.4wardmedia.de
| ExtVersion=GithubVersion
| Version=3.x
| ERLink=http://www.contao.org/erweiterungsliste/view/news4ward.html
}}
==Beta Version==
'''Github''' https://github.com/psi-4ward/news4ward/tree/contao3

==Spezielles==
Es wird kein GlobalContentelements mehr benötigt!

==Update von Contao 2.x auf 3.x==

1. Backup anlegen

2. Manuell folgende Datenbankoperationen durchführen:
<source lang="sql">
ALTER TABLE tl_content ADD ptablenew varchar(64) NOT NULL default '';
UPDATE tl_content SET ptablenew="tl_article" WHERE do="article";
UPDATE tl_content SET ptablenew="tl_boxes4ward_article" WHERE do="boxes4ward";
UPDATE tl_content SET ptablenew="tl_news4ward_article" WHERE do="news4ward";
</source>

3. Prüfung durchführen. Es dürfen keine Treffer gefunden werden. Falls doch nutzt noch eine weitere Erweiterung Globalcontentelements
<source lang="sql">
select * from tl_content where ptablenew = '';
</source>

4. Erweiterung Globalcontentelements löschen - WICHTIG: Dabei NICHT die eben angelegte Spalte "ptablenew" löschen!

5. Update von System und Erweiterungen auf Contao 3 durchführen - WICHTIG: Dabei NICHT die eben angelegte Spalte "ptablenew" löschen!

6. Manuelle Datenbankoperationen durchführen:
<source lang="sql">
UPDATE tl_content SET ptable = ptablenew;
ALTER TABLE tl_content DROP ptablenew;
</source>

7. Manuelles Update von news4ward - hier aus GitHub
Dazu die Verzeichnisse vorher löschen, so dass nur der neue Code drin steht.
https://github.com/psi-4ward/stylepicker4ward/archive/master.zip - WICHTIG nach system/modules/_stylepicker4ward (der Unterstrich am Anfang muss sein) installieren!
https://github.com/psi-4ward/news4ward/archive/master.zip - Nach system/modules/news4ward
Wenn genutzt Untererweiterungen installieren. Achtung - dabei kann der Branch in GitHub für Contao 3 teilweise auch nicht "master" sein. Beispiele:
https://github.com/psi-4ward/news4ward_categories/archive/Contao3.zip - Nach system/modules/news4ward_categories
https://github.com/psi-4ward/news4ward_archiveMenu/archive/Contao3.zip - Nach system/modules/news4ward_archiveMenu
https://github.com/psi-4ward/news4ward_tags/archive/Contao3.zip - Nach system/modules/news4ward_tags

=News4ward für Contao 2.11=
News/Blog Erweiterung mit Unterstützung von Archiven::Artikeln::Inhaltselementen
{{ExtInfo
| DevSite=http://www.4wardmedia.de
| ExtVersion=1.0.0 Build6
| Version=2.11.x
| ERLink=http://www.contao.org/erweiterungsliste/view/news4ward.html
}}
==Stable Version==
'''Extension Repository''' https://contao.org/de/extension-list/view/news4ward.de.html

==Demo von News4ward==
Siehe http://blog4contao.de

News4ward

2013-08-01T15:14:06Z

Jantheofel: Updatehinweis Contao 2 auf 3 ergänzt

{{stub}}
[[en:News4ward]]
[[pt:News4ward]]
[[Category:Admin_HOWTOS]]
[[Category:Extensions]]

=News4ward für Contao3=
{{ExtInfo
| DevSite=http://www.4wardmedia.de
| ExtVersion=GithubVersion
| Version=3.x
| ERLink=http://www.contao.org/erweiterungsliste/view/news4ward.html
}}
==Beta Version==
'''Github''' https://github.com/psi-4ward/news4ward/tree/contao3

==Spezielles==
Es wird kein GlobalContentelements mehr benötigt!

==Update von Contao 2.x auf 3.x==

1. Backup anlegen

2. Manuell folgende Datenbankoperationen durchführen:
<source lang="sql">
ALTER TABLE tl_content ADD ptablenew varchar(64) NOT NULL default '';
UPDATE tl_content SET ptablenew="tl_article" WHERE do="article";
UPDATE tl_content SET ptablenew="tl_boxes4ward_article" WHERE do="boxes4ward";
UPDATE tl_content SET ptablenew="tl_news4ward_article" WHERE do="news4ward";
</source>

3. Prüfung durchführen. Es dürfen keine Treffer gefunden werden. Falls doch nutzt noch eine weitere Erweiterung Globalcontentelements
<source lang="sql">
select * from tl_content where ptablenew = '';
</source>

4. Erweiterung Globalcontentelements löschen - WICHTIG: Dabei NICHT die eben angelegte Spalte "ptablenew" löschen!

5. Update von System und Erweiterungen auf Contao 3 durchführen - WICHTIG: Dabei NICHT die eben angelegte Spalte "ptablenew" löschen!

6. Manuelle Datenbankoperationen durchführen:
<source lang="sql">
UPDATE tl_content SET ptable = ptablenew;
ALTER TABLE tl_content DROP ptable;
</source>

7. Manuelles Update von news4ward - hier aus GitHub
Dazu die Verzeichnisse vorher löschen, so dass nur der neue Code drin steht.
https://github.com/psi-4ward/stylepicker4ward/archive/master.zip - WICHTIG nach system/modules/_stylepicker4ward (der Unterstrich am Anfang muss sein) installieren!
https://github.com/psi-4ward/news4ward/archive/master.zip - Nach system/modules/news4ward
Wenn genutzt Untererweiterungen installieren. Achtung - dabei kann der Branch in GitHub für Contao 3 teilweise auch nicht "master" sein. Beispiele:
https://github.com/psi-4ward/news4ward_categories/archive/Contao3.zip - Nach system/modules/news4ward_categories
https://github.com/psi-4ward/news4ward_archiveMenu/archive/Contao3.zip - Nach system/modules/news4ward_archiveMenu
https://github.com/psi-4ward/news4ward_tags/archive/Contao3.zip - Nach system/modules/news4ward_tags

=News4ward für Contao 2.11=
News/Blog Erweiterung mit Unterstützung von Archiven::Artikeln::Inhaltselementen
{{ExtInfo
| DevSite=http://www.4wardmedia.de
| ExtVersion=1.0.0 Build6
| Version=2.11.x
| ERLink=http://www.contao.org/erweiterungsliste/view/news4ward.html
}}
==Stable Version==
'''Extension Repository''' https://contao.org/de/extension-list/view/news4ward.de.html

==Demo von News4ward==
Siehe http://blog4contao.de

GoogleAnalytics

2011-10-24T14:53:21Z

Jantheofel:

[[Category:Extensions]]
{{ExtInfo
| Dev=Jan Theofel
| DevSite=[http://www.theofel.de Jan Theofel]
| ExtVersion=1.3.1 stable
| Version=2.9 - 2.10
| ERLink=http://www.contao.org/erweiterungsliste/view/googleanalytics.de.html
| TrackerLink=http://dev.contao-forge.org/projects/show/googleanalytics
}}
=Google Analytics einbinden=

==Integration durch Templateanpassungen==

Seit Contao 2.9 ist die Unterstützung für Google Analytics aus dem Seitenlayout entfernt worden. Der im Core vorgesehene Weg ist, das Template moo_analytics zu editieren und dieses als MooTools-Template in das Seitenlayout einzubinden. (siehe [http://www.contao.org/neuigkeiten/items/contao_2-9-0.html zweiten Abschnitt hier]).

==Integration durch Erweiterung googleanalytics==

Alternativ steht die Erweiterung [http://www.contao.org/erweiterungsliste/view/googleanalytics.de.html googleanalytics] zur Verfügung. Diese ist aktuell nur mit Contao 2.9 und 2.10 getestet, sollte aber auch unter 2.8 einsatzfähig sein.

Diese bietet folgende Vorteile:
* Keine Anpassung an Templates notwendig
* Mehrere IDs im Multidomainbetrieb ohne verschiedene Seitenlayouts möglich
* Anonymisierung der IP Adresse möglich (notwendig für den rechtssicheren Einsatz)
* Download-Tracking über mitgelieferte Templates möglich
* Manuelles oder automatisches Tracking für externe Links
* Event-Tracking für andere Extensions vorbereitet
* Insert-Tag <nowiki>{{ga::privacytext}}</nowiki> mit deutschsprachigem Text von Google für die Datenschutzhinweise (für den rechtssicheren Einsatz)

Zur Nutzung bitte wie folgt vorgehen:
* Google Analytics ID ermitteln (siehe unten)
* Zu bearbeitende Wurzelseite in der Seitenstruktur öffnen
* Im Abschnitt "Google Analytics" die Google Analytics ID eintragen
* Wenn gewünscht das Häckchen zur Anonymisierung der IP-Adresse anhaken (in Deutschland für den rechtssicheren Einsatz zwingend notwendig!)

==Google Analytics ID ermitteln==
* Neues [https://www.google.com/analytics/ Google Analytics] Konto anlegen (wenn noch nicht vorhanden)
* Die gewünschte Domain in Google Analytics eintragen
* Auf der [https://www.google.com/analytics/settings/home Startseite von GA] die Domain anklicken.
* Dort rechts auf "Bearbeiten" gehen
* Rechts oben auf "Status prüfen" klicken
* Den Wert "Web-Property-ID" auslesen (Format: UA-xxxxxx-x)
* Bitte die Hinweise zum [http://www.contao-anleitungen.de/post/google-analytics-datenschutzkonform-einsetzen.html rechtssicheren Einsatz] beachten!

=Spezialfunktionen nutzen=

==Insert-Tag für Datenschutzhinweise==
Das Insert-Tag <nowiki>{{ga::privacytext}}</nowiki> stellt den Text aus den [http://www.google.com/intl/de/analytics/tos.html deutschen Nutzungsbedinungen von Google Analytics] zur Verfügung. Es wird bei Änderungen mit gepflegt, so dass hier stets die aktuelle Fassung zur Verfügung steht, ohne das manuell Textanpassungen übernommen werdenmüssen.

==Download-Tracking==
Um das Download-Tracking zu nutzen werden im Ordner system/modules/googleanalytics/templates die Dateien ce_download_ga (für Einzeldownloads) und ce_downloads_ga (für mehrere Downloads) mitgeliefert. Diese einfach in das zentrale Templates-Verzeichnis kopieren und als ce_download bzw. ce_downloads umbenennen. Die Templates stehen ab Version 1.3.1 sowohl als tpl wie auch als xhtml/html5-Version (für Contao 2.10) zur Verfügung.

==Tracking externer URLS==
In den Einstellungen kann das Trackign externen URLs in zwei verschiedenen Varianten aktiviert werden.

1. Alle externen URLs werden getrackt
Dabei wird für alle externen URLs ein onClick-Event definiert bzw. die vorhandenen ergänzt, so dass alle Links auf externe Links ins Tracking mit einfließen.

2. Nur manuell gesetzte URLs werden getrackt
Auf der Seite wird der Code für das Tracking externer Links vorbereitet, jedoch nicht in die Links eingefügt. Dies muss manuell oder über speziell angepasste Templates geschehen. Hierzu ist für jeden zu trackenden Link ein onClick-Event zu setzen, welches die Funktion recordOutboundLink mit folgenden Parameter aufruft: Gruppe im Event-Tracking, Wert und ein Flag, ob die URL in einem neuen Fenster geöffnet werden soll (1=ja, 0=nein). Beispiel:

<nowiki><a href="foobar.com" onClick="recordOutboundLink(this, 'Outbound Links', 'foobar.com', 1);return false;"></nowiki>

==Event-Tracking==
Es kann ebenfalls der Code für das Tracking von Events auf der Seite in die Seite eingebunden werden. Dieser kann dann über Aufruf der Funktion gaTrackEvent genutzt werden, welche zwei Parameter nimmt: Die Gruppe im Event-Tracking und einen Wert. Beispiel:

<nowiki><a href="mailto:foo@bar.com" onClick="gaTrackEvent('E-Mail sent', 'foo@bar.com');"></nowiki>

----
erstellt von Jan Theofel

GoogleAnalytics

2010-12-02T11:00:12Z

Jantheofel:

[[Category:Extensions]]
{{ExtInfo
| Dev=Jan Theofel
| DevSite=[http://www.etes.de ETES GmbH]
| ExtVersion=1.2.0 stable
| Version=2.9
| ERLink=http://www.contao.org/erweiterungsliste/view/googleanalytics.de.html
| TrackerLink=http://dev.typolight-forge.org/projects/show/googleanalytics
}}
=Google Analytics einbinden=

==Integration durch Templateanpassungen==

Seit Contao 2.9 ist die Unterstützung für Google Analytics aus dem Seitenlayout entfernt worden. Der im Core vorgesehene Weg ist, das Template moo_analytics zu editieren und dieses als MooTools-Template in das Seitenlayout einzubinden. (siehe [http://www.contao.org/neuigkeiten/items/contao_2-9-0.html zweiten Abschnitt hier]).

==Integration durch Erweiterung googleanalytics==

Alternativ steht die Erweiterung [http://www.contao.org/erweiterungsliste/view/googleanalytics.de.html googleanalytics] zur Verfügung. Diese ist aktuell nur mit Contao 2.9 getestet, sollte aber auch unter 2.8 einsatzfähig sein.

Diese bietet folgende Vorteile:
* Keine Anpassung an Templates notwendig
* Mehrere IDs im Multidomainbetrieb ohne verschiedene Seitenlayouts möglich
* Anonymisierung der IP Adresse möglich
* Download-Tracking über mitgelieferte Templates möglich

Zur Nutzung bitte wie folgt vorgehen:
* Google Analytics ID ermitteln (siehe unten)
* Zu bearbeitende Wurzelseite in der Seitenstruktur öffnen
* Im Abschnitt "Google Analytics" die Google Analytics ID eintragen
* Wenn gewünscht das Häckchen zur Anonymisierung der IP-Adresse anhaken
* Nicht vergessen: Datenschutzhinweise aus den Google Analytics AGB müssen in die Webseite eingebaut werden!

==Google Analytics ID ermitteln==
* Neues [https://www.google.com/analytics/ Google Analytics] Konto anlegen (wenn noch nicht vorhanden)
* Die gewünschte Domain in Google Analytics eintragen
* Auf der [https://www.google.com/analytics/settings/home Startseite von GA] die Domain anklicken.
* Dort rechts auf "Bearbeiten" gehen
* Rechts oben auf "Status prüfen" klicken
* Den Wert "Web-Property-ID" auslesen (Format: UA-xxxxxx-x)

==Download-Tracking==
Um das Download-Tracking zu nutzen werden im Ordner system/modules/googleanalytics/templates die Dateien ce_download_ga.tpl (für Einzeldownloads) und ce_downloads_ga.tpl (für mehrere Downloads) mitgeliefert. Diese einfach in das zentrale Templates-Verzeichnis kopieren und als ce_download.tpl bzw. ce_downloads.tpl umbenennen.

----
erstellt von Jan Theofel

GoogleAnalytics

2010-12-02T09:17:35Z

Jantheofel:

[[Category:Extensions]]
{{ExtInfo
| Dev=Jan Theofel
| DevSite=[http://www.etes.de ETES GmbH]
| ExtVersion=1.2.0 stable
| Version=2.9
| ERLink=http://www.contao.org/erweiterungsliste/view/googleanalytics.de.html
}}
=Google Analytics einbinden=

==Integration durch Templateanpassungen==

Seit Contao 2.9 ist die Unterstützung für Google Analytics aus dem Seitenlayout entfernt worden. Der im Core vorgesehene Weg ist, das Template moo_analytics zu editieren und dieses als MooTools-Template in das Seitenlayout einzubinden. (siehe [http://www.contao.org/neuigkeiten/items/contao_2-9-0.html zweiten Abschnitt hier]).

==Integration durch Erweiterung googleanalytics==

Alternativ steht die Erweiterung [http://www.contao.org/erweiterungsliste/view/googleanalytics.de.html googleanalytics] zur Verfügung. Diese ist aktuell nur mit Contao 2.9 getestet, sollte aber auch unter 2.8 einsatzfähig sein.

Diese bietet folgende Vorteile:
* Keine Anpassung an Templates notwendig
* Mehrere IDs im Multidomainbetrieb ohne verschiedene Seitenlayouts möglich
* Anonymisierung der IP Adresse möglich
* Download-Tracking über mitgelieferte Templates möglich

Zur Nutzung bitte wie folgt vorgehen:
* Google Analytics ID ermitteln (siehe unten)
* Zu bearbeitende Wurzelseite in der Seitenstruktur öffnen
* Im Abschnitt "Google Analytics" die Google Analytics ID eintragen
* Wenn gewünscht das Häckchen zur Anonymisierung der IP-Adresse anhaken
* Nicht vergessen: Datenschutzhinweise aus den Google Analytics AGB müssen in die Webseite eingebaut werden!

==Google Analytics ID ermitteln==
* Neues [https://www.google.com/analytics/ Google Analytics] Konto anlegen (wenn noch nicht vorhanden)
* Die gewünschte Domain in Google Analytics eintragen
* Auf der [https://www.google.com/analytics/settings/home Startseite von GA] die Domain anklicken.
* Dort rechts auf "Bearbeiten" gehen
* Rechts oben auf "Status prüfen" klicken
* Den Wert "Web-Property-ID" auslesen (Format: UA-xxxxxx-x)

==Download-Tracking==
Um das Download-Tracking zu nutzen werden im Ordner system/modules/googleanalytics/templates die Dateien ce_download_ga.tpl (für Einzeldownloads) und ce_downloads_ga.tpl (für mehrere Downloads) mitgeliefert. Diese einfach in das zentrale Templates-Verzeichnis kopieren und als ce_download.tpl bzw. ce_downloads.tpl umbenennen.

==Ticket-System==
Featurerequests und Bugreports können im [http://dev.typolight-forge.org/projects/show/googleanalytics Ticketsystem] eingetragen und eingesehen werden.

----
erstellt von Jan Theofel

InKuerzeVerfuegbar

2010-09-25T11:40:17Z

Jantheofel:

[[Category:Development]]
[[Category:Extensions]]

Um zu vermeiden, dass parallele Entwicklung unnötige Ressourcen benötigt, können Entwickler hier Erweiterung eintragen, die "in Kürze verfügbar" sein sollen.

== ETES GmbH ==

Entwickler: Jan Theofel, Marc Schneider, Sebastian Leitz

Entwicklerkontakt: [mailto:contao@etes.de E-Mail] [http://www.etes.de/ Webseite]

* (Neues) Trackback-Modul für News (andere Features als das bestehende)
* (Neues) Gravatar-Modul (Gravatare auch für Kommentare etc.)
* Wordpress-Import (basiert auf den oberen beiden)
* htaccess-Erweiterung zur Konfiguration der zentralen .htaccess mit der Möglichkeit, dass Module dort per Hook eigene Definitionen einfügen können
* Erweiterungen für unsere Jobbörse (Onlinebewerbung/Bewertung von Bewerbern/Anbindung an Paymentsysteme)

InKuerzeVerfuegbar

2010-09-25T10:55:09Z

Jantheofel: Die Seite wurde neu angelegt: „Category:Development Category:Extensions Um zu vermeiden, dass parallele Entwicklung unnötige Ressourcen benötigt, können Entwickler hier Erweiterung …“

[[Category:Development]]
[[Category:Extensions]]

Um zu vermeiden, dass parallele Entwicklung unnötige Ressourcen benötigt, können Entwickler hier Erweiterung eintragen, die "in Kürze verfügbar" sein sollen.

== Jan Theofel (ETES GmbH) ==

Entwicklerkontakt: [mailto:contao@etes.de E-Mail] [http://www.etes.de/ Webseite]
* (Neues) Trackback-Modul für News (andere Features als das bestehende)
* (Neues) Gravatar-Modul (Gravatare auch für Kommentare etc.)
* Wordpress-Import (basiert auf den oberen beiden)
* htaccess-Erweiterung zur Konfiguration der zentralen .htaccess mit der Möglichkeit, dass Module dort per Hook eigene Definitionen einfügen können
* Erweiterungen für unsere Jobbörse (Onlinebewerbung/Bewertung von Bewerbern/Anbindung an Paymentsysteme)

BrowserCSS

2010-09-08T21:49:57Z

Jantheofel: Beispiele erweitert und in eine eigene Rubrik gepackt

[[Category:Extensions]]
[[Category:CSS HOWTOS]]
{{ExtInfo
| Dev=Jan Theofel
| DevSite=[http://www.etes.de ETES GmbH]
| ExtVersion=1.0.0
| Version=2.9
| ERLink=http://www.contao.org/erweiterungsliste/view/browsercss.de.html
}}
=Browser- und systemspezifische CSS Klassen=

Die Erweiterung browsercss stellt eine einfache Möglichkeit um browser- und systemspezifische CSS-Selektoren zu definieren. Dazu werden die CSS-Klassen des body-Tags um Kürzel für Browser und Betriebssystem erweitert.

==Nutzung==
Zur Nutzung ist lediglich die Installation der Erweiterung [http://www.contao.org/erweiterungsliste/view/browsercss.de.html browsercss] notwendig. Die Erweiterung besitzt keine Einstellungen im Backend sondern fügt für alle Frontendausgaben die jeweiligen browser- bzw. systemspezifischen Kürzel als CSS-Klassen des body-Tags ein.

==Beispiele==
Beispiel mit Firefox 3.6.x unter Linux: <pre><body id="top" class="[...] firefox firefox3 firefox36 linux"></pre>

Beispiel mit Internet Explorer 6: <pre><body id="top" class="[...] ie ie6 ie60 windows"></pre>

Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 mobile"></pre>

==Browserspezifische Kürzel==

Für alle erkannten Browser sind Kürzel definiert, die eingefügt werden. Zusätzlich wird die Browserversion ausgelesen und die ersten beiden Teile der Versionsnummer (jeweils getrennt durch Punkte) ebenfalls ergänzt (siehe Beispiele).

Zugewiesen werden folgende Browserkürzel: opera, operamini, webtv, ie, iepocket, konqueror, icab, omniweb, firebird, firefox, iceweasel, shiretoko, mozilla, amaya, lynx, safari, iphone, ipod, ipad, chrome, android, blackberry, icecat, s60nokia, nokia

==Systemspezifische Kürzel==

Für alle erkannten Betriebssysteme wird ebenfalls ein Kürzel eingesetzt. Hier werden aktuell keine Versionen der Betriebssysteme unterschieden.

Folgende Betriebssystemkürzel werden gesetzt: windows, windowsce, apple, linux, os2, beos, iphone, ipod, ipad, blackberry, nokia, freebsd, openbsd, netbsd, sunos, opensolaris, android

==Sonstige Kürzel==

Für mobile Entgeräte wird zusätzlich das Kürzel "mobile" eingetragen.

Für AOL-Browser wird zusätzlich das Kürzel "aol" eingetragen.

==Sonstige Hinweise==
Wird ein Kürzel zweimal vergeben (beispielsweise iphone als Browser und System), wir es nur einmal gesetzt.

==Testen==
Zum einfachen Test kann die Firefox-Erweiterung [https://addons.mozilla.org/de/firefox/addon/59/ User Agent Switcher] verwendet werden. Für die Ausarbeitung des CSS ist ohnehin eine Installation der jeweiligen Browser zum Test notwendig.

==Diskussion==

===Vorteile===
* Gegenüber Conditional Comments: Erzeugt weniger HTTP-Requests
* Gegenüber CSS-Hacks: Erzeugt einfacher lesbaren und verständlichen CSS-Code
* Funktioniert mit allen aktuell implementierten Browsern, auch wenn für diese (noch) keine CSS-Hacks bekannt sind
* Erkennt auch Betriebssysteme, nicht nur Webbrowser
* Erkennt auch mobile Entgeräte und AOL-Browser

===Nachteile===
* Die Erkennung des Browsers setzt ausschließlich auf den mitgelieferten UserAgent-String des Webbrowsers. Diese kann leicht manipuliert werden. Allerdings führt dies dann nur zu einer fehlerhaften Darstellung im Browser der Person. Es führt also nur für diese eine Person zu einer fehlerhaften Darstellung.
* Die Liste der Browser und Systeme ist begrenzt und kann durch stete Weiterentwicklung nicht vollständig sein.
* Fügt ungenutzte CSS-Klassen ein und erzeugt so einen minimalen Code-Overhead.

----
erstellt von Jan Theofel

BrowserCSS

2010-09-08T21:40:14Z

Jantheofel: Sonstige Hinweise eingefügt

[[Category:Extensions]]
[[Category:CSS HOWTOS]]
{{ExtInfo
| Dev=Jan Theofel
| DevSite=[http://www.etes.de ETES GmbH]
| ExtVersion=1.0.0
| Version=2.9
| ERLink=http://www.contao.org/erweiterungsliste/view/browsercss.de.html
}}
=Browser- und systemspezifische CSS Klassen=

Die Erweiterung browsercss stellt eine einfache Möglichkeit um browser- und systemspezifische CSS-Selektoren zu definieren. Dazu werden die CSS-Klassen des body-Tags um Kürzel für Browser und Betriebssystem erweitert.

==Nutzung==
Zur Nutzung ist lediglich die Installation der Erweiterung [http://www.contao.org/erweiterungsliste/view/browsercss.de.html browsercss] notwendig. Die Erweiterung besitzt keine Einstellungen im Backend sondern fügt für alle Frontendausgaben die jeweiligen browser- bzw. systemspezifischen Kürzel als CSS-Klassen des body-Tags ein.

Beispiel mit Firefox 3.6.x unter Linux: <pre><body id="top" class="[...] firefox firefox3 firefox36 linux"></pre>

Beispiel mit Internet Explorer 6: <pre><body id="top" class="[...] blog ie ie6 ie60 windows"></pre>

Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 iphone"></pre>

==Browserspezifische Kürzel==

Für alle erkannten Browser sind Kürzel definiert, die eingefügt werden. Zusätzlich wird die Browserversion ausgelesen und die ersten beiden Teile der Versionsnummer (jeweils getrennt durch Punkte) ebenfalls ergänzt (siehe Beispiele).

Zugewiesen werden folgende Browserkürzel: opera, operamini, webtv, ie, iepocket, konqueror, icab, omniweb, firebird, firefox, iceweasel, shiretoko, mozilla, amaya, lynx, safari, iphone, ipod, ipad, chrome, android, blackberry, icecat, s60nokia, nokia

==Systemspezifische Kürzel==

Für alle erkannten Betriebssysteme wird ebenfalls ein Kürzel eingesetzt. Hier werden aktuell keine Versionen der Betriebssysteme unterschieden.

Folgende Betriebssystemkürzel werden gesetzt: windows, windowsce, apple, linux, os2, beos, iphone, ipod, ipad, blackberry, nokia, freebsd, openbsd, netbsd, sunos, opensolaris, android

==Sonstige Kürzel==

Für mobile Entgeräte wird zusätzlich das Kürzel "mobile" eingetragen.

Für AOL-Browser wird zusätzlich das Kürzel "aol" eingetragen.

==Sonstige Hinweise==
Wird ein Kürzel zweimal vergeben (beispielsweise iphone als Browser und System), wir es nur einmal gesetzt.

==Testen==
Zum einfachen Test kann die Firefox-Erweiterung [https://addons.mozilla.org/de/firefox/addon/59/ User Agent Switcher] verwendet werden. Für die Ausarbeitung des CSS ist ohnehin eine Installation der jeweiligen Browser zum Test notwendig.

==Diskussion==

===Vorteile===
* Gegenüber Conditional Comments: Erzeugt weniger HTTP-Requests
* Gegenüber CSS-Hacks: Erzeugt einfacher lesbaren und verständlichen CSS-Code
* Funktioniert mit allen aktuell implementierten Browsern, auch wenn für diese (noch) keine CSS-Hacks bekannt sind
* Erkennt auch Betriebssysteme, nicht nur Webbrowser
* Erkennt auch mobile Entgeräte und AOL-Browser

===Nachteile===
* Die Erkennung des Browsers setzt ausschließlich auf den mitgelieferten UserAgent-String des Webbrowsers. Diese kann leicht manipuliert werden. Allerdings führt dies dann nur zu einer fehlerhaften Darstellung im Browser der Person. Es führt also nur für diese eine Person zu einer fehlerhaften Darstellung.
* Die Liste der Browser und Systeme ist begrenzt und kann durch stete Weiterentwicklung nicht vollständig sein.
* Fügt ungenutzte CSS-Klassen ein und erzeugt so einen minimalen Code-Overhead.

----
erstellt von Jan Theofel

Kategorie:CSS HOWTOS

2010-09-08T21:25:32Z

Jantheofel: Die Seite wurde neu angelegt: „In dieser Kategorie werden alle Seiten gesammelt, welche ein HOWTO für CSS-Arbeiten in Contao darstellen.“

In dieser Kategorie werden alle Seiten gesammelt, welche ein HOWTO für CSS-Arbeiten in Contao darstellen.

BrowserCSS

2010-09-08T21:24:34Z

Jantheofel:

[[Category:Extensions]]
[[Category:CSS HOWTOS]]
{{ExtInfo
| Dev=Jan Theofel
| DevSite=[http://www.etes.de ETES GmbH]
| ExtVersion=1.0.0
| Version=2.9
| ERLink=http://www.contao.org/erweiterungsliste/view/browsercss.de.html
}}
=Browser- und systemspezifische CSS Klassen=

Die Erweiterung browsercss stellt eine einfache Möglichkeit um browser- und systemspezifische CSS-Selektoren zu definieren. Dazu werden die CSS-Klassen des body-Tags um Kürzel für Browser und Betriebssystem erweitert.

==Nutzung==
Zur Nutzung ist lediglich die Installation der Erweiterung [http://www.contao.org/erweiterungsliste/view/browsercss.de.html browsercss] notwendig. Die Erweiterung besitzt keine Einstellungen im Backend sondern fügt für alle Frontendausgaben die jeweiligen browser- bzw. systemspezifischen Kürzel als CSS-Klassen des body-Tags ein.

Beispiel mit Firefox 3.6.x unter Linux: <pre><body id="top" class="[...] firefox firefox3 firefox36 linux"></pre>

Beispiel mit Internet Explorer 6: <pre><body id="top" class="[...] blog ie ie6 ie60 windows"></pre>

Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 iphone"></pre>

==Browserspezifische Kürzel==

Für alle erkannten Browser sind Kürzel definiert, die eingefügt werden. Zusätzlich wird die Browserversion ausgelesen und die ersten beiden Teile der Versionsnummer (jeweils getrennt durch Punkte) ebenfalls ergänzt (siehe Beispiele).

Zugewiesen werden folgende Browserkürzel: opera, operamini, webtv, ie, iepocket, konqueror, icab, omniweb, firebird, firefox, iceweasel, shiretoko, mozilla, amaya, lynx, safari, iphone, ipod, ipad, chrome, android, blackberry, icecat, s60nokia, nokia

==Systemspezifische Kürzel==

Für alle erkannten Betriebssysteme wird ebenfalls ein Kürzel eingesetzt. Hier werden aktuell keine Versionen der Betriebssysteme unterschieden.

Folgende Betriebssystemkürzel werden gesetzt: windows, windowsce, apple, linux, os2, beos, iphone, ipod, ipad, blackberry, nokia, freebsd, openbsd, netbsd, sunos, opensolaris, android

==Sonstige Kürzel==

Für mobile Entgeräte wird zusätzlich das Kürzel "mobile" eingetragen.

Für AOL-Browser wird zusätzlich das Kürzel "aol" eingetragen.

==Testen==
Zum einfachen Test kann die Firefox-Erweiterung [https://addons.mozilla.org/de/firefox/addon/59/ User Agent Switcher] verwendet werden. Für die Ausarbeitung des CSS ist ohnehin eine Installation der jeweiligen Browser zum Test notwendig.

==Diskussion==

===Vorteile===
* Gegenüber Conditional Comments: Erzeugt weniger HTTP-Requests
* Gegenüber CSS-Hacks: Erzeugt einfacher lesbaren und verständlichen CSS-Code
* Funktioniert mit allen aktuell implementierten Browsern, auch wenn für diese (noch) keine CSS-Hacks bekannt sind
* Erkennt auch Betriebssysteme, nicht nur Webbrowser
* Erkennt auch mobile Entgeräte und AOL-Browser

===Nachteile===
* Die Erkennung des Browsers setzt ausschließlich auf den mitgelieferten UserAgent-String des Webbrowsers. Diese kann leicht manipuliert werden. Allerdings führt dies dann nur zu einer fehlerhaften Darstellung im Browser der Person. Es führt also nur für diese eine Person zu einer fehlerhaften Darstellung.
* Die Liste der Browser und Systeme ist begrenzt und kann durch stete Weiterentwicklung nicht vollständig sein.
* Fügt ungenutzte CSS-Klassen ein und erzeugt so einen minimalen Code-Overhead.

----
erstellt von Jan Theofel

BrowserCSS

2010-09-08T21:17:26Z

Jantheofel: Sonstige Kürzel geschrieben

[[Category:Extensions]]
{{ExtInfo
| Dev=Jan Theofel
| DevSite=[http://www.etes.de ETES GmbH]
| ExtVersion=1.0.0
| Version=2.9
| ERLink=http://www.contao.org/erweiterungsliste/view/browsercss.de.html
}}
=Browser- und systemspezifische CSS Klassen=

Die Erweiterung browsercss stellt eine einfache Möglichkeit um browser- und systemspezifische CSS-Selektoren zu definieren. Dazu werden die CSS-Klassen des body-Tags um Kürzel für Browser und Betriebssystem erweitert.

==Nutzung==
Zur Nutzung ist lediglich die Installation der Erweiterung [http://www.contao.org/erweiterungsliste/view/browsercss.de.html browsercss] notwendig. Die Erweiterung besitzt keine Einstellungen im Backend sondern fügt für alle Frontendausgaben die jeweiligen browser- bzw. systemspezifischen Kürzel als CSS-Klassen des body-Tags ein.

Beispiel mit Firefox 3.6.x unter Linux: <pre><body id="top" class="[...] firefox firefox3 firefox36 linux"></pre>

Beispiel mit Internet Explorer 6: <pre><body id="top" class="[...] blog ie ie6 ie60 windows"></pre>

Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 iphone"></pre>

==Browserspezifische Kürzel==

Für alle erkannten Browser sind Kürzel definiert, die eingefügt werden. Zusätzlich wird die Browserversion ausgelesen und die ersten beiden Teile der Versionsnummer (jeweils getrennt durch Punkte) ebenfalls ergänzt (siehe Beispiele).

Zugewiesen werden folgende Browserkürzel: opera, operamini, webtv, ie, iepocket, konqueror, icab, omniweb, firebird, firefox, iceweasel, shiretoko, mozilla, amaya, lynx, safari, iphone, ipod, ipad, chrome, android, blackberry, icecat, s60nokia, nokia

==Systemspezifische Kürzel==

Für alle erkannten Betriebssysteme wird ebenfalls ein Kürzel eingesetzt. Hier werden aktuell keine Versionen der Betriebssysteme unterschieden.

Folgende Betriebssystemkürzel werden gesetzt: windows, windowsce, apple, linux, os2, beos, iphone, ipod, ipad, blackberry, nokia, freebsd, openbsd, netbsd, sunos, opensolaris, android

==Sonstige Kürzel==

Für mobile Entgeräte wird zusätzlich das Kürzel "mobile" eingetragen.

Für AOL-Browser wird zusätzlich das Kürzel "aol" eingetragen.

==Testen==
Zum einfachen Test kann die Firefox-Erweiterung [https://addons.mozilla.org/de/firefox/addon/59/ User Agent Switcher] verwendet werden. Für die Ausarbeitung des CSS ist ohnehin eine Installation der jeweiligen Browser zum Test notwendig.

==Diskussion==

===Vorteile===
* Gegenüber Conditional Comments: Erzeugt weniger HTTP-Requests
* Gegenüber CSS-Hacks: Erzeugt einfacher lesbaren und verständlichen CSS-Code
* Funktioniert mit allen aktuell implementierten Browsern, auch wenn für diese (noch) keine CSS-Hacks bekannt sind
* Erkennt auch Betriebssysteme, nicht nur Webbrowser
* Erkennt auch mobile Entgeräte und AOL-Browser

===Nachteile===
* Die Erkennung des Browsers setzt ausschließlich auf den mitgelieferten UserAgent-String des Webbrowsers. Diese kann leicht manipuliert werden. Allerdings führt dies dann nur zu einer fehlerhaften Darstellung im Browser der Person. Es führt also nur für diese eine Person zu einer fehlerhaften Darstellung.
* Die Liste der Browser und Systeme ist begrenzt und kann durch stete Weiterentwicklung nicht vollständig sein.
* Fügt ungenutzte CSS-Klassen ein und erzeugt so einen minimalen Code-Overhead.

----
erstellt von Jan Theofel

BrowserCSS

2010-09-08T21:16:35Z

Jantheofel: Systemspezifische Kürzel geschrieben

[[Category:Extensions]]
{{ExtInfo
| Dev=Jan Theofel
| DevSite=[http://www.etes.de ETES GmbH]
| ExtVersion=1.0.0
| Version=2.9
| ERLink=http://www.contao.org/erweiterungsliste/view/browsercss.de.html
}}
=Browser- und systemspezifische CSS Klassen=

Die Erweiterung browsercss stellt eine einfache Möglichkeit um browser- und systemspezifische CSS-Selektoren zu definieren. Dazu werden die CSS-Klassen des body-Tags um Kürzel für Browser und Betriebssystem erweitert.

==Nutzung==
Zur Nutzung ist lediglich die Installation der Erweiterung [http://www.contao.org/erweiterungsliste/view/browsercss.de.html browsercss] notwendig. Die Erweiterung besitzt keine Einstellungen im Backend sondern fügt für alle Frontendausgaben die jeweiligen browser- bzw. systemspezifischen Kürzel als CSS-Klassen des body-Tags ein.

Beispiel mit Firefox 3.6.x unter Linux: <pre><body id="top" class="[...] firefox firefox3 firefox36 linux"></pre>

Beispiel mit Internet Explorer 6: <pre><body id="top" class="[...] blog ie ie6 ie60 windows"></pre>

Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 iphone"></pre>

==Browserspezifische Kürzel==

Für alle erkannten Browser sind Kürzel definiert, die eingefügt werden. Zusätzlich wird die Browserversion ausgelesen und die ersten beiden Teile der Versionsnummer (jeweils getrennt durch Punkte) ebenfalls ergänzt (siehe Beispiele).

Zugewiesen werden folgende Browserkürzel: opera, operamini, webtv, ie, iepocket, konqueror, icab, omniweb, firebird, firefox, iceweasel, shiretoko, mozilla, amaya, lynx, safari, iphone, ipod, ipad, chrome, android, blackberry, icecat, s60nokia, nokia

==Systemspezifische Kürzel==

Für alle erkannten Betriebssysteme wird ebenfalls ein Kürzel eingesetzt. Hier werden aktuell keine Versionen der Betriebssysteme unterschieden.

Folgende Betriebssystemkürzel werden gesetzt: windows, windowsce, apple, linux, os2, beos, iphone, ipod, ipad, blackberry, nokia, freebsd, openbsd, netbsd, sunos, opensolaris, android

==Sonstige Kürzel==

==Testen==
Zum einfachen Test kann die Firefox-Erweiterung [https://addons.mozilla.org/de/firefox/addon/59/ User Agent Switcher] verwendet werden. Für die Ausarbeitung des CSS ist ohnehin eine Installation der jeweiligen Browser zum Test notwendig.

==Diskussion==

===Vorteile===
* Gegenüber Conditional Comments: Erzeugt weniger HTTP-Requests
* Gegenüber CSS-Hacks: Erzeugt einfacher lesbaren und verständlichen CSS-Code
* Funktioniert mit allen aktuell implementierten Browsern, auch wenn für diese (noch) keine CSS-Hacks bekannt sind
* Erkennt auch Betriebssysteme, nicht nur Webbrowser
* Erkennt auch mobile Entgeräte und AOL-Browser

===Nachteile===
* Die Erkennung des Browsers setzt ausschließlich auf den mitgelieferten UserAgent-String des Webbrowsers. Diese kann leicht manipuliert werden. Allerdings führt dies dann nur zu einer fehlerhaften Darstellung im Browser der Person. Es führt also nur für diese eine Person zu einer fehlerhaften Darstellung.
* Die Liste der Browser und Systeme ist begrenzt und kann durch stete Weiterentwicklung nicht vollständig sein.
* Fügt ungenutzte CSS-Klassen ein und erzeugt so einen minimalen Code-Overhead.

----
erstellt von Jan Theofel

BrowserCSS

2010-09-08T21:15:00Z

Jantheofel: Browserspezifische Kürzel erstellt

[[Category:Extensions]]
{{ExtInfo
| Dev=Jan Theofel
| DevSite=[http://www.etes.de ETES GmbH]
| ExtVersion=1.0.0
| Version=2.9
| ERLink=http://www.contao.org/erweiterungsliste/view/browsercss.de.html
}}
=Browser- und systemspezifische CSS Klassen=

Die Erweiterung browsercss stellt eine einfache Möglichkeit um browser- und systemspezifische CSS-Selektoren zu definieren. Dazu werden die CSS-Klassen des body-Tags um Kürzel für Browser und Betriebssystem erweitert.

==Nutzung==
Zur Nutzung ist lediglich die Installation der Erweiterung [http://www.contao.org/erweiterungsliste/view/browsercss.de.html browsercss] notwendig. Die Erweiterung besitzt keine Einstellungen im Backend sondern fügt für alle Frontendausgaben die jeweiligen browser- bzw. systemspezifischen Kürzel als CSS-Klassen des body-Tags ein.

Beispiel mit Firefox 3.6.x unter Linux: <pre><body id="top" class="[...] firefox firefox3 firefox36 linux"></pre>

Beispiel mit Internet Explorer 6: <pre><body id="top" class="[...] blog ie ie6 ie60 windows"></pre>

Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 iphone"></pre>

==Browserspezifische Kürzel==

Für alle erkannten Browser sind Kürzel definiert, die eingefügt werden. Zusätzlich wird die Browserversion ausgelesen und die ersten beiden Teile der Versionsnummer (jeweils getrennt durch Punkte) ebenfalls ergänzt (siehe Beispiele).

Zugewiesen werden folgende Browserkürzel: opera, operamini, webtv, ie, iepocket, konqueror, icab, omniweb, firebird, firefox, iceweasel, shiretoko, mozilla, amaya, lynx, safari, iphone, ipod, ipad, chrome, android, blackberry, icecat, s60nokia, nokia

==Systemspezifische Kürzel==

==Sonstige Kürzel==

==Testen==
Zum einfachen Test kann die Firefox-Erweiterung [https://addons.mozilla.org/de/firefox/addon/59/ User Agent Switcher] verwendet werden. Für die Ausarbeitung des CSS ist ohnehin eine Installation der jeweiligen Browser zum Test notwendig.

==Diskussion==

===Vorteile===
* Gegenüber Conditional Comments: Erzeugt weniger HTTP-Requests
* Gegenüber CSS-Hacks: Erzeugt einfacher lesbaren und verständlichen CSS-Code
* Funktioniert mit allen aktuell implementierten Browsern, auch wenn für diese (noch) keine CSS-Hacks bekannt sind
* Erkennt auch Betriebssysteme, nicht nur Webbrowser
* Erkennt auch mobile Entgeräte und AOL-Browser

===Nachteile===
* Die Erkennung des Browsers setzt ausschließlich auf den mitgelieferten UserAgent-String des Webbrowsers. Diese kann leicht manipuliert werden. Allerdings führt dies dann nur zu einer fehlerhaften Darstellung im Browser der Person. Es führt also nur für diese eine Person zu einer fehlerhaften Darstellung.
* Die Liste der Browser und Systeme ist begrenzt und kann durch stete Weiterentwicklung nicht vollständig sein.
* Fügt ungenutzte CSS-Klassen ein und erzeugt so einen minimalen Code-Overhead.

----
erstellt von Jan Theofel

BrowserCSS

2010-09-08T21:11:30Z

Jantheofel: /* Nutzung */

[[Category:Extensions]]
{{ExtInfo
| Dev=Jan Theofel
| DevSite=[http://www.etes.de ETES GmbH]
| ExtVersion=1.0.0
| Version=2.9
| ERLink=http://www.contao.org/erweiterungsliste/view/browsercss.de.html
}}
=Browser- und systemspezifische CSS Klassen=

Die Erweiterung browsercss stellt eine einfache Möglichkeit um browser- und systemspezifische CSS-Selektoren zu definieren. Dazu werden die CSS-Klassen des body-Tags um Kürzel für Browser und Betriebssystem erweitert.

==Nutzung==
Zur Nutzung ist lediglich die Installation der Erweiterung [http://www.contao.org/erweiterungsliste/view/browsercss.de.html browsercss] notwendig. Die Erweiterung besitzt keine Einstellungen im Backend sondern fügt für alle Frontendausgaben die jeweiligen browser- bzw. systemspezifischen Kürzel als CSS-Klassen des body-Tags ein.

Beispiel mit Firefox 3.6.x unter Linux: <pre><body id="top" class="[...] firefox firefox3 firefox36 linux"></pre>

Beispiel mit Internet Explorer 6: <pre><body id="top" class="[...] blog ie ie6 ie60 windows"></pre>

Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 iphone"></pre>

==Browserspezifische Kürzel==

==Systemspezifische Kürzel==

==Sonstige Kürzel==

==Testen==
Zum einfachen Test kann die Firefox-Erweiterung [https://addons.mozilla.org/de/firefox/addon/59/ User Agent Switcher] verwendet werden. Für die Ausarbeitung des CSS ist ohnehin eine Installation der jeweiligen Browser zum Test notwendig.

==Diskussion==

===Vorteile===
* Gegenüber Conditional Comments: Erzeugt weniger HTTP-Requests
* Gegenüber CSS-Hacks: Erzeugt einfacher lesbaren und verständlichen CSS-Code
* Funktioniert mit allen aktuell implementierten Browsern, auch wenn für diese (noch) keine CSS-Hacks bekannt sind
* Erkennt auch Betriebssysteme, nicht nur Webbrowser
* Erkennt auch mobile Entgeräte und AOL-Browser

===Nachteile===
* Die Erkennung des Browsers setzt ausschließlich auf den mitgelieferten UserAgent-String des Webbrowsers. Diese kann leicht manipuliert werden. Allerdings führt dies dann nur zu einer fehlerhaften Darstellung im Browser der Person. Es führt also nur für diese eine Person zu einer fehlerhaften Darstellung.
* Die Liste der Browser und Systeme ist begrenzt und kann durch stete Weiterentwicklung nicht vollständig sein.
* Fügt ungenutzte CSS-Klassen ein und erzeugt so einen minimalen Code-Overhead.

----
erstellt von Jan Theofel

BrowserCSS

2010-09-08T21:07:46Z

Jantheofel: Die Seite wurde neu angelegt: „Category:Extensions {{ExtInfo | Dev=Jan Theofel | DevSite=[http://www.etes.de ETES GmbH] | ExtVersion=1.0.0 | Version=2.9 | ERLink=http://www.contao.org/erwei…“

Google Analytics

2010-08-23T17:36:53Z

Jantheofel: Abschnitt Alternativen geformt, Verweis auf Modul ergänzt, Typo entfernt

[[Category:Core]]
{{AppliesTo
|TLVersion=bis 2.8.x
|Version=ab 2.9
}}

=Allgemeines=
[[w:de:Google_Analytics|Google Analytics]] ist ein kostenloser Dienst, welcher der Analyse von Zugriffen auf Webseiten dient (Es gilt nur ein monatliches Limit an Seitenaufrufen in Höhe von 5.000.000 Aufrufen).

{{Hinweis|Um Verfälschungen auszuschließen, wird der Google Analytics Code erst im Frontend angezeigt, wenn man sich aus dem Backend ausgeloggt hat.}}

==Alternativen==

#Eine Alternative zu Google Analytics stellt [[Piwik]] dar.
#Statt der Anapssung an den Templates kann die Erweiterung [[GoogleAnalytics]] genutzt werden.

==Rechtliches==
Es ist rechtlich noch nicht klar, ob es nun verboten ist, die Daten in Deutschland mit Google-Analytics zu erfassen. 2 Dinge sprechen erst einmal dagegen:
#Die Google Server sind nicht unbedingt in Deutschland.
#Die IP wird erfasst und die gewonnenen Daten können nicht einfach von einem Seitenbetreiber gelöscht werden, wenn ein Besucher dies verlangt.

Es gibt inzwischen ein Addon für einige Browser von Google, die Analytics Datensammlung deaktivieren: http://tools.google.com/dlpage/gaoptout?hl=de

Wer sicher gehen möchte, der kann ab Contao 2.9 die IP von den Besuchern anonymisieren und so dem Datenschutz genügen (siehe [[#IP-Adressen_anonymisieren|IP-Adresse anonymisieren]]).

{{Achtung|'''Dies ist keine Rechtsberatung.''' Detaillierte Angaben zur rechtlichen Situation beim Einsatz von Google Analytics sind von jeder selbst bei einem Rechtsanwalt zu erfragen (am besten in dem Fachgebiet Internet).}}

=Google Analytics Konto erstellen=
Um den Dienst ''Google Analytics'' (nachfolgend GA) nutzen zu können, muss man sich zuerst ein GA-Konto [http://www.google.com/analytics/ erstellen].<br />
Nach dem Erstellen eines Accounts gibt man GA die Domain bekannt, auf der der Dienst laufen soll. Dazu klickt man auf ''Neues Konto'' ...

[[Datei:ga_createaccount.png|Google Analytics Account erstellen]]

... und anschließend auf ''Anmelden''.

[[Datei:ga_login.png|Webseite hinzufügen]]

Anschließend erfolgen die Angaben zur Webseite, auf der GA laufen soll.

[[Datei:ga_websitesettings.png|Webseiten Angaben]]

Nachdem man den Geschäftsbedingungen zugestimmt hat, kommt man zur Seite mit dem Tracking-Code. In diesem Code notiert man sich die Account-Nummer; die wird später noch benötigt.

{{Hinweis| In den Google Geschäftsbedingungen (PUnkt 8.1) wird man Aufgefordert einen dort angegebenen Satz auf seiner Webseite einzubringen. Das sollte man auf jeden Fall machen, da es dort um die Datenschutzrichtlinien geht, die eh jeder auf seiner Internetseite auszeichnen sollte! }}

[[Datei:ga_trackingcode.png|Tracking Code]]

Nach dem Speichern der Eingaben kommt man zur Übersicht, wo nun die erstellte Webseite auf scheint.

[[Datei:ga_overview.png]]

=Typolight bis 2.8.x=
Um GA in TYPOlight bis 2.8.x einzubinden, bearbeitet man das entsprechende Seitenlayout und fügt unter ''Experten-Einstellungen'' im Feld ''Google Analytics Id'' die vorhin notierte GA-ID ein.

[[Datei:ga_layout_tl.png|Seitenlayout]]

Anschließend speichert und schließt man das Layout.

=Contao ab 2.9=
Seit Contao 2.9 wird GA über das Template ''moo_analytics.tpl'' eingebunden. Wie man ein Template über den im Core integrierten Template-Editor einbindet, ist [[Templates_bearbeiten|hier]] beschrieben. Nachdem das Template ausgewählt wurde, wird das Template bearbeitet.

[[Datei:ga_templateedit.png|Template bearbeiten]]

Wie schon in dem Kommentar des Templates vermerkt ist, braucht nur die im Code eingefügte Blind-ID (UA-XXXXX-X) gegen die vorhin notierte GA-ID ausgetauscht werden. Anschließend kann das Template gespeichert und geschlossen werden.

Nun muss im Seitenlayout das Script eingebunden werden. Dazu setzt man unter ''Skript-Einstellungen'' einen Haken bei dem Punkt ''moo_analytics''. Es muss darauf geachtet werden, dass dieses Skript als letztes eingebunden wird! Anschließend wird das Layout gespeichert und geschlossen.

[[Datei:ga_layout.png|Seitenlayout]]

==IP-Adressen anonymisieren==
Aus Datenschutzgründen bietet GA seit geraumer Zeit die Möglichkeit, die geloggten IP-Adressen der Besucher zu anonymisieren. Dazu muss nochmal das Template bearbeitet werden und zwischen der Zeile <code>_gaq.push(['_setAccount', 'UA-XXXXX-X']);</code> und der Zeile <code>_gaq.push(['_trackPageview']);</code> eine neue Zeile mit folgendem Inhalt eingefügt werden:

<pre>_gaq.push(['_gat._anonymizeIp']);</pre>

Das ganze Template sieht dann wie folgt aus:
<pre>
<?php

/**
* To use the script, replace UA-XXXXX-X in the code below with your Google
* Analytics ID and then add it to a Contao page layout. Make sure to insert
* it as the last moo_ script (!) and note that it will only be added to the
* page if you are not logged into the back end.
*/
if (!BE_USER_LOGGED_IN && sha1(session_id() . (!$GLOBALS['TL_CONFIG']['disableIpCheck'] ? $this->Environment->ip : '') . 'BE_USER_AUTH') != $this->Input->cookie('BE_USER_AUTH')):

?>

<script type="text/javascript">
<![CDATA[//><!]]>
</script>
<?php endif; ?>
</pre>

Dynamische Seitenbilder mit Insert-Tags

2010-07-19T06:22:04Z

Jantheofel: Typo gefixt

[[Category:Admin HOWTOS]]

=Möglichkeiten=

Es gibt verschieden Möglichkeiten in Contao dynamisch Bilder auf einer Seite darzustellen. Hier werden verschiedene Möglichkeiten gezeigt, wie man auf jeder Seite ein anderes Bild haben kann, ohne eine extra Erweiterung nutzen zu müssen. Zusätzlich sieht man hier sehr gut, wie kreativ man mit Contao und Lösungen für sich finden kann.

Natürlich gibt es auch schon eine passende Erweiterung für solche Bedürfnisse: pageimage - Seitenbild

=Grundlagen=

* deutsche Beschreibung der [http://www.contao.org/typolight-insert-tags.html Inserttags]
* Man sollte sich mit den Grundbegriffen von Contao auskennen ;-)
* Natürlich HTML und CSS

=Ein Bild über das Seitenlayout und Artikel einbinden=

Man kann ein Bild auch mit einem Artikel auf einer Seite einbinden. Dazu muss man nur unter Seitenlayout das Layout bearbeiten und noch einen Artikel an der Stelle einbinden, wo man das Bild dann später einmal haben möchte.

[[Datei:dynamicpics-01.png|Seitenlayout]]

Dann hat man die Möglichkeit bei einem neuen Artikel in den Einstellungen auszuwählen, an welcher Stelle (Hauptspalte, Kopfzeile,...; je nachdem, wo man das Modul im Seitenlayout positioniert hat) der Artikel angezeigt werden soll.

[[Datei:dynamicpics-02.png|Artikelposition]]

Anschließend erstellt man in dem Artikel ein ContentElement "Bild". Das muss dann für jede Seite gemacht werden. Ansonsten wird kein Bild angezeigt.

[[Datei:dynamicpics-03.png|CE Pic]]

Für diejenigen, die ein Bild mehrfach verwenden wollen, kann es sich lohnen, dieses über eine eigenes Modul (eigener HTML-Code) verfügbar zu machen. Dann braucht man als ContentElement nur noch das Modul auszuwählen und hat dann schon alle Parameter so wie man diese haben möchte.

=Bild per CSS im Background oder Bild per Inserttag im img-Tag ?=

Das kommt immer ganz darauf an, welches Resultat man erreichen möchte. Es werden anschließend beide Wege beschrieben.

== Ein Bild über CSS einblenden ==
Um auf einer Seite ein dynamisches Bild anzeigen zu lassen, kann man der Seite eine spezielle CSS-Klasse geben. Dazu wechselt man in die Seitenstruktur, bearbeitet die entsprechende Seite und fügt unter den Experten-Einstellungen die entsprechende Klasse hinzu (in diesem Fall die Klasse .headerpic-grün). (Diese Möglichkeit wurde erst ab TYPOlight-Version 2.6? eingeführt.)

[[Datei:dynamicpics-04.png|Seitenklasse]]

Anschließend fügt man im entsprechenden CSS die Anweisung für diese Klasse hinzu.
<pre>.headerpic-green #header {background: #fff url(tl_files/header/bildfuerdieseseite.png) no-repeat top left;}</pre>
Diese Schritte wiederholt man für jede Seite, wobei auch die selbe Klasse mehrfach vergeben werden kann.

==Ein Bild über einen Inserttag einbinden==

Hier kann man auch direkt im eigenen Template arbeiten wenn man dies möchte bzw. sollte man schon eines angelegt haben. Ansonsten empfiehlt sich der Weg über ein eigenes HTML-Code Modul.

===Für jede Seite ein Bild===

Man erstellt ein Module des Types "Eigener HTML-Code" und fügt folgenden Code ein:
<pre><img src="/tl_files/header/{{env::page_alias}}.png" alt="{{env::page_title}}" /></pre>
Im Seitenlayout weist man dann dieses Module dem Header zu.

[[Datei:dynamicpics-05.png|Eigenes Modul im Seitenlayout]]

''env::page_alias'' gibt den Alias der aktuellen Seite aus. ''env::page_title'' gibt den Titel der aktuellen Seite aus. Jetzt braucht man nur für jede Seite ein Bild in dem Ordner /tl_files/header anlegen und es so benennen wie der alias der Seite ist, auf dem das Bild zu sehen sein soll. Im Grunde kann es auch immer das selbe Bild mit einem anderen Namen sein. ;-)

Beispiel: Die Seite A heisst "red", die Seite B heisst "green" und die Seite C heisst "blue". Man hat im Ordner /tl_files/header/ 3 Bilder; das erste heisst red.png, das zweite green.png und das dritte blue.png. Mit dieser hier beschriebenen Methode wird nun beim Aufruf der Seite A automatisch das Bild red.png gezeigt, beim Aufruf der Seite B das Bild green.png und beim Aufruf der Seite C das Bild blue.png.

===Für jede Hauptseite ein Bild===

Die Vorgehensweise ist ident wie oben: man erstellt ein Modul "Eigener HTML-Code" und bindet dieses dann im Seitelayout ein und weist es dem Header zu. Das einzige, was sich ändert, ist der Code im Module "Eigener HTML-Code":
<pre><img src="/tl_files/header/{{env::main_alias}}.png" alt="{{env::main_title}}" /></pre>

''env::main_alias'' gibt den Alias der übergeordneten Hauptseite aus. ''env::main_title'' gibt den Titel der übergeordneten Hauptseite aus. Jetzt braucht man nur für jede Hauptseite ein Bild in dem Ordner header anlegen und es so benennen wie der alias der Seite ist auf dem das Bild zu sehen sein braucht. Im Grunde kann es auch immer das selbe Bild mit einem anderen Namen sein ;-)

===Spezialfall: für jede Hauptseite 2 (oder mehr) verschiedene Bilder===

Hier wird der Ordner einfach durch den Inserttag ersetzt:

<pre><img src="/tl_files/header/{{env::main_alias}}/rechtes_bild.png" alt="{{env::main_title}} - {{env::page_alias}}" />
<img src="/tl_files/header/{{env::main_alias}}/linkes_bild.png" alt="{{env::main_title}} - {{env::page_alias}}" /></pre>

Jetzt muss man natürlich für jeden Hauptpunkt einen extra Ordner anlegen und da drinn die Bilder mit den passenden Namen anlegen. Zu beachten ist hier, das der alt-Inhalt vom main_title und page_alias genommen wird, damit man ein wenig Abwechslung hat ;-)

Aber das kann jeder natürlich so machen, wie er möchte.

===Spezialfall: mehr Ordnung durch verschiedene Dynamische Ordner===

Richtig schön wirds dann mit verschiedenen Bildern in verschiedenen Ordnern, um richtig Ordnung zu halten bei größeren Seiten:

<pre><img src="/tl_files/header/{{env::main_alias}}/{{env::page_alias}}.png" alt="{{env::main_title}} - {{env::page_alias}}" /></pre>

===Bei eigenem Seitentemplate kann man auch einen Insertag im Body verwenden===

Klasse:

<pre><body id="top"<?php if ($this->class): ?> class=" {{env::page_alias}}<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
</pre>
ID:

<pre><body id="top {{env::page_alias}}"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
</pre>
Natürlich geht das auch wieder mit ''env::main_alias''

===Sprachabhängig?===

Das Beste ist: Das Ganze ist durch den page_alias auch schon sprachabhängig, da jede andere Sprache auch einen anderen Alias haben wird (Cave: zum Teil unterscheiden sich die Seiten nur durch Zahlen, die Contao automatisch generiert). Wenn man zum Beispiel auf dem Bild auch noch Text hat, kann das sehr praktisch sein.

--- Tutorial erstellt von --[[Benutzer:MacKP|MacKP]] 23:04, 10. Mär. 2010 (UTC)

GoogleAnalytics

2010-07-14T23:09:48Z

Jantheofel: Die Seite wurde neu angelegt: „Category:Admin HOWTOS {{AppliesTo|TLVersion=ab 2.9}} =Google Analytics einbinden= ==Integration durch Templateanpassungen== Seit Contao 2.9 ist die Unterst…“

[[Category:Admin HOWTOS]]
{{AppliesTo|TLVersion=ab 2.9}}
=Google Analytics einbinden=

==Integration durch Templateanpassungen==

Seit Contao 2.9 ist die Unterstützung für Google Analytics aus dem Seitenlayout entfernt worden. Der im Core vorgesehene Weg ist, das Template moo_analytics zu editieren und dieses als MooTools-Template in das Seitenlayout einzubinden. (siehe [http://www.contao.org/neuigkeiten/items/contao_2-9-0.html zweiten Abschnitt hier]).

==Integration durch Erweiterung googleanalytics==

Alternativ steht die Erweiterung [http://www.contao.org/erweiterungsliste/view/googleanalytics.de.html googleanalytics] zur Verfügung. Diese ist aktuell nur mit Contao 2.9 getestet, sollte aber auch unter 2.8 einsatzfähig sein.

Diese bietet folgende Vorteile:
* Keine Anpassung an Templates notwendig
* Mehrere IDs im Multidomainbetrieb ohne verschiedene Seitenlayouts möglich
* Anonymisierung der IP Adresse möglich

Zur Nutzung bitte wie folgt vorgehen:
* Google Analytics ID ermitteln (siehe unten)
* Zu bearbeitende Wurzelseite in der Seitenstruktur öffnen
* Im Abschnitt "Google Analytics" die Google Analytics ID eintragen
* Wenn gewünscht das Häckchen zur Anonymisierung der IP-Adresse anhaken
* Nicht vergessen: Datenschutzhinweise aus den Google Analytics AGB müssen in die Webseite eingebaut werden!

==Google Analytics ID ermitteln==
* Neues [https://www.google.com/analytics/ Google Analytics] Konto anlegen (wenn noch nicht vorhanden)
* Die gewünschte Domain in Google Analytics eintragen
* Auf der [https://www.google.com/analytics/settings/home Startseite von GA] die Domain anklicken.
* Dort rechts auf "Bearbeiten" gehen
* Rechts oben auf "Status prüfen" klicken
* Den Wert "Web-Property-ID" auslesen (Format: UA-xxxxxx-x)

----
erstellt von Jan Theofel, [http://www.etes.de ETES GmbH]