Eigene Link Klassen im RTE, Rahmen und Einzüge

Eigene Link Klassen, Rahmen und Einzüge bereiten Einsteigern immer mal wieder Schwierigkeiten. Dabei ist gerade dass eine große stärke von TYPO3: mit ein paar Zeilen TypoScript das System so anzupassen wie man es braucht. Hier die Snippets die unter 6.2 getestet sind.

In diesem Artikel geht es darum, eigene Link Klassen im RTE einzufügen und die Content Option “Einzüge und Rahmen” mit eigenen Vorgaben zu bestücken.

TIPP: aus sicht eines Redakteurs halte ich es inzwischen sinvoller eigene Contentelmenete zu benutzen anstelle der Rahmen Option. Mit einem eigenem Contentelement wird auf einen Blick klar, das dieses sich anders im Frontend verhält.


Eigene Link Klassen im RTE aktivieren

Das ist ziemlich einfach. Ihr müsst das Snippet entweder in die SeitenTS* der Rootpage eingeben - oder noch besser - falls ihr ein ausgelagertes Seitentyposcript habt das snippet nach der RTE Configuration einfügen.

*Das Seiten-TypoScript (PageTS) hat nichts mit dem TypoScript eures Template Setups zu tun. Die Eingabe für das Seiten TS findet ihr in dem ihr die Seiteneigenschaften uerer Rootseite aufmacht, dort auf den Reiter Optionen -> Feld TSconfig).

RTE.classesAnchor {
    meinLink {
        name = Mein neuer Link
        class = meinLink
        type = page              #geht auch "file", "mail", "url"
        image >
    }
 }
    
 RTE.default.buttons {
     link.properties.class.allowedClasses := addToList(meinLink) 
}

Eigene Rahmen und Einzüge

Contentelemente haben im TAB “Appearance” das Auswahlfeld “Einzüge und Rahmen”. Damit kann im HTML Code eine Klasse um das gesamte Contentelement eingefügt werden. Um hier eigene Klassen einzufügen oder vorhandene auszublenden müssen zum einen wieder Einträge in das Seiten TS erfolgen (um die Backend Anzeige zu beeinflussen), zum anderem müssen wir aber auch in unserem Template Setup TYPO3 sagen, wie diese neuen Einträge zu rendern sind.

Seiten TypoScript

TCEFORM.tt_content.section_frame {
    #Alles raus was wir nicht wollen
    removeItems = 1,5,6,10,11,12,20,21

    #Neues hinzufügen
    addItems {
        100 = Kasten grau
        110 = Kasten blau
    }
}

Nach dem Cache leeren sollten die neuen Einträge im Backend verfügbar sein. Die Rendering Definition geben wir nun in unserem Template Setup an:

# Eigene Rahmen definieren
tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
   key.field = section_frame

   100 = TEXT
   100.value = <div id="c{field:uid}" class="box_grey">|</div>
   100.insertData = 1

   110 = TEXT
   110.value = <div id="c{field:uid}" class="box_blue">|</div>
   110.insertData = 1  
}

Damit stehen euch in die neuen Boxen in der Auswahl "Rahmen und Einzüge" zur Verfügung und Ihr könnt diese per CSS stylen.


Ob das ganze noch zeitgemäß ist oder besser über ein eigenes Contentelement abgebildet werden sollte muss jeder selber entscheiden.

Weitere Artikel zu diesem Thema:

Empfehlenswerte Lektüre:

Grundkurs Gutes Webdesign

Das Buch richtet sich an Einsteiger und Fortgeschrittene und manche Webseiten wären uns erspart geblieben, wenn die Betreiber vorher dieses Buch gelesen hätten. Themen wie Usability, Barrierefreiheit, Responsive Design und aktuelle Technologien werden  in lockerem Schreibstil anhand von Praxisbeispielen gut erklärt. Ein empfehlenswertes Buch, unterhaltsam für lange Winterabende auf der Couch wie auch als Nachschlagewerk.

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.