Zu diesem Abschnitt gehören

• RTE.default.inlineStyle.[...]
• RTE.default.proc.allowedClasses = align-left .... detail
• RTE.default.classesParagraph = ....
• RTE.default.classesTable = ....
• RTE.default.classesTD = ....
• RTE.default.classesCharacter = ....
• im Verzeichnis der Extension die CSS-Datei htmlarea\plugins\DynamicCSS\dynamiccss.css
• im Verzeichnis der Extension die Sprachlabeldatei htmlarea\plugins\DynamicCSS\locallang.xml
• im Verzeichnis der Extension die Sprachlabeldatei htmlarea\locallang_tooltips.xml

Wenn Sie mit einer lokalisierten Version arbeiten, werden stattdessen Sprachlabeldateien aus dem Verzeichnis typo3conf\l10n\ verwendet, bei Deutsch sind das

• de\rtehtmlarea\htmlarea\plugins\DynamicCSS\de.locallang.xml
• de\rtehtmlarea\htmlarea\de.locallang_tooltips.xml

In RTE.classes werden beispielhaft einige Klassen für die Verwendung im RTE definiert, die auch in css_styled_content vorkommen.

Beispiel:

RTE.classes.csc-frame-frame1 {
        name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:frame-frame1
        value = background-color: #EDEBF1; border: 1px solid #333333;
    }

definiert die Klasse csc-frame-frame1.

Als Name soll anstelle des nicht sehr aussagekräftigen Klassennamens ein Label angezeigt werden, das in der unter obigem Pfad gespeicherten Datei locallang.xml mit dem Label-Index "frame-frame1" zu finden ist. Unter diesem Label-Index ist dort eingetragen: "Frame with grey background". Existiert eine Lokalisierung, wird das Label stattdessen aus der entsprechenden Sprachlabeldatei (siehe oben) gezogen. In der deutschen Übersetzung steht zu "frame-frame1" die Bezeichnung "Rahmen mit grauem Hintergrund".

Als Wert soll die Klasse einen grauen Hintergrund und einen dunkelgrauen 1px dicken Rahmen bekommen. Diese Angaben finden sich nachher optisch in der Drop Down Liste wieder, in der die Klasse zur Auswahl angezeigt wird.

Was ist das bisherige Ergebnis dieser Angaben?

Bisher wurde lediglich definiert, dass es im RTE eine Klasse csc-frame-frame1 geben soll, die anstelle des Klassennamens ein verständliche, sprachangepasste Bezeichnung bekommen soll und bestimmte Formatierungen enthält, die mit der Klassenbezeichnung im RTE sichtbar sein sollen.

Weiter geht´s mit:

RTE.default.inlineStyle.frames (
        p.csc-frame-frame1, table.csc-frame-frame1 {
                  background-color: #EDEBF1; padding: 2px 4px 2px 4px; border: 1px solid #333333;
                  }
) 

definiert, dass die Klasse csc-frame-frame1 für die tags p und table gelten soll, und mit welchen CSS-Angaben sie für die Anzeige im Browser gerendert werden soll.

Das Ergebnis dieser Angaben?

Noch kein sichtbares. Hier wird lediglich das CSS definiert. Und auf den ersten Blick verwirrend: am Ende des Abschnitts inlineStyle steht

ignoreMainStyleOverride = 1

was soviel heisst wie "vergiss das Ganze und nimm stattdessen die CSS Datei", standardmässig die unter obigem Pfad gespeicherte dynamiccss.css.

In dieser CSS-Datei finden Sie dieselben Einträge wie unter inlineStyle im PageTS:

p.csc-frame-frame1, table.csc-frame-frame1 {background-color: #EDEBF1; padding: 2px 4px 2px 4px; border: 1px solid #333333; }

Damit haben Sie die Wahl, CSS entweder über inlineStyle im PageTS zu definieren oder eine externe CSS-Datei zu verwenden. Die Typical-Konfiguration zeigt Beispiele für beide Wege, wählt aber dann die externe CSS-Datei.

Wenn Sie inlineStyle verwenden möchten, müssen Sie ignoreMainStyleOverride = 0 setzen. Ausserdem sollten Sie dann die Verwendung der externen Default CSS-Datei deaktivieren, damit sie nicht bei Ihren eigenen Definitionen ggf. noch "durchschlägt":

RTE.default.contentCSS >

Der nächste Eintrag:

RTE.default.classesParagraph (
        ...
        csc-frame-frame1 ...
    )
RTE.default.classesTable = csc-frame-frame1, ...

damit wird festgelegt, wo die Anzeige der Klasse erfolgt, nämlich in der Drop Down Liste "Absatz", in der alle Klassen angezeigt werden, die für Blockelemente gelten, zu denen p und table zählen.

Weiterhin wird festgelegt, dass diese Klasse nur dann angezeigt werden, wenn der Cursor innerhalb eines Absatzes oder auf einer Tabelle steht. Steht er z.B. in einer Überschrift hx oder in einer Liste ul, ist diese Klasse nicht sichtbar.

Das Ergebnis bis hierher?

Die Klasse wird jetzt im RTE angezeigt, hat in der Drop Down Liste das Aussehen aus dem oben zugewiesene "value" und kann einem Absatz oder einer Tabelle zugeordnet werden - und ist nach dem Speichern weg.

Der letzte Schritt:

RTE.default.proc.allowedClasses (
        ...
        csc-frame-frame1, ...
)

bewirkt, dass die Klassen, die für die Verwendung im RTE definiert werden, bei der Transformation zur Datenbank erhalten bleiben.  

Auf diese Art können Sie Klassen für alle tags anlegen. Nicht alle tags benötigen einen Eintrag mit RTE.default.classesXXX. Erforderlich sind

• RTE.default.classesParagraph für p
• RTE.default.classesTable für table
• RTE.default.classesTD für td
• RTE.default.classesCharacter für span

span ist ein Inline-Element, die Formatierungen dafür erscheinen in der Drop Down Liste "Text". Im Gegensatz zu blockbildenden Elementen, reicht es bei span nicht, mit dem Cursor in dem zu formatierenden Abschnitt zu stehen, damit die passenden Formate in der Drop Down Liste sichtbar sind, sondern es muss der Text markiert werden, der von span umschlossen werden soll.