# Footer Logo ändern per .tpl und .css

**URL:** <https://forum.shopware.com/t/footer-logo-andern-per-tpl-und-css/34289>\
**Category:** Themes & Design\
**Created:** [7. Februar 2016 um 12:40 UTC](https://forum.shopware.com/t/footer-logo-andern-per-tpl-und-css/34289 "2016-02-07T12:40:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![PrioDesign](https://avatars.discourse-cdn.com/v4/letter/p/50afbb/32.png) [@PrioDesign](https://forum.shopware.com/u/PrioDesign)\
**Post date:** [7. Februar 2016 um 12:40 UTC](https://forum.shopware.com/t/footer-logo-andern-per-tpl-und-css/34289/1 "2016-02-07T12:40:11Z")

</div>

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&nbsp;per footer.tpl, header.tpl und custom.css&nbsp;ersetzen kann:

&nbsp;

**1.) Ordnerstruktur anlegen:**

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

\_public /&nbsp;src /&nbsp;css  
index

&nbsp;

**2.) footer.tpl&nbsp;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)&nbsp;findet ihr die Adresse (ganz unten).

&nbsp;

**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&nbsp;\_public /&nbsp;src /&nbsp;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.

&nbsp;

**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.

&nbsp;

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.

&nbsp;

Viel Erfolg! 😉