W TRAKCIE MENU - obrazki obok nazw kategorii

Witam

czy można jakimś sposobem dodać do nazw kategorii w menu obrazek ( gif, jpg ) .

W załączeniu zdjęcie jakby to miało wyglądać .

Pozdrawiam

 

myślałem aby gdzieś wywoływać zdjęcie poprzez instrukcje do kategorii ID13 daj zdjęcie "XXX"

 

Nie mam żadnego gotowca, dawno w temacie sklepu sam nic nie tworzyłem. A może zamiast edytować szablon skorzystasz z gotowego rozwiązania? https://pomoc.home.pl/baza-wiedzy/kategorie-obrazkowe

Zawsze możesz edytować pliki .tpl skórki i dodać nowe elementy. Każda kategoria ma swoje własne ID więc nie powinno być problemy z identyfikacją jej, więc pozostaje tylko zbudować kod. Jeśli nikt na forum nie ma gotowego rozwiązania, pozostaje pomoc agencji lub w/w aplikacja. Polecam. @LukaszC @PawelS pomogą Ci wdrożyć aplikację, chociaż pełny opis masz w Centrum Pomocy.

 

Ustaw sobie dla każdej kategorii jako background.
Kod dotyczy oczywiście własnej konfiguracji CSS.
Określ obiekt i przypisz mu parametr background. Dla każdego z osobna.

Code:

background: url('../../styles/../images/user/obrazek.jpg') no-repeat 46% 0% transparent;

Obrazek wrzucasz do konfiguracja, wygląd, pliki graficzne

 

to faktycznie ma sens , czyli wywoływać w CSS a jak składnia cała musiała by wyglądać ? Wywołanie background do np kategoria 5 ? Z góry wielkie dzięki za pomoc .

p.s. świetne masz przejścia ( ładowanie strony ) . Zdradzisz czy da się coś takiego w clickshopie zrobić ?

 

Code:

li#category_19 {
background: url('../../styles/../images/user/obrazek.jpg') no-repeat 46% 0% transparent; }

Składnia według kategorii
czyli pierwsza kategoria BAGAŻNIKI BAZOWE - dobierz do samochodu ma znaczniki li#category_19.
Każda kategoria ma swój więc trzeba samemu sprawdzić badając elementy na własnej stronie.

 

nie chce się obrazek załadować wpisałem w css :


li#category_19 {
background: url('../images/user/bazowe.gif') no-repeat 46% 0% transparent; }

 

odwołuje , działa , teraz tylko grafiką posterować aby ładnie wpasowało się
dzięki !

 

jeszcze próbuje sobie poradzić aby background pozostał po kliknięciu na kategorię ale niestety słabo mi idzie . Można liczyć na wsparcie ?

mój kod css :
#menu (max-width: 480px)
.shop_index .rwd .main {
z-index: 1;
}
#box_menu .boxhead {
background: url('../images/hbox_header.png') left top repeat-x;
}

#box_menu .boxhead .leftside {
background: url('../images/hbox_headerleft.png') left top no-repeat;
}

#box_menu .boxhead .rightside {
background: url('../images/hbox_headerright.png') right top no-repeat;
}


#box_menu ul li.current a {
font-weight: bold;
color: black;
font-size:13px;
}




#box_menu ul li li {
background: url('../images/menu_subdot.png') left 4px no-repeat;
font-size:14px;
color:black;
font-weight: bold;
background-color: #b5b5b5; /* kolor menu wybrane */
}


#box_menu ul li a {
color: black; /* kolor czarny * kolor czcionki nieaktywnego menu*/
font-size:12px;

}






li#category_19 {
background: url('../images/user/bazowe.gif') no-repeat 46% 0% transparent; }

 

Pobaw się selektrem
hover

hover umieszczasz zawsze na końcu kodu obiektu po dwukropku bez spacji
np
#box_menu ul li a:hover

Odpowiada to za obiekt aktywny w danym momencie lub przy najechaniu na jego myszką.

A więc musisz osobno ustawić selektory dla obiektu aktywnego i nieaktywnego.

 

powinienem to stosować razem :
li#category_19 {
background: url('../images/user/bazowe.gif') no-repeat 46% 0% transparent; }

czy gdzie indziej

 

Wykonujesz to mniej więcej tak:

Code:

li#category_19:hover
{
background: url('../images/user/bazowe.gif') no-repeat 46% 0% transparent; }

 

próbowałem tej składni ale niestety przy niej wogóle znika background

 

Ale musisz zrobić kod dla li#category_19 i dla li#category_19:hover

 

mam taką składnie:

li#category_19
{
background: url('../images/user/bazowe.gif') no-repeat 100% 0% transparent; }

li#category_19:hover
{
background: url('../images/user/bazowe.gif') no-repeat 100% 0% transparent; }