CSS - Versionsgeschichte

Sdroste: /* Selbsterstellte Stylesheets in das Framework importieren */

2013-02-25T11:11:35Z

‎Selbsterstellte Stylesheets in das Framework importieren

Sdroste: /* Eigene CSS-Dateien verwenden */

2013-02-25T11:10:34Z

‎Eigene CSS-Dateien verwenden

Lucina: Typografie

2012-08-14T13:32:18Z

Typografie

Lucina: /* @media mit dem Contao-Framework */

2012-02-22T13:10:15Z

‎@media mit dem Contao-Framework

Lucina: /* @media mit dem Contao-Framework */

2012-02-22T12:47:22Z

‎@media mit dem Contao-Framework

Lucina: /* @media mit dem Contao-Framework */

2012-02-22T12:45:23Z

‎@media mit dem Contao-Framework

Lucina: /* Eigene CSS-Dateien verwenden */

2012-02-20T13:44:29Z

‎Eigene CSS-Dateien verwenden

Lucina: /* CSS mit dem Contao-Framework */

2012-02-20T13:36:32Z

‎CSS mit dem Contao-Framework

Lucina: /* @media mit dem Contao-Framework */

2012-02-07T17:22:25Z

‎@media mit dem Contao-Framework

Lucina am 17. Januar 2012 um 20:50 Uhr

2012-01-17T20:50:31Z

@@ Zeile 64: / Zeile 64: @@
 [[Datei:be_css_seitenlayout.jpg|CSS im Seitenlayout einbinden]]
-Das Framework bietet auch die Möglichkeit, selbst erstellte Stylesheets in das Framework zu importieren. Dazu muss die vorher erstellte CSS-Datei per FTP nach /tl_files/ hochgeladen werden. Anschliessend kann man diese im Backend --> Layout --> Stylesheets über den Button ''CSS-Import'' importieren.
+Das Framework bietet auch die Möglichkeit, selbst erstellte Stylesheets in das Framework zu importieren. Dazu muss die vorher erstellte CSS-Datei per FTP nach /files/ hochgeladen werden. Anschliessend kann man diese im Backend --> Layout --> Stylesheets über den Button ''CSS-Import'' importieren.
 [[Datei:be_css.jpg|Contao Stylesheet Editor]]

@@ Zeile 5: / Zeile 5: @@
 ==Eigene CSS-Dateien verwenden==
-Wer lieber mit einem Editor als mit dem Framework arbeitet, kann selbst seine eigenen CSS-Dateien anlegen und verwalten. Dazu müssen die verwendeten CSS-Dateien einfach per FTP in einen Ordner (z.B /tl_files/css/) hochgeladen werden. Diese Dateien werden dann im Contao-Backend im Bereich "Seitenlayout" im entsprechenden Layout unter dem Punkt "Experten-Einstellungen --> zusätzliche <head>-Tags" mit folgendem Code eingebunden:
+Wer lieber mit einem Editor als mit dem Framework arbeitet, kann selbst seine eigenen CSS-Dateien anlegen und verwalten. Dazu müssen die verwendeten CSS-Dateien einfach per FTP in einen Ordner (z.B /files/css/) hochgeladen werden. Diese Dateien werden dann im Contao-Backend im Bereich "Seitenlayout" im entsprechenden Layout unter dem Punkt "Experten-Einstellungen --> zusätzliche <head>-Tags" mit folgendem Code eingebunden:
 <source lang="html4strict">
-<link media="screen" type="text/css" href="tl_files/css/dateiname.css" rel="stylesheet">
+<link media="screen" type="text/css" href="files/css/dateiname.css" rel="stylesheet">
 </source>
 {{Achtung|Prinzipiell können die Dateien überall abgelegt werden. Wenn man sie jedoch in das Root-Verzeichnis ablegt, werden sie von Contao automatisch gelöscht.}}
 Es gibt 2 Möglichkeiten, dem entgegenzuwirken:
-*Entweder man legt die Dateien in einem anderen Verzeichnis ab (z.B. /tl_files/ oder /css/)
+*Entweder man legt die Dateien in einem anderen Verzeichnis ab (z.B. /files/ oder /css/)
 *oder man sagt Contao, dass es die CSS-Dateien nicht anrühren soll. Dies geschieht mit folgendem Eintrag in der Datei /system/config/localconfig.php '''unterhalb''' der Zeile ''### INSTALL SCRIPT STOP ###''
 <source lang="php">

@@ Zeile 2: / Zeile 2: @@
 [[Category:Admin_HOWTOS]]
 [[Category:CSS_HOWTOS]]
-Man hat in Contao 2 Möglichkeiten, wie man CSS (Cascading Stylesheet) einbindet.
+Man hat in Contao zwei Möglichkeiten, wie man CSS (Cascading Stylesheet) einbindet.
 ==Eigene CSS-Dateien verwenden==

@@ Zeile 59: / Zeile 59: @@
 only screen and (max-device-width: 768px) and (orientation:portrait), only screen and (max-device-width: 1024px) and (orientation:landscape)</source>
 [[Datei:Css_settings.png]]<br /><br />
-Die @media-Queries werden in der Grundkonfiguration des jeweiligen Stylesheets eingetragen. Eine weitere Bearbeitung der CSS-Definitionen erfolgt dann ganz normal - entweder über den contao-eigenen Editor oder über die Extension [http://www.contao.org/de/extension-list/view/csseditor.20060009.de.html CSS_Editor].
+{{Hinweis|Die @media-Queries werden in der Grundkonfiguration des jeweiligen Stylesheets eingetragen. Eine weitere Bearbeitung der CSS-Definitionen erfolgt dann ganz normal - entweder über den contao-eigenen Editor oder über die Extension [http://www.contao.org/de/extension-list/view/csseditor.20060009.de.html CSS_Editor].}}
 ===Selbsterstellte Stylesheets in das Framework importieren===

@@ Zeile 58: / Zeile 58: @@
 <source lang="css">/* iPad */
 only screen and (max-device-width: 768px) and (orientation:portrait), only screen and (max-device-width: 1024px) and (orientation:landscape)</source>
+[[Datei:Css_settings.png]]<br /><br />
 Die @media-Queries werden in der Grundkonfiguration des jeweiligen Stylesheets eingetragen. Eine weitere Bearbeitung der CSS-Definitionen erfolgt dann ganz normal - entweder über den contao-eigenen Editor oder über die Extension [http://www.contao.org/de/extension-list/view/csseditor.20060009.de.html CSS_Editor].

← Nächstältere Version		Version vom 22. Februar 2012, 12:45 Uhr
Zeile 59:		Zeile 59:
	only screen and (max-device-width: 768px) and (orientation:portrait), only screen and (max-device-width: 1024px) and (orientation:landscape)</source>		only screen and (max-device-width: 768px) and (orientation:portrait), only screen and (max-device-width: 1024px) and (orientation:landscape)</source>

		+	Die @media-Queries werden in der Grundkonfiguration des jeweiligen Stylesheets eingetragen. Eine weitere Bearbeitung der CSS-Definitionen erfolgt dann ganz normal - entweder über den contao-eigenen Editor oder über die Extension [http://www.contao.org/de/extension-list/view/csseditor.20060009.de.html CSS_Editor].

	===Selbsterstellte Stylesheets in das Framework importieren===		===Selbsterstellte Stylesheets in das Framework importieren===

← Nächstältere Version		Version vom 20. Februar 2012, 13:36 Uhr
Zeile 21:		Zeile 21:
	Die zweite Möglichkeit, Stylesheets zu erstellen, ist über das Contao-Framework. Zu finden ist dieser Bereich im Backend unter Layout --> Stylesheets. Auch hier ist es möglich, mehrere Stylesheets zu erstellen.		Die zweite Möglichkeit, Stylesheets zu erstellen, ist über das Contao-Framework. Zu finden ist dieser Bereich im Backend unter Layout --> Stylesheets. Auch hier ist es möglich, mehrere Stylesheets zu erstellen.

		+	=== CSS-Dateien in Contao bis Version 2.9 ===
		+	{{AppliesTo
		+	\| Version=bis 2.9
		+	}}
	Die so erstellten CSS-Regeln werden dann von Contao benutzt um die CSS-Dateien im Rootverzeichnis automatisch (bei Änderungen oder auch durch einen Cronjob) zu generieren.		Die so erstellten CSS-Regeln werden dann von Contao benutzt um die CSS-Dateien im Rootverzeichnis automatisch (bei Änderungen oder auch durch einen Cronjob) zu generieren.
		+	=== CSS-Dateien in Contao ab Version 2.10 ===
		+	{{AppliesTo
		+	\| Version=2.10.0 -
		+	}}
		+	Ab Version 2.10.x legt Contao die CSS-Dateien zusammengefasst in /system/scripts ab. Dabei wird automatisch ein zufälliger Dateiname erzeugt, der sich immer dann ändert, wenn das CSS (durch Bearbeitung oder durch die Einstellungen fürs das Seitencaching) verändert wird.
		+
		+	Dieses Verhalten verhindert den Aufruf von nicht mehr aktuellen CSS-Dateien.

@@ Zeile 37: / Zeile 37: @@
 | Version=2.10.0 -
 }}
-==@media mit dem Contao-Framework==
+===@media mit dem Contao-Framework===
 Ab Version 2.10 bietet Contao die Möglichkeit zur Einbindung von Media-Queries im internen Editor. Um @media zu nutzen steht ein zusätzliches Feld innerhalb der Basiskonfiguration des Stylesheets zur Verfügung, in dem die Angaben zu verschiedenen Geräten, Auflösungen, etc. gemacht werden können.
@@ Zeile 47: / Zeile 47: @@
 ===Selbsterstellte Stylesheets in das Framework importieren===
 Das Framework bietet auch die Möglichkeit, selbst erstellte Stylesheets in das Framework zu importieren. Dazu muss die vorher erstellte CSS-Datei per FTP nach /tl_files/ hochgeladen werden. Anschliessend kann man diese im Backend --> Layout --> Stylesheets über den Button ''CSS-Import'' importieren.

@@ Zeile 23: / Zeile 23: @@
 Die so erstellten CSS-Regeln werden dann von Contao benutzt um die CSS-Dateien im Rootverzeichnis automatisch (bei Änderungen oder auch durch einen Cronjob) zu generieren.
 [[Datei:be_css.jpg|Contao Stylesheet Editor]]
@@ Zeile 41: / Zeile 33: @@
 '''Wichtig:''' Die erstellten Stylesheets müssen dann auch im Backend unter ''Seitenlayout'' dem entsprechenden Layout zugewiesen werden.
 [[Datei:be_css_seitenlayout.jpg|CSS im Seitenlayout einbinden]]