Typo3 und CSS

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:

.stopFloat {
  display: block;
  float: none;
  clear: both;
  height: 1px;
  font-size: 0px;
  line-height: 0px;
}

So wird Sie im HTML Code eingebunden:

<nowiki>
<div>...</div>
<span class="stopFloat"></span>

</nowiki>

Jetzt noch das TypoScript

### Content ###
# stopFloat einfügen
tt_content.stdWrap.dataWrap = <span class="stopFloat"></span><a id="c{field:uid}"></a> |

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

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.

Externes CSS

mehrere CSS-Dateien einlesen

[PIDinRootline = pages-uid, pages-uid, ...]

includeCSS {
  file1 = fileadmin/mystylesheet1.css
  file2 = stylesheet_uploaded_to_template*.css
  file2.title = High contrast
  file2.media = print
}

Mit der Condition [PIDinRootline = pages-uid, pages-uid, ...] kann man auf diese Weise für verschiedene Seitenbäume mit zusätzlichem CSS anzusteuern. Oder man generiert das CSS dynamisch wie unten beschrieben.

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)

 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" />| 
 

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.