Opublikowane w przez Grzegorz Rusin

Zmiana wyglądu menu w Shoper 5

Kolejna odsłona poradnika edycji standardowej skórki oprogramowania Shoper. Tym razem zapraszam do zaprzyjaźnieniem się z edycją menu w najnowszej wersji oprogramowani (czyli Shoper 5.0.18).

Zaproponowana zmiana menu poziomego (z linkami dodawanymi w panelu zarządzania sklepem) jest całkowicie bezpieczna i nie przeszkadza w późniejszej aktualizacji oprogramowani także proszę się nie martwić :).

Oto menu standardowej (czerwonej) skórki oprogramowania Shoper(troszke je zwęziłem by się zmieściło w poście 🙂 )

A to efekt który chcemy osiągnąć (wybaczcie, że nie ma wielkich wodotrysków ale to ma być prosty poradnik tłumaczący podstawy):

Zabierając się do wdrożenia nowego menu musimy je troszkę zoptymalizować. Jak widzicie prezentowane menu stworzone zostało poprzez nałożenie warstwy kolorystycznej (w tym wypadku jest to gradient) oraz zaokrąglenia narożników. Poszczególne linki oddzielone są od siebie jasną belką składającą się z dwóch kolorów. Ponieważ optymalizacja jest kluczowym słowem zauważcie, że całe menu możemy stworzyć za pomocą tylko czterech niewielkich kawałków tej grafiki:

– lewa strona z zaokrąglonymi narożnikami (wysokie na 40px szerokie na 4px) ,

– gradient podstawowy (wysokie na 40px szerokie na 1px) ,

– separator (wysokie na 40px szerokie na 2px) ,

– prawa strona z zaokrąglonymi narożnikami (wysokie na 40px szerokie na 4px) ,

Po utworzeniu kopii skórki przechodzimy w tryb jej edycji i klikamy na zakładkę „Pliki graficzne” i oczywiście wgrywamy te cztery pliki.

Teraz jak już mamy wszystkie materiały gotowe przechodzimy do kodowania.

Klikamy na zakładkę „Własny styl CSS” i dodajemy kod nadpisujący klasy odpowiadające za wygląd menu.Podstawową klasą jest oczywiście .menu odpowiada ona za wygląd całego bloku menu (całej szerokości, piszę o tym nie bez powodu gdyż chcąc dodać menu, które ma (tak jak to prezentowane) białe tło należy zmienić kolor tła całego bloku (standardowo jest szare).

Chcąc więc zmienić kolor tego elementu wpisujemy w nasz CSS:

.menu {background-color: white;}

Po zmianie tła bloku głównego przechodzimy do formowania wyglądu konkretnego elementu menu. Naszym głównym plikiem graficznym jest gradient.jpg (powód dla którego używam plików jpg mimo, że są mniej zoptymalizowane od .png wyjaśnię innym razem) . Chcąc stworzyć menu należy powielić ten plik tak by wypełniał całą szerokość.

Klasa którą musimy edytować nazywa się .innermenu, poprzedzimy ją jeszcze znacznikiem klasy .menu by tylko tam zachodziło formatowanie wyglądu oraz ustalamy wysokość na żądane 40px:

.menu .innermenu {background: url(„../images/user/gradient.jpg”) repeat-x scroll 0 0 transparent; height:40px;}


Teraz nasze menu powinno już mieć piękne tło więc zajmijmy się narożnikami. Do tego celu należy użyć klas odpowiadających za odpowiednie końce menu czyli .leftside i .rightside.

.menu .leftside {background: url(„../images/user/lewy.jpg”) no-repeat scroll 0 0 transparent;height: 40px;width: 4px;}

.menu .rightside{background: url(„../images/user/prawy.jpg”) no-repeat scroll 0 0 transparent;height: 40px;width: 4px;}

Pozostało nam zająć się separatorem. Można go wstawić na kilka sposobów, opisany tutaj jest najprostszy i opiera się na tym co mamy w standardzie. Ja osobiście najczęściej dodaje jeszcze do menu efekt zmiany grafiki po najechaniu na link co wymusza troszkę inne podejście ale o tym może innym razem.

Separator w standardowej skórce Shoper dodawany jest z wykorzystaniem obiektu img jaki mamy w kodzie HTML, aby go zmienić nadpiszemy klasę:

.menu li h3 img {background: url(„../images/user/separator.jpg”) no-repeat scroll 0 0 transparent;height: 40px;margin: 0 15px;width: 2px;}

Jak zauważycie do klasy wstawiliśmy odpowiednio plik graficzny jako tło,wysokość, margines boczny i szerokość.

Tak zmienione klasy powinny zbudować nam żądany wygląd tła menu więc pozostaje już tylko zająć się czcionką. Do tego wystarczy użyć np takiego kodu:

.menu a{color: white; font-size:14px;}

Te kilka linijek kodu powinny wam całkowicie wystarczyć do zmiany wyglądu menu w waszych Shoperach. Mam nadzieję, że wszystko wytłumaczyłem językiem zrozumiałym ale jak będziecie mieć jakieś pytania to jestem oczywiście do dyspozycji.

Pozdrawiam G.R.

37 odpowiedzi do “Zmiana wyglądu menu w Shoper 5”

    1. Tak oczywiście, w zarządzaniu stopką ustaw tylko jedną grupę linków (standardowo jest tam chyba 5 grup). Jak ustawisz jedną grupę linków to system wyświetli je tak jak w poprzedniej wersji czyli w poziomej linii…

  6. Witam, ja mam moze banalne pytanie ale jest srodek nocy, mecze i temat mnie powoli powala.
    Jak zminic kolor tla strony? Niby banlane ale cos mi nie wychodzi z modyfikacja ich CSSa.Chodzi o glowna by zastapic szary czyms innym lub jakas grafika.
    Pozdrawiam

    1. edycja tła w shoperze to trochę złożony proces :). Skórka Shopera składa się z kilku podstawowych wierszy i każdy ma ustalone tło więc trzeba je zmienić. Zobacz klasy .header, div.logo, .menu, .breadcrumbs, .main, .footer
      Jak chcesz dać jedno tło to zmień kolor tych klas na transparent i dodaj tło do elementu .container

    1. to dlatego że background-color: kreśla jedynie kolor tła a te linie są wstawione jako zdjęcia więc by się nie wyświetlały trzeba by dodać background-image:none;

  18. No dobra, może i działa ale trzeba zrobić jedna ważną rzecz o której nie napisał autor, tj
    usunąć znaki „” z każdej linijki kodu gdzie podajemy adres do obrazka. wtedy działa

  19. W wielu skórkach proponowanych przez shoper jest w menu umieszczona wyszukiwarka – jak to zrobić? A najlepiej jak umieścić tam wyszukiwarkę googlową, bo ta shoperowa jest do niczego: nie podpowiada i nie wyszukuje słów np. w innych przypadkach…
    Dzięki z góry 🙂

    1. Aby przesunąć wyszukiwarkę do menu musisz trochę pokombinować z kodem CSS. Zerknij na kod sklepów które mają już to zrobione. Jeżeli chodzi o wyszukiwarkę google to nigdy jej w shoperze nie instalowałem więc nie jestem w stanie powiedzieć czy to nawet możliwe 🙂

  20. Dziękuję Panu za porady opublikowane na tym blogu, dzięki nim udało mi się sprawnie przeprowadzić sporo modyfikacji.

    Mam pytanie dotyczące tła i zaokrąglonych narożników boksów. Na całej stronie sklepu umieściłem tło. Przygotowałem wszystkie elementy boksów i zapisałem je jako przezroczyste .png (przezroczyste tam, gzie ma być widoczne tło strony). W przypadku np. nagłówków boksów tła .leftcorner i .rightcorner są „przykrywane” przez tło .topbar, przez co zaokrągleń i tak nie widać. Standardowo elementy boksów szablonu nie są przezroczyste i wszystko wygląda dobrze jeśli tło strony jest jednokolorowe. Jeśli jednak tłem jest wzorzysty plik graficzny narożniki boksów nie wygladają dobrze.

    Czy mogę prosić o podpowiedź dotyczącą skutecznego wyświetlenia boksów z uwzględnieniem przezroczystości?

    Pozdrawiam!

    1. Witaj, jeżeli Twoje zaokrąglenia mają przeźroczystość a tło nagłówka ma ustalony kolor to niestety nie będziesz widział zaokrągleń bo narożniki są nakładane na cały nagłówek. Do zaokrąglenia narożników proponuje użyć CSS. Wystarczy że podasz promień zaokrąglenia dla nagłówka i nie musisz się martwić niczym innym. Sprawdź border-radius w CSS.

  21. Dziękuję za odpowiedź. To rozwiązanie jest rzeczywiście rozsądne ale jednak kompromisowe (problem IE). Być może jednak nie warto czekać na maruderów korzystających ze starych przeglądarek?

    Jeszcze jedno pytanie i prośba o podpowiedź: czy możliwe jest wykorzystanie poziomego menu pod nagłówkiem do wyświetlenia kategorii produktów innych niż te w głównym menu? Konkretny przykład: w głównym menu kategorie zabawek a w poziomym przedziały wiekowe?

    Miłego dnia.

    1. standardowo moduł z menu kategorii wyświetla wszystkie kategorie a do menu poziomego możesz wybrać np jedną konkretną. Opcją do rozważenia jest np ukrycie jednego z linków w module menu kategorii poprzez CSS

Dodaj komentarz