1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

PORADNIK Ikony społecznościowe na pasku nawigacji

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika Grzesiek, 14 Listopad 2017.

  1. Grzesiek

    Grzesiek Centrum Pomocy home.pl

    Wiadomości:
    3 660
    Docenione treści:
    333
    Zmiany wykonujemy w:

    Konfiguracja -> Wygląd -> Aktywny styl graficzny -> Edycja zaawansowana

    Edytując plik: body_head.tpl w następujący sposób:


    Kod:
    <li class="fb-social">
                       <a href="link do facebook" target="_blank">
                       <img src="{baseDir}/ścieżka do zdjęcia"></a>
                       </li>
                       <li class="i-social">
                       <a href="link do instagram" target="_blank">
                       <img src="{baseDir}/ścieżka do zdjęcia"></a>
                       </li>
    
    Powyższy kod wstawiamy pomiędzy:
    <ul class="links right inline"> a
    {if true == $user_logged}
    <li class="hello">

    Dodatkowo ze względu na moje ikony poprawiłem css w następujący sposób:

    Kod:
    .login-bar li.fb-social, .login-bar li.i-social {
       margin-right: -20px;
       margin-left: -10px;
    }
    Screenshot-2017-11-14.jpg
     
    Mariusz lubi to.
  2. domaszewiczl

    domaszewiczl Początkujący

    Wiadomości:
    7
    Docenione treści:
    0
    Super wszystko działa! musiałem się tylko trochę pobawić z marginesami aby wszystko mieściło się w jednej szerokości pasku szczególnie w wersji responsywnej taki efekt: www.dummyinky.com
     
  3. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    zróbcie sobie jeszcze filtrami css ładne zmiany kolorów lub podświetlanie grafik i będzie całkiem fajnie :)
     
  4. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    Zmniejsz zdjęcia bo Google pokazało, że możesz zaoszczędzić prawie 17MB (98%!!), a sprawdzałem jedynie stronę główną
     
    Mariusz lubi to.
  5. domaszewiczl

    domaszewiczl Początkujący

    Wiadomości:
    7
    Docenione treści:
    0
    ok dzieki rzeczywiscie sporo mogłem jeszcze zmniejszyc
     
  6. tazz

    tazz Uczestnik

    Wiadomości:
    26
    Docenione treści:
    2
    jaką ścieżkę podać z ikonką? "../images/user/fb3.jpg" nie wyświetla ikonki.
     
  7. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    @tazz w twoim przypadku jak dodałeś zdjęcia do "Pliki graficzne" to przejść w ich edycję i wyświetl zdjęcie w nowym oknie dostaniesz pełną ścieżkę w moim przypadku wygląda ona tak:
    Kod:
    https://sklep.tir.szczecin.pl/skins/user/rwd_clickshop_3/images/user/fb.png
    możesz wkleić wtedy cały URL, ale kasując {baseDir} lub wprowadzić wartość od /skins :)
     
  8. tazz

    tazz Uczestnik

    Wiadomości:
    26
    Docenione treści:
    2
    Mam plik fb2.png w "plikach graficznych"

    adres:
    ...mibar.pl/skins/user/rwd_clickshop_3/images/user/fb2.png

    po wrzuceniu do przeglądarki powinien pokazać ikonkę, tylko jak sprawdzisz to nie ma takiej strony. W adresie widać "rwd_clickshop_3" jaką mamy pewność, że u mnie też taki jest?

    W edycji plików graficznych nie mam żadnych informacji, mogę jedynie wymienić plik.
     
  9. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    @tazz widzę, że skopiowałeś mój link w całości tutaj jest błąd, ponieważ /rwd_clickshop_3 to nazwa kopi w Twoim sklepie która jest wymuszona.
    Zrób tak:
    - przejdź do plików graficzych,
    - odszukaj obrazka fb2.png,
    - najedź na niego i przyciśnij PPM -> pokaż obraz (w pasku przeglądarki dostaniesz poprawny link) :)
     
    tazz lubi to.
  10. PetitRoyal

    PetitRoyal Nowy użytkownik

    Wiadomości:
    1
    Docenione treści:
    0
    Witam

    Potrzebuje pomocy w temacie dodania ikon społecznościowych na pasku nawigacji.
    Wszystko wykonałam zgodnie z wcześniejszymi instrukcjami jednak po zapisaniu zmian na stronie sklepu pojawiają mi się tylko 2 niebieskie kwadraciki- bez grafik fb i insta.
     
  11. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    @PetitRoyal podasz mi na PW jak zostały wstawione linki do zdjęcia ?
     
  12. maniuss93

    maniuss93 Nowy użytkownik

    Wiadomości:
    4
    Docenione treści:
    1
    jakbyście chcieli możecie zrobić to w następujący sposób


    Kod:
    <ul class="links left inline">
                        <li class="fb-social">
                       <a href="https://www.linkdofacebook.pl">
                      <i class="fa fa-facebook">
                    </a>
                  </li>
                       <li class="i-social">
                       <a href="https://www.linkdoinstagram.pl">
                      <i class="fa fa-linkedin"></i>
                    </a>
                    </li> 

    wrzucić to pomiędzy
    <div class="row container"> a
    <ul class="links right inline">

    jeśli chcielibyście ikony po lewej stronie

    Efekt:

    [​IMG]

    lub jesli chcecie po prawej stronie przy panelu zaloguj sie

    Kod:
    <li class="fb-social">
                       <a href="https://www.linkdofacebook.pl">
                      <i class="fa fa-facebook"></i>
                    </a>
                  </li>
                       <li class="i-social">
                       <a href="https://www.linkdoinstagram.pl">
                      <i class="fa fa-linkedin"></i>
                    </a>
                    </li>
    wrzucić pomiędzy
    <ul class="links right inline"> a
    {if true == $user_logged}
    <li class="hello">

    gdzie w linkach podajecie adresy do swoich social media. W tym przypadku nie musicie wtawiac linków do ikon ponieważ są one stale dla tego kodu.


    Natomiast mam pytanie jak wstawić poprawnie ten kod;

    Kod:
    <!-- Footer -->
        <footer>
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <ul class="list-inline social-buttons">
               
                  <li class="list-inline-item">
                    <a href="https://www.flinkdofacebook.pl/">
                      <i class="fa fa-facebook"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a href="https://www.linkdonstagram.com">
                      <i class="fa fa-linkedin"></i>
                    </a>
                  </li>
                </ul>
              </div>
           
            </div>
          </div>
        </footer>
        </section>
    By efekt był taki jak na mojej poprzedniej stronie tzn z podświetleniem i kolor ikony jakby granatowy

    [​IMG]
     
    LukaszC lubi to.
  13. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    i teraz zobacz jak to się zachowa na mobilu :)
     
  14. maniuss93

    maniuss93 Nowy użytkownik

    Wiadomości:
    4
    Docenione treści:
    1
    Faktycznie, na moim note8 wszystko bylo okej natomiast na s7 juz nie.
     
  15. Mariusz_Q

    Mariusz_Q Początkujący

    Wiadomości:
    7
    Docenione treści:
    1
    A można dodać w ten sposób obok "Zarejestruj się" numer kontaktowy?
     
  16. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    Można tylko w <span> dajesz numer telefonu
     
  17. AniaM

    AniaM Użytkownik

    Wiadomości:
    58
    Docenione treści:
    1
    Chciałabym wstawić ikonki do fb i Insta, edytowałam plik body_head.tpl tak jak pisał @Grzesiek, wkleiłam link do strony fb i nic się nie dzieje, nie ma. Chciałabym ikony wysuwane po prawej stronie przy suwaku(@Grzesiek chyba podaje ikony stałe) , podpowiedzcie proszę jaki kod i gdzie wpisać, adres sklepu http://gastrotrend.pl/
    Z góry dziękuję
     
  18. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    @AniaM sprawdź czy widzisz podgląd tego wyglądu, który edytujesz. Obecnie na stronie "http://gastrotrend.pl/" nie widzę, żadnych elementów zmienionych w body
     
  19. AniaM

    AniaM Użytkownik

    Wiadomości:
    58
    Docenione treści:
    1
    Nie było widać,ponieważ usunęłam ten kod, po tym jak nic się nie zmieniło. Ale teraz dodałam i znowu nic. Coś chyba muszę robić źle :/
     
  20. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    @AniaM sprawdź, czy nie ma w konfiguracja->ustawienia podstawowe->informacje o sklepie nie masz ustawionej opcji "wymuś adres sklepu".
    Jak masz na tak to ustaw nie i sprawdź kopię :)
     

Poleć forum znajomym