Instagramm Button im Footer

Hallo Shopwaregemeinde

Wir haben seit neustem ein Instagramm Konto eröffnet. Jetzt sollte ich neben unserem Facebookbutton im Footer einen Button für diesen Dienst erstellen.

Ich habe damals vor längerer Zeit das nach der Anleitung von 8mylez gemacht. https://8mylez.com/blog/social-media-footer/

Habe gestern relativ lange in meine footer-naigation.tpl geschaut und versucht diesen einzubinden. Leider ohne Erfolg. Wie kann ich dieses bewerkstelligen?

So sieht meine tpl. im Moment aus.

{extends file="parent:frontend/index/footer-navigation.tpl"}

{block name="frontend_index_footer_column_service_hotline_content" append}

    

        .em-social-links{

            font-size: 40px;

        }

        .em-social-links li{

            display: inline;

        }

        .em-social-links li a{

            display: inline;

            transition: opacity .3s ease-in-out;

        }

        .em-social-links li a:hover{

            opacity: 0.6;

            transition: opacity .3s ease-in-out;

        }

        .em-social-links li a i.fa-facebook-official{

            color: #3b5998;

        }

            color: #fff;

        }

    

    
        •
        •
    
{/block}

Hätte mir nicht jemand eine Idee wie das gehen könnte? Bin nicht so der Oberguru im Programmieren. :frowning:

Danke für eure Hilfe

Grüsse Chrigi

 

 

Editiere mal bitte deinen Beitrag und benutze die Forum-Funktion „Codeschnispel einfügen“ (links neben beim Smiley) und Einstellung Sprache: smarty.

1 Like

Aha so geht das :slight_smile: Schon wieder eine Erfahrung reicher.

Ich glaube du musst den Code noch mal neu dort einfügen. Da fehlt jetzt einiges.

PS: Hat übrigens nichts mit Programmieren zu tun :slight_smile:

{extends file=„parent:frontend/index/footer-navigation.tpl“}
{block name=„frontend_index_footer_column_service_hotline_content“ append}

.em-social-links{
font-size: 40px;
}
.em-social-links li{
display: inline;
}
.em-social-links li a{
display: inline;
transition: opacity .3s ease-in-out;
}
.em-social-links li a:hover{
opacity: 0.6;
transition: opacity .3s ease-in-out;
}
.em-social-links li a i.fa-facebook-official{
color: #3b5998;
}
color: #fff;
}

{/block}

@R4M schrieb:

Ich glaube du musst den Code noch mal neu dort einfügen. Da fehlt jetzt einiges.

PS: Hat übrigens nichts mit Programmieren zu tun :slight_smile:

@weater schrieb:

{extends file=“parent:frontend/index/footer-navigation.tpl”}
{block name=“frontend_index_footer_column_service_hotline_content” append}

.em-social-links{
font-size: 40px;
}
.em-social-links li{
display: inline;
}
.em-social-links li a{
display: inline;
transition: opacity .3s ease-in-out;
}
.em-social-links li a:hover{
opacity: 0.6;
transition: opacity .3s ease-in-out;
}
.em-social-links li a i.fa-facebook-official{
color: #3b5998;
}
color: #fff;
}

{/block}

@R4M schrieb:

Ich glaube du musst den Code noch mal neu dort einfügen. Da fehlt jetzt einiges.

PS: Hat übrigens nichts mit Programmieren zu tun :slight_smile:

Für mich schon :frowning: Grrr…aber ich weiss was Du meinst…:slight_smile:

Im TPL hat eigentlich kein CSS zu suchen, sollte aber dennoch gehen. Ja und dein Link zu Instagramm einfach hinter der Mail-Adresse eingeben. Welche “fa” CSS-Classe für das Logo da jetzt die richtige ist, weiß ich auch nicht.

1 Like

Bestern Dank für Deine schnelle Hilfe versuche ich gleich mal das ganze.