ROZWIĄZANE Jak umieścić przycisk Instagram na stronie sklepu Click Shop pod koszykiem?

Chciałabym dodać na głównej stronie Instagrm, lecz po wklejeniu w css poniższego kodu nic sie nie zmienia

HTML:

<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }</style>
<a href="https://www.instagram.com/animalfit.pl/?ref=badge" class="ig-b- ig-b-48"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a>

 

Chciałabym aby na mojej stronie znalazł się odnośnik do mojego profilu na instagramie (w prawym górny rogu).
Kod pobrałam z mojego profilu na intagramie:

 

Czy możesz dodać zrzut ekranu z Twoją stroną sklepu i wskazać, w którym miejscu chcesz wyświetlać ikonę Instagrama?

 

Zaznaczyłam kółkiem w którym miejscu chciałabym umieści ikonkę

 

@ilon9: poniżej dodaję instrukcje jak dodać znacznik Instagrama we wskazanym przez Ciebie miejscu:

Poniższy kod wklej do "Własny styl CSS". Twoje poprzednie błędy usunąłem z Twojego sklepu. Wystarczy tylko, że wkleisz poniższy kod do "Własny styl CSS":

Kod:

.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }

Następnie przejdź do edycji pliku "body_head.tpl" i znajdź tam poniższy kod (około 87 linijka):

Kod:

<a href="{route key='basket'}" title="{translate key='Cart'}" class="count">
                            <img src="{baseDir}/public/images/1px.gif" alt="" class="px1">
                            <span class="countlabel">
                                <span>{translate key="Cart"}:</span>
                                <b>
                                    {if 0 == $user->basket->countProducts()}
                                        ({translate key="empty"})
                                    {else}
                                        <b class="sum">{currency value=$user->basket->sumProducts(false)}</b>
                                        <b class="count">(<span>{$user->basket->countProducts()}</span>)</b>
                                    {/if}
                                </b>
                            </span>
                        </a>

Pod wskazanym powyżej kodem dodaj poniższy kod (około 87 linijka):

Kod:

</br><div align="right" style="margin-top:15px;"><a href="https://www.instagram.com/animalfit.pl/?ref=badge" class="ig-b- ig-b-48"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a></div>

Całość po zmianach powinna wtedy wyglądać tak:

Kod:

  <div class="basket right{if 0 == $user->basket->countProducts()} empty-basket{/if}">
                        <a href="{route key='basket'}" title="{translate key='Cart'}" class="count">
                            <img src="{baseDir}/public/images/1px.gif" alt="" class="px1">
                            <span class="countlabel">
                                <span>{translate key="Cart"}:</span>
                                <b>
                                    {if 0 == $user->basket->countProducts()}
                                        ({translate key="empty"})
                                    {else}
                                        <b class="sum">{currency value=$user->basket->sumProducts(false)}</b>
                                        <b class="count">(<span>{$user->basket->countProducts()}</span>)</b>
                                    {/if}
                                </b>
                            </span>
                        </a>
</br><div align="right" style="margin-top:15px;"><a href="https://www.instagram.com/animalfit.pl/?ref=badge" class="ig-b- ig-b-48"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a></div>
                    </div>

Po wykonaniu powyższych zmian (Własny styl CSS oraz edycja pliku body_head.tpl), przycisk do Twojego profilu na Instagramie będzie wyświetlany we wskazanym przez Ciebie miejscu.

 

Dziękuje pięknie za profesjonalną pomoc Mam jeszcze jedno pytanie, jak mogę zmienić aktualne logo Instagram na to najnowsze?

 

Musiałabyś podmienić odwołanie w kodzie CSS, aby zamienić adres obrazka. Nowy obrazek umieszczasz u siebie na serwerze i następnie odwołujesz się do niego w tym miejscu:

Kod:

.ig-b- { display: inline-block; }
.ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }

powyższy kod już dodałaś do "Własny styl CSS", należy go tylko zmodyfikować, aby adresy do obrazków prowadziły do nowego wybranego przez Ciebie obrazka.

 

A jak mogę zmniejszyć wielkość tego logo?

 

Wpisz inne wartości w px

 

Mam zmienić np. na wartość 40px wszystkie wartości zaznaczone na czerowno? Bo coś mi to nie wychodzi

.ig-b- { display: inline-block; }
.ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }

 

a co dokładnie Ci nie wychodzi?

 

Po zmianie tych wartości, logo instagrama znika z mojej strony

 

no do dobra to inaczej, nie zmieniaj wartości tylko zamiast

Kod:

.ig-b-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }

wpisz

Kod:

.ig-b-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png); background-size: 60px 178px; } }