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 (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.

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 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.

neuer clearfix

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
}

Mit der Option after wird am Ende des betreffenden Objektes gestyled. D.h. hier braucht man kein extra Clearing Element mehr. Der IE < 7 versteht diese Option aber nicht. Da der aber sowieso die Boxen ausdehnt braucht mans auch nicht. Allerdings tut er das nur wenn er auch eine Höhe zugewiesen bekommt. Deshalb noch die 1%. Schließlich noch das Problem mit dem IE Mac der kein auto clearing macht...

Aber genauer gibts das hier:

http://www.positioniseverything.net/easyclearing.html

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 nutzen

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

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

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.

Typo3 - CSS-Snippets

Beispiele für Sinnvolle TYPO3 Styles gibt es unter Typo3 - CSS-Snippets und unter Typo3 - Extensions