Typo3 und CSS - Versionsgeschichte

193.196.133.66: /* Typo3 - CSS-Snippets */

2009-05-27T09:03:47Z

Typo3 - CSS-Snippets

193.196.133.66: /* Externes CSS */

2009-05-27T09:02:24Z

Externes CSS

91.32.41.106: /* Mehrere CSS-Dateien nutzen */

2007-10-25T11:33:08Z

Mehrere CSS-Dateien nutzen

91.32.68.169: /* mehrere CSS-Dateien einlesen */

2007-08-07T12:41:57Z

mehrere CSS-Dateien einlesen

Kholja: /* stopFloat Klasse */

2007-03-29T15:14:15Z

stopFloat Klasse

84.161.156.119 am 9. November 2006 um 14:02 Uhr

2006-11-09T14:02:34Z

84.161.200.118 am 3. Juli 2006 um 16:28 Uhr

2006-07-03T16:28:05Z

84.161.160.124: /* Inline Styles aus cron_cssstyledimgtext entfernen */

2006-02-16T12:19:51Z

Inline Styles aus cron_cssstyledimgtext entfernen

84.161.160.124: /* Eine externe CSS Datei dynamisch anlegen */

2006-02-16T12:19:35Z

Eine externe CSS Datei dynamisch anlegen

84.161.154.236: externe CSS Dateien erzeugen

2006-01-19T15:27:53Z

externe CSS Dateien erzeugen

Neue Seite

== Eine externe CSS Datei dynamisch anlegen ==
Dynamisch eine CSS-Datei erstellen

Wenn Sie seitenabhängig CSS-Definitionen brauchen und diese allerdings nicht im Head-Bereich, sondern in einer seperaten Datei stehen sollen, können Sie sich mit einem Trick helfen.

Sie müssen dazu nur die Ausgabe einer Seite wie im folgenden Beispiel definieren:

'''TypoScript (Setup)'''
<pre>
css = PAGE
css {
typeNum = 22
config{
additionalHeaders = Content-type: text/css
disableAllHeaderCode = 1
}
10 = TEXT
10.value (
body {
margin: 0px;
padding: 0px;
}
h5 {
text-decoration: none;
font-weight: bold;
font-size: 40px;
color: red;
background-color: silver;
display: box;
}
)
}
page.headerData.775 = TEXT
page.headerData.775.dataWrap = <link rel="stylesheet" type="text/css"
href="index.php?id={field:uid}&type=22" />|
</pre>

'''TypoScript-Erläuterung'''
Von Zeile 1-23 wird die Ausgabe der CSS-"Datei" konfiguriert. Damit die Ausgabe auch als Text ausgeliefert wird, wird in Zeile 5 die Headerinformation modifiziert.

Die CSS-Datei darf natürlich nicht den Head- und Body-Bereich einer normalen Webseite haben. Aus di
esem Grund wird der Header-Code in Zeile 6 komplett gelöscht.

In Zeile 8-22 wird die Ausgabe noch relativ starr (hier mit Beispieldaten) angegeben - allerdings können Sie die CSS-Daten ja auch aus einem zuvor mit dem Kickstarter ergänzten Datenbankfeld der pages-Tabelle auslesen und hier dynamisch einfügen lassen.

Zeile 24 und 25 fügt jetzt in der normalen Webseite noch den Link zur
Stylesheet-"Datei" ein.

Die TypeNum-Angabe ist überigens nicht zwingend 22.
Sie müssen nur eine freie typeNum verwenden.

@@ Zeile 145: / Zeile 145: @@
 == Typo3 - CSS-Snippets ==
 Beispiele für Sinnvolle TYPO3 Styles gibt es unter
-[[Typo3 - CSS-Snippete]] und unter [[Typo3 - Extensions]]
+[[Typo3 - CSS-Snippets]] und unter [[Typo3 - Extensions]]

← Nächstältere Version		Version vom 27. Mai 2009, 09:02 Uhr
Zeile 142:		Zeile 142:
	Die TypeNum-Angabe ist überigens nicht zwingend 22.		Die TypeNum-Angabe ist überigens nicht zwingend 22.
	Sie müssen nur eine freie typeNum verwenden.		Sie müssen nur eine freie typeNum verwenden.
		+
		+	== Typo3 - CSS-Snippets ==
		+	Beispiele für Sinnvolle TYPO3 Styles gibt es unter
		+	[[Typo3 - CSS-Snippete]] und unter [[Typo3 - Extensions]]

@@ Zeile 79: / Zeile 79: @@
 [PIDinRootline = pages-uid, pages-uid, ...]
-includeCSS {
+page.includeCSS {
    file1 = fileadmin/mystylesheet1.css
    file2 = stylesheet_uploaded_to_template*.css

@@ Zeile 74: / Zeile 74: @@
 == Externes CSS ==
-=== mehrere CSS-Dateien einlesen ===
+=== Mehrere CSS-Dateien nutzen ===
 <pre>
@@ Zeile 85: / Zeile 85: @@
    file2.media = print
+}
 </pre>

@@ Zeile 2: / Zeile 2: @@
 Seit Typo3 Version 4 arbeitet man in der Regel mit CSS Styled Imgtext um ein optimales CSS-Layout zu bekommen. Im folgenden Finden Sich Tipps zum Anpassen der Style Sheets. Gestaltung des HTML Codes und TypoScript Anpassungen zum Optimieren der Extension.
-=== stopFloat Klasse ===
+=== stopFloat Klasse (auch clearfix) ===
 zum besseren Trennen der Inhaltsblöcke kann man eine .stopFloat Klasse einfügen. Damit sollten eigentlich alle Browser die Inhaltsblöcke sauber untereinander stellen.
@@ Zeile 32: / Zeile 32: @@
 </pre>
-Normalerweise bindet man das StopFloat als letztes Element innerhalb des umschließenden Divs ein.
+Normalerweise bindet man das StopFloat als '''letztes Element innerhalb des umschließenden float Divs''' ein.
 Es scheint aber auch wie hier als erstes Element im Typo Content Block zu funktionieren. Der DataWrap bietet sich an, weil hier sowieso jeder Inhaltsblock gekennzeichnet wird um später darauf zu referenzieren.
 ToDo - Extra Objekt zum Wrappen basteln.
 == Inline Styles ==
 === Alle Inline Styles in eine externe Datei auslagern ===

← Nächstältere Version		Version vom 9. November 2006, 14:02 Uhr
Zeile 1:		Zeile 1:
		+	== CSS Styled Imgtext anpassen ==
		+	Seit Typo3 Version 4 arbeitet man in der Regel mit CSS Styled Imgtext um ein optimales CSS-Layout zu bekommen. Im folgenden Finden Sich Tipps zum Anpassen der Style Sheets. Gestaltung des HTML Codes und TypoScript Anpassungen zum Optimieren der Extension.
		+
		+	=== stopFloat Klasse ===
		+	zum besseren Trennen der Inhaltsblöcke kann man eine .stopFloat Klasse einfügen. Damit sollten eigentlich alle Browser die Inhaltsblöcke sauber untereinander stellen.
		+
		+	Die CSS Klasse:
		+	<pre>
		+	.stopFloat {
		+	display: block;
		+	float: none;
		+	clear: both;
		+	height: 1px;
		+	font-size: 0px;
		+	line-height: 0px;
		+	}
		+	</pre>
		+
		+	So wird Sie im HTML Code eingebunden:
		+
		+	<pre><nowiki>
		+	<div>...</div>
		+	<span class="stopFloat"></span>
		+	</pre></nowiki>
		+
		+	Jetzt noch das TypoScript
		+
		+	<pre>
		+	### Content ###
		+	# stopFloat einfügen
		+	tt_content.stdWrap.dataWrap = <span class="stopFloat"></span><a id="c{field:uid}"></a> \|
		+	</pre>
		+
		+	Normalerweise bindet man das StopFloat als letztes Element innerhalb des umschließenden Divs ein.
		+	Es scheint aber auch wie hier als erstes Element im Typo Content Block zu funktionieren. Der DataWrap bietet sich an, weil hier sowieso jeder Inhaltsblock gekennzeichnet wird um später darauf zu referenzieren.
		+
		+	ToDo - Extra Objekt zum Wrappen basteln.
	== Inline Styles ==		== Inline Styles ==
	=== Alle Inline Styles in eine externe Datei auslagern ===		=== Alle Inline Styles in eine externe Datei auslagern ===

@@ Zeile 11: / Zeile 11: @@
 setzen und dafür sorgen daß die benötigten Stile im Stylesheet stehen.
-== Eine externe CSS Datei dynamisch anlegen ==
+== Externes CSS ==
 Dynamisch eine CSS-Datei erstellen

@@ Zeile 7: / Zeile 7: @@
 '''Im Setup'''
-plugin.tx_croncssstyledimgtext._CSS_DEFAULT_STYLE =
+ plugin.tx_croncssstyledimgtext._CSS_DEFAULT_STYLE =
 setzen und dafür sorgen daß die benötigten Stile im Stylesheet stehen.

← Nächstältere Version		Version vom 16. Februar 2006, 12:19 Uhr
Zeile 1:		Zeile 1:
		+	== Inline Styles ==
		+	=== Alle Inline Styles in eine externe Datei auslagern ===
		+	automatisch alle inline CSS Stile in eine temporäre Datei auslagern:
		+	config.inlineStyle2TempFile = 1
		+
		+	=== Inline Styles aus cron_cssstyledimgtext entfernen ===
		+	'''Im Setup'''
		+
		+	plugin.tx_croncssstyledimgtext._CSS_DEFAULT_STYLE =
		+
		+	setzen und dafür sorgen daß die benötigten Stile im Stylesheet stehen.
		+
	== Eine externe CSS Datei dynamisch anlegen ==		== Eine externe CSS Datei dynamisch anlegen ==
	Dynamisch eine CSS-Datei erstellen		Dynamisch eine CSS-Datei erstellen