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

ROZWIĄZANE Czy można dodać własne fonty do sklepu?

Dyskusja w 'Zmiana wyglądu sklepu i edycja zaawansowana' rozpoczęta przez użytkownika Marand, 27 Październik 2015.

  1. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    Czy można zmienić fonty w sklepie np. w pasku nawigacyjnym menu na inne niż są dostępne w edycji sklepu?
    Jeśli tak to jak to zrobić?
     
  2. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    można, np używając google fonts
    np dodajemy we własnych integracjach w nagłówku:
    Kod:
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    przykład dla fontu Lato
    a następnie w danej klasie używamy:
    Kod:
    font-family: 'Lato', sans-serif;
    
     
    Marand lubi to.
  3. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    No to biorę się do roboty :)
    Nie mogę namierzyć klasy którą chcę zmienić, to ta z głównym menu nawigacji: Promocje,Biżuteria, Nowości itd.
    próbowałem firebugiem, ale jakoś mi nie wychodzi bo nie wiem jak tego poprawnie szukać.
    Proszę pomóż :)
     
    Ostatnia modyfikacja: 27 Październik 2015
  4. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Za pomocą poniższego kodu powinno się udać, zamiast nazwy "Arial Black" należy wstawić nazwę czcionki

    Kod:
    .menu .innermenu .menu-list {
        font-family: Arial Black;
    }
    Oczywiście podczas definiowania font-family należałoby podać więcej rodzajów czcionek
    Kod:
    selektor { font-family: rodzaj, rodzaj1, rodzaj2,... }
    przykład:
    Kod:
    font-family: Verdana, Geneva, Arial, sans-serif;
    Edit: oczywiście można też skorzystać z prostszej metody, opisanej przez @TheL powyżej :)
     
    Marand lubi to.
  5. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    Nie wiem czy dobrze rozumiem, to co Ty proponujesz zmieni fonty globalnie w całym sklepie, a to co @TheL dla wybranego tekstu?
     
  6. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Mariusz napisał gotowe rozwiązanie jak dodać fonty, ja napisałem jak dodać zewnętrzne pliki fontów :)
     
  7. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    To w obu przypadkach zmiana fontów w całym sklepie, a jak zmienić tylko menu?
     
  8. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    @Marand to nie do końca tak, ja podałem wpis który należy dodać do odpowiedniej klasy co zresztą powtórzył Mariusz.
    Podany przeze mnie na początku kod dołączający styl z czcionkami dołącza go do kodu strony przez co wspomnianą klasą można go wywołać w dowolnym monecie przykładowo w menu.
    Podany przez mariusza
    .menu .innermenu .menu-list
    wygląda na wpis dotyczący właśnie menu
     
  9. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    Dobra, będę próbował wdrożyć rozwiązanie @Mariusza bo i tak to wszystko dla mnie trochę jak magia :)
    Jak zrobię to dam znac.
     
  10. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    rozwiązanie Mariusza jest uzupełnieniem mojego :)
    jak dodasz linię
    Kod:
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    
    to przy
    Kod:
    .menu .innermenu .menu-list {
    font-family: Arial Black;
    }
    
    możesz użyć czcionki: 'Lato', sans-serif;
    zamieniając font-family na:
    Kod:
    font-family: 'Lato', sans-serif;
    
    czyli czcionki której nie ma standardowo na komputerze, pobiera się ona z google fonts, a są tam ciekawe czcionki których w większości komputerów nie uświadczysz :)
     
    Mariusz lubi to.
  11. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    I znowu mam zamieszane :)
     
  12. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    @Marand Thel w sumie klarownie wyjaśnił funkcjonowanie czcionek, spróbuję teraz ja:

    Jeśli w sklepie Click Shop w opcji menu Konfiguracja -> Integracje -> Integracje własne wkleisz zaproponowany przez Thel kod:
    Kod:
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    To twój sklep Click Shop będzie mógł od tego momentu korzystać z zewnętrznych czcionek pobieranych przez Google. Powyższy kod umożliwia skorzystanie z czcionki Google o nazwie "Lato".

    Aby czcionka "Lato" mogła być zastosowana w menu, należy we własnym stylu CSS (Konfiguracja -> Wygląd -> Aktywny styl graficzny -> Własny styl CSS) wkleić poniższy kod:
    Kod:
    .menu .innermenu .menu-list {
    font-family: 'Lato', sans-serif;
    }
    Powyższy kod spowoduje zamianę czcionki tylko w menu sklepu na wybraną czcionkę. W tym przypadku będzie to czcionka pobrana z Google Fonts. W katalogu Google Fonts dostępnych jest tysiące czcionek, z których można skorzystać. Aby wybrać inną czcionkę z katalogu Google Font, należy przejść do katalogu: https://www.google.com/fonts i wybrać odpowiednią czcionkę. Po wybraniu czcionki, na ekranie zostanie wyświetlony kod, który należy wkleić w nagłówku strony.

    WYJAŚNIENIE: aby czcionka mogła być wyświetlona na ekranie użytkownika sklepu, to ten użytkownik sklepu musi mieć dostęp do plików zastosowanej w tekście czcionki. Mój pierwszy przykład z czcionką "Arial Black" jest poprawny, ponieważ każdy użytkownik powinien posiadać tę czcionkę w swoim systemie operacyjnym. Jeśli chcemy skorzystać z jakiś zewnętrznych czcionek (np. Google Fonts), to musimy w kodzie strony (a dokładniej w jej nagłówku head) podać lokalizacje pliku z naszą wybraną czcionką.

    Oczywiście istnieją również inne metody łączenia naszej strony WWW z plikami zewnętrznych czcionek, zainteresowanych odsyłam do Google ;-)
     
    Marand i TheL lubią to.
  13. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    Konstruktywnie, nie mam pytań i dzięki wszystkim za pomoc :)
     
  14. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Nie ma za co, z czcionkami google można naprawdę dużo zdziałać i dość szybko to działa. Tak jak napisał Mariusz warto dodawać też inne w danej klasie aby w przypadku problemów zostały one wczytane zamiast zalecanej czyli pierwszej.
     
  15. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    sprawdziłem i za Menu odpowiada
    Kod:
    /*czcionka w menu*/
    #box_menu ul li a {
      font-size: 1.2em;
      font-family: 'Lato', sans-serif;
      color:blue;
      padding-bottom: 0.2em;
      padding-left: 1.5em;
      padding-right: 1.5em;
      padding-top: 0.2em;}
    /*czcionka w menu po najechaniu*/
    #box_menu ul li a:hover {
      font-size: 1.2em;
      font-family: 'Lato', sans-serif;
      color:red;
      background:yellow;
      padding-bottom: 0.2em;
      padding-left: 1.5em;
      padding-right: 1.5em;
      padding-top: 0.2em;}
    
    :)
    Oczywiście podałem kolory od czapy :)
    Hmmm chyba, że nie chodzi o Menu kategorii :)
     
    Marand lubi to.
  16. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    Właśnie o to chodzi :) Jutro zadziałam i dam znać bo dzis już ledwo dyszę.
     
  17. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Polecam także tę witrynę - http://fontello.com/

    Ciekawe i bezpłatne tzw. "web fonty" w postaci różnych ikonek - a to FB, a to koperta z listem. Zamiast marnować czas na grafiki - można w prosty sposób zastosować i urozmaicić witrynę ;).
     
    Marand lubi to.
  18. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    Ten kod nie daje zmiany, za to ten od @Mariusz działa.
     
  19. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Wszystko chyba zależy od danej templatki, ja sprawdziłem ten kod i działał poprawnie. Musimy chyba rozdzielać dla której templatki jest dany kod aby łatwiej było wszystkim do tego dojść.
     
  20. Marand

    Marand Spryciarz

    Wiadomości:
    47
    Docenione treści:
    3
    Jasne, ja działam na RWD
     

Poleć forum znajomym