Tutorial: Eine responsive Seite mit Typo3 (Teil 2)

Das neue Logo

Nachdem wir im ersten Teil dieses Tutorials die neue Typo3 Seite weitestgehend eingerichtet haben, beschäftigen wir uns in diesem Teil mit der Ordnerstruktur des Bootstrap Kickstart Packages (bsdist). Ein großer Vorteil der bsdist ist in dem Fall das Zusammenfassen sämtlicher Anpassungen in ein Theme. Dieses sollte, bei konsequenter Nutzung, alle Anpassungen beinhalten und eine einfache Nutzung über verschiedene Projekte hinaus erlauben. Ich nutze diesen Ansatz bspw. bei den Seiten meines Arbeitgebers https://www.pentacon.de und https://ibv.pentacon.de.

Die Theme Idee

Das Theme liegt standardmäßig unter bsdist:

Ordnerstruktur bsdist
image-424

Die Standard Ordnerstruktur des bsdist Themes

Ich habe mir im Laufe der Zeit angewöhnt die Originalstruktur beizubehalten und stattdessen eine Kopie für meine Anpassungen anzulegen. Das geht per FTP recht zügig. Ich nutze dafür das kostenlose WinSCP.

Ordner duplizieren
image-425

Ordner duplizieren mit WinSCP

Und:

Ordner duplizieren
image-426

Ordner duplizieren mit WinSCP

Nach kurzer Zeit erscheint der neue Ordner und steht für Anpassungen zur Verfügung.

As-Moll Theme
image-427

Das duplizierte Theme steht nun zur Verfügung

Das neue Theme einbinden

Zwar haben wir nun eine Kopie des originalen Themes, allerdings müssen noch einige Anpassungen im Typo3 vorgenommen werden, um das Theme zum Laufen zu bekommen. Loggen wir uns dazu zunächst ins Backend unserer Typo3 Instanz ein.

Über „Template“ > „Home“ > „Constants“:

Template anpassen
image-428

Template anpassen um das Theme einzubinden

ändern wir zunächst den Pfad für die Konstanten von „theme“ in „as_moll-theme“.

As Moll Theme
image-429

Constants Pfad für As Moll Theme anpassen

Den gleichen Schritt nehmen wir noch für das „Setup“ vor:

Template Theme Setup
image-430

Setup Pfad für As Moll Theme anpassen

Und:

Template Theme Setup
image-431

Template Theme Setup anpassen

Bleibt schließlich noch die „tsconfig“. Diese wird nicht über das Template angesprochen, sondern über die Seiteneigenschaften der obersten Seite, in diesem Fall „Home“.

Home editieren
image-432

Seiteneigenschaften der Rootseite editieren

Unter „Resources“ ändern wir den Eintrag in der „Page TSConfig“:

Page TSConfig Pfad ändern
image-433

Anpassen des Theme Pfades in der Page TSConfig

Abschließend muss unter „fileadmin/bsdist/as_moll-theme/typoscript“ in der „setup.ts“:

Logo in setup.ts
image-434

Logo in setup.ts anpassen

die „baseDir“ angepasst werden (Zeile 66):


baseDir = fileadmin/bsdist/as_moll-theme

Ein erster Versuch

Ob unsere Änderungen erfolgreich waren, können wir sehr einfach testen, indem wir das Logo austauschen. Dazu laden wir entweder das neue Logo hoch und überschreiben das vorhandene. Oder wir laden unser Logo hoch und passen das Typoscript an. Ich ziehe den letzteren Weg vor.

Das Logo liegt im Ordner „fileadmin/bsdist/as_moll-theme/img“:

Logo anpassen
image-435

Das Logo einpassen

Mein Logo habe ich „as_moll_logo_300.png“ genannt und lade dieses per FTP in den oben genannten Pfad. Anschließend ändere ich die „setup.ts“


lib {
logo = COA
logo.wrap =

logo {
    10 = TEXT
    10.value = <img src="{$plugin.tx_bootstrapcore.theme.baseDir}/img/as_moll_logo_300.png" class="logo img-responsive" title="As-Moll" alt="As-Moll"/>
    10.typolink.parameter = 2
    10.typolink.title = Logo
}

...
}

Nach Leeren der Caches erscheint im Frontend das neue Logo:

Das neue Logo
image-436

Das neue Logo im neuen Theme