Footer Logo ändern per .tpl und .css

Servus zusammen,

ich habe mich jetzt Tagelang mit der neuen .less Thematik auseinandergesetzt und mir ist das ehrlich gesagt zu anstrengend. ^^

Für alle, denen das genauso geht, hier eine kurze Anleitung, wie man das Logo im Footer per footer.tpl, header.tpl und custom.css ersetzen kann:

 

1.) Ordnerstruktur anlegen:

In eurem Custom Theme Ordner legt ihr im Ordner “frontend” folgende Ordnerstruktur an:

_public / src / css
index

 

2.) footer.tpl erstellen:

Nun erstellt ihr die Datei " footer.tpl" und legt sie in den zuvor erstellten Ordner “index” im frontend-Ordner.

Inhalt der Datei:

{extends file='parent:frontend/index/footer.tpl'}
            {* Logo *}
            {block name="frontend_index_shopware_footer_logo"}
                
                    
                
            {/block}

“…” ersetzt ihr natürlich mit dem Pfad zu eurem neuen Footer Icon bzw. Logo. Den Pfad findet ihr im Backend unter Inhalte > Medienverwaltung durch klicken auf das entsprechende Bild. In der Menüleiste rechts (Weitere Informationen) findet ihr die Adresse (ganz unten).

 

3.) custom.css erstellen:

Jetzt erstellt ihr die Datei " custom.css". Ihr könnt der .css auch einen anderen Namen geben, ich nenne Sie hier einfach mal custom. Diese Datei legt ihr in den zuvor erstellten Ordner “css” im Verzeichnis _public / src / css

Inhalt der Datei:

/* Footer Icon */
.footer-icon {
    display:inline-block;
    position: relative;
    width: ...px;
    height: ...px;
}

Bei “width” und “height” müsst ihr die exakte Größe eures Logos einsetzen.

 

4.) header.tpl erstellen:

Um die css nun einzubinden erstellt ihr die Datei " header.tpl" und legt sie zur footer.tpl in den Ordner “index”

Inhalt der Datei:

{extends file='parent:frontend/index/header.tpl'}
{block name="frontend_index_header_css_screen" append}
    
{/block}

Falls ihr die css-Datei nicht “custom.css” genannt habt, müsst ihr die Bezeichnung im Code natürlich entsprechend anpassen.

 

Das war es im Grunde auch schon.

Um das Ganze jetzt auch tatsächlich sehen zu können müsst ihr euer Theme kompilieren. Ihr macht das im Backend unter Einstellungen > Theme Manager. Klickt euer Theme an, klickt auf “Theme zuweisen” und bestätigt anschließend die Kompilierung. Dann bloß noch im Frontend die Seite neu laden und es sollte alles passen.

 

Viel Erfolg! :wink: