PORADNIK Obrazki/teksty przed elementami w sklepie

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika TheL, 3 Luty 2019.

  1. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Wiele osób pyta o to jak umieścić obrazek lub cokolwiek innego przed różnymi elementami w sklepie, przykładowo przed jakimś menu lub linkiem.
    Sprawa jest bardzo prosta.
    Powiedzmy, że mamy górę sklepu wyglądającą tak:
    001.png

    i chcemy przed elementami menu wstawić powiedzmy literki ABC, robimy to następująco:
    We własnym stylu dodajemy:
    Kod:
    #headlink14 > span::before {
        content: "ABC";
    }
    #headlink6 > span::before {
        content: "ABC";
    }
    #headlink1 > span::before {
        content: "ABC";
    }
    #headlink8 > span::before {
        content: "ABC";
    }
    #headlink9 > span::before {
        content: "ABC";
    }   
    #headlink10 > span::before {
        content: "ABC";
    }   
    #headlink11 > span::before {
        content: "ABC";
    }   
    
    numerki headlink możemy zobaczyć np w źródle sklepu

    Otrzymamy efekt:
    002.png
    Oczywiście w każdym content możemy wpisać coś innego, dzięki czemu możemy mieć przy każdym elemencie menu inną treść.

    Ok, ale jak wstawić tu np ikonkę z fa-icon?
    Powiedzmy, że przy pierwszym menu wstawiamy ikonkę "plik"
    w moim CSS wstawiamy:
    Kod:
    #headlink14 > span::before {
    font-family: FontAwesome;
    content: "\f15b";
    padding-right:5px;
    }
    
    numerki do content możemy pobrać ze strony: https://fontawesome.com/v4.7.0/
    UWAGA!! działa tylko część tych ikon
    tu dodatkowo dodałem prawe wypełnienie aby ikonka była odsunięta od napisu, za to odpowiada padding.
    Efekt będzie taki:
    003.png
    a po najechaniu oczywiście:
    004.png
     
    kolukas lubi to.
  2. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Jeśli chcemy użyć obrazka musimy go przygotować w odpowiedniej wielkości i wrzucić na sklep aby mieć do niego link, wtedy we własnym CSS wrzucamy:
    Kod:
    #headlink14 > span::before {
    content: url('https://sklep-demo.home.pl/public/flags/pl_PL.png');
    padding-right:5px;
    }
    
    osiągniemy efekt:
    005.png
    i oczywiście po najechaniu będziemy mieli;
    006.png
     
    Bekon, LukaszC, Przemek143 oraz 1 dodatkowa osoba lubi tego posta.
  3. kolukas

    kolukas Spryciarz

    Wiadomości:
    46
    Docenione treści:
    11
    Dzięki TheL. Super poradnik! A czy istnieje jakiś sposób na to, żeby sklep zaczął współpracować z ikonami Font Awesome 5?
     
  4. machum93

    machum93 Znawca

    Wiadomości:
    225
    Docenione treści:
    28
    @kolukas
    w integracjach własnych w head dodajesz nową czcionkę w następujący sposób:
    Kod:
    <link href="https://use.fontawesome.com/releases/v5.10.1/css/all.css" rel="stylesheet">
    Później w sekcji CSS będziesz mógł korzystać z font awesome 5 w następujący sposób:

    Kod:
    .klasa:before{
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
       content: "\f167";
    }
    Może być taka systuacja, iż niektóre ikony z poprzedniej wersji font awesome będą wymagały wymiany ale to już trzeba zobaczyć na konkretnym przykładzie.
     
    kolukas lubi to.
  5. kolukas

    kolukas Spryciarz

    Wiadomości:
    46
    Docenione treści:
    11
    Dzięki za odpowiedź! Faktycznie działa. W końcu osiągnąłem zamierzony efekt w menu :).
     
  6. Fryzjerka

    Fryzjerka Spryciarz

    Wiadomości:
    49
    Docenione treści:
    6
    hej, pomoże ktoś jak dodać nową belke w nagłówku nad belką login w której zawre numer telefonu i kwotę darmowej dostawy;-)

    pozd
    Paula
     
  7. Marcin Z.

    Marcin Z. Ekspert ds. e-commerce home.pl Moderator forum

    Wiadomości:
    10
    Docenione treści:
    1
    Hej Paula.
    Gdybyś nadal miała problem zapraszamy do kontaktu z naszymi specjalistami.
    Wycenimy wykonanie modyfikacji.
     
  8. Bekon

    Bekon Początkujący

    Wiadomości:
    7
    Docenione treści:
    0
    Dzięki za poradę. Użyteczna. Ale nasuwają się dwa dalsze pytania
    1. Jak obrazkiem zastąpić tekst w menu?
    2. Jak dodać/zastąpić obrazkiem elementy podmenu?
     
  9. machum93

    machum93 Znawca

    Wiadomości:
    225
    Docenione treści:
    28
    możesz zrobić to używając id linków z menu i dodając im background-image a dla tekstu przycisku ustawiasz przezroczysty kolor czcionki aby zachować wymiary przycisku
    Efekt może być np taki
    upload_2023-7-28_4-23-21.png
     
  10. Bekon

    Bekon Początkujący

    Wiadomości:
    7
    Docenione treści:
    0
    A napiszesz może jak tego dokonać?
     
  11. machum93

    machum93 Znawca

    Wiadomości:
    225
    Docenione treści:
    28
    Np.
    Kod:
    a#headlink1 {
        background-image: url(/skins/user/rwd_clickshop_1/images/logo.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        & span {
            color: transparent;
        }
    }
    gddzie headlink1 to id konkretnej kategorii w sklepie oczywiście powtórzenia oraz rozmiar możesz modyfikować według potrzeby
     
  12. Bekon

    Bekon Początkujący

    Wiadomości:
    7
    Docenione treści:
    0
    Pięknie, dodałem jeszcze wyrównanie:
    Kod:
    background-position: center; 
    i hover i śmiga. Bardzo dziękuję. Całość może wyglądać tak:
    Kod:
    a#headlink1 {
        background-image: url(/skins/user/rwd_clickshop_1/images/logo.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center;
        & span {
            color: transparent;
        }
    }
    a#headlink1:hover {
        background-image: url(/skins/user/rwd_clickshop_1/images/logo2.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center;
        & span {
            color: transparent;
        }
    }
    
    
     

Poleć forum znajomym