Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 12

TYPO3-Backend-Login individuell anpassen: Hübsche Eingangstür

    TYPO3-Backend-Login individuell anpassen: Hübsche Eingangstür

Die Login-Seite ist die Eingangstür zum Backend von TYPO3. Bislang sah diese bei jedem Nutzer identisch aus und wechselte ihr Aussehen nur, wenn eine neue TYPO3-Version erschien. Eine kleine Extension ändert dies jetzt. Über sie lässt sich der Backend-Zugang individuell an die eigenen Bedürfnisse oder die CI des Kunden anpassen.

Der Schlüssel zur individuellen Login-Seite für das TYPO3-Backend heißt „chloginskin“. Die Extension liegt zum freien Download im TYPO3 Extension Repository [1] bereit und ist mit wenigen Klicks installiert. Anschließend kann die Extension über eine übersichtliche Konfigurationsoberfläche angepasst werden.

Das Konfigurationsformular besitzt lediglich vier Einstellungsfelder. Im Bereich „Default stylesheet“ gibt der Anwender die zu verwendenden CSS-Dateien an. Sollen mehrere Stylesheet-Dateien zum Einsatz kommen, werden diese mit einem Komma getrennt. Die Option „Random mode“ entscheidet bei mehreren CSS-Dateien darüber, ob diese per Zufallsmodus ausgewählt werden sollen.

Soll auch die Header-Grafik per Zufallsmodus getauscht werden, kann im Feld „Path to rotating images“ ein Ordner mit Bildern angegeben werden, aus dem sich die Extension bedient. Derzeit verwendet TYPO3 zur Gestaltung der Backend-Login-Seite Tabellen und p-Tags. Sollen statt dessen div- und label-Tags zum Einsatz kommen, muss lediglich die Checkbox „Enable XCLASS“ gesetzt werden. Nach dem Speichern der Einstellungen, muss der typo3conf-Cache geleert werden, damit die Änderungen greifen.

Erklärung der CSS-Struktur

Mit der Extension „chloginskin“ angepasste Login-Seite.

Mit der Extension „chloginskin“ angepasste Login-Seite.

Im Extension-Verzeichnis befinden sich im Ordner „res/“ bereits mehrere vorkonfigurierte Beispiele, die beim Erstellen eigener Logins helfen sollen. Die Resultate dieser CSS-Dateien sind als Screenshots unter [2] abrufbar. Die Datei „login1x.css“ bietet ein Beispiel mit eingeschaltetem XCLASS. Die Klassen selbst sind sehr einfach gehalten und kommentiert. Daher sollten die Anpassungen an die eigenen Wünsche schnell von der Hand gehen. Die wesentlichen Änderungen beschränken sich in der Regel auf den Hintergrund, die Positionierung des Login-Formulars sowie die Farben der diversen Texte, Überschriften und Formular-Felder.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst