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. Wydaje się proste, trzeba spróbować. Może w następnej podpowiedzi przerobienie lewego Menu 🙂 Pozdrawiam.

  2. warto się pobawić…czasem można ciekawy efekt osiągnąć…następnym razem omówię edycje wyglądu modułów…

  3. Witam

    Czy w Shoper 5 istnieje możliwość utworzenia takiej stopki jaka była w wersji 4? Tzn. zwykła linia i informacje pod nią. Byłbym wdzięczny za pomoc.

    Pozdrawiam

    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…

  4. Czy jest szansa na artykuł opisujący edycję, zmianę wyglądu menu kategorii ?
    Przydało by się tam więcej grafiki niż w domyślnej skórce.

    1. nawet zacząłem prace nad takim postem… ale niestety pojawi się najwcześniej w przyszłym tygodniu

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

  6. A czy mógł bys powiedziec coś więcej o zmianie koloru czcionki w całym sklepie z domyślnego niebieskiego na poprostu czarny?? Jest to do zrobienia??

    1. rozumiem że chodzi Ci o kolor linków? Jak chcesz je zmienić to dodaj do CSS:
      a { color:tu podaj kolor; }

  7. Wielkie dzięki;) A czy istnieje możliwość zmiany koloru przycisku szukaj w wyszukiwarce i modułu koszyk na jakiś własny kolor??

    1. praktycznie wszystko możesz zmienić… użyj wtyczki firebug by podglądnąć jaką klasę trzeba zmienić i dopisz odpowiednie zmiany do user.css

  8. Witam, u mnie po wprowadzonych zmianach nie działa …. mam brak tła pod menu …. tak jakby system nie widział wgranych plików ….

  9. Witam
    W jaki sposób można usunąć z header pionowe linie oddzielające „Zarejestruj się”, „Zaloguj”?

    1. jeżeli chodzi o te linie boczne to są one dodane jako tło więc trzeba by zmienić tło .header li oraz .header ul

  10. jeśli zrobię to w ten sposób to nie działa: .header ul {background-color: #E65A1C;} .header li {background-color: #E65A1C;}

    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;

  11. Po wgraniu plików oraz dodaniu wszystkich scieżek nic nie działa, więc proponuje nie tracić czasu na modyfikacje opisane w blogu

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

    1. proponuje czytać moje wpisy uważniej bo często powtarzam by nie kopiować kodu bezpośrednio ze strony!

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

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

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

  16. witam, mam pytanie w jaki sposób wyśrodkować cenę i przycisk dodaj do koszyka na stronach głównej i liście produktów?

Dodaj komentarz

Twój adres email nie zostanie opublikowany.