Edycja wyglądu modułu kategorii w Shoper 5

Kolejny post z serii poradników dla właścicieli oprogramowania Shoper. Dzisiaj zajmę się zmianą wyglądu modułu z listą kategorii (menu kategorii).

Podobnie jak w poprzednich odsłonach, zmiany proponowane w tym artykule nie ingerują w pliki PHP czy też HTML sklepu także ich zastosowanie nie wywołuje problemów z aktualizacjami.

Dla tych którzy nie czytali innych moich postów przypominam, że zmiany w skórce dokonujemy TYLKO na kopii skórki podstawowej. Standardowo oprogramowanie Shoper zawiera 4 skórki podstawowe warto więc skopiować taką której kolorystyka pasuje do waszych zmian.

Zacznijmy może od pokazania jak docelowo będzie wyglądać nasz moduł. Mam nadzieję, że wybaczycie prostotę modułu ale przygotowałem go na szybko na potrzebę postu 😉

Jak widzicie menu składa się z nagłówka z dodatkową ikonką oraz części centralnej z poszczególnymi kategoriami z dodatkową strzałką. Po najechaniu na daną kategorię zakładamy drobne podświetlenie oraz zmianę koloru czcionki.

Jak widzicie menu składa się z nagłówka z dodatkową ikonką oraz części centralnej z poszczególnymi kategoriami z dodatkową strzałką. Po najechaniu na daną kategorię zakładamy drobne podświetlenie oraz zmianę koloru czcionki.

Aby wdrożyć tego typu grafikę do Shoper`a należy ją odpowiednio przyciąć tak by zminimalizować wykorzystane pliki. W tym przypadku powinniśmy dysponować następujacymi częściami:

  • lewą częścią tła nagłówka,
  • centralną częścią tła nagłówka,
  • prawą częścią tła nagłówka,
  • ikonką przy nazwie w nagłówku,
  • strzałką do kategorii,
  • lewym dolnym narożnikiem ramki,
  • prawym dolnym narożnikiem ramki,
  • dolną ramką.

Zacznijmy zatem od nagłówka, z lewej strony zauważyć możecie zarówno zaokrąglony narożnik jak i lekką zmianę cieniowania dlatego lewa strona musi być na tyle szeroka by te zmiany koloru zawierać. Po zaokrągleniu lewego narożnika oraz lewej części tła resztę centralnej części wypełnia gradient także aby uzyskać taki efekt wystarczy nam jedno-pikselowy fragment, który później powielimy.

Pozostaje także wykroić prawą część tak by zawierała prawy narożnik i całe tło nagłówka mamy gotowe. Teraz możemy wyciąć ikonkę. Najlepiej zrobić to tak by element nie miał tła (w tym wypadku wycinamy tylko czarny kolor) i zapisujemy plik w formacie umożliwiającym wykorzystanie przeźroczystości (np .png lub .gif).

Oto pliki które otrzymałem po wykonaniu cięcia:



– lewa strona tła nagłówka,(rozmiar 11×37 px)



– tło nagłówka, (rozmiar 1×37 px)



– prawa strona tła nagłówka, (rozmiar 4×37 px)


– ikona nagłówka, (rozmiar 11×9 px)



– prawy dolny róg ramki, (rozmiar 4×4 px)



–  lewy dolny róg ramki, (rozmiar 4×4 px)



– może nie widać ale jest tu plik ramki 🙂 (rozmiar 1×1 px)



– strzałka,  (rozmiar 6×8 px)

 

Mając przygotowane wszystkie pliki dodajemy je do naszej skórki poprzez panel i przechodzimy do fazy pisania kodu CSS.

Na początek przedstawię może małą wizualizację standardowego elementu modułu Shoper 5. Czerwonymi liniami zaznaczone są elementy główne kodu z jakiego zbudowany jest moduł.

Taka budowa modułu ma za zadanie umożliwić szerokie możliwości edycyjne bez potrzeby wprowadzania zmian w kodzie HTML.

Oczywiście kod css odpowiedzialny za wygląd modułów zbudowany jest tak by nadawać styl wszystkim boksom jednocześnie ale istnieje możliwość edycji poszczególnych modułów poprzez wykorzystanie ich indywidualnych id.

Id modułu listy kategorii to #box_menu, dzięki niemu zmienimy tylko boks z kategoriami.

Cały kod należy dodać poprzez panel administracyjny sklepu (zakładka własny kod CSS).

Jak możecie zauważyć na pliku ze standardową budową modułu narożniki nagłówka moglibyśmy dodać poprzez klasy .main .box .topbar .leftcorner lub .main .box .topbar .rightcorner. Wykorzystanie tych klas wymusiło by na nas wykonanie dodatkowych elementów graficznych dlatego całkowicie wyłączymy cały element .topbar dodając na początek kod:

.main #box_menu .topbar .leftcorner {
display: none;
}

Po pozbyciu się górnej części dodajmy kod ustalający wygląd nagłówka:

.main #box_menu .boxhead{
background: url("../images/user/top.png") repeat-x 0 0 transparent;
}

Jak widzicie dodałem tylko kod wstawiający plik top.png jako tło i powielający go wzdłuż osi x (repeat-x), nie nadawałem koloru nagłówka tła który pojawiłby się gdyby nie można było pobrać pliku (ja wpisałem transparent) ale wy możecie dodać tam dowolny kolor . Możecie też zmienić inne parametry takie jak np wysokość (standardowo jest to 37px).

Następnie lewą stronę nagłówka (dodając zdjęcie jako tło oraz ustalając szerokość):

.main #box_menu .boxhead .leftside {
background: url("../images/user/top_left.png") no-repeat 0 0 transparent;
width: 11px;
}

Później poprawiamy prawą stronę nagłówka (dodając zdjęcie jako tło oraz ustalając szerokość):

.main #box_menu .boxhead .rightside {
background: url("../images/user/top_right.png") no-repeat 0 0 transparent;
width: 4px;
}

Na koniec pozostało nam wstawić ikonkę przy nazwie modułu. Do tego wykorzystamy plik graficzny który jest umieszczony w kodzie html właśnie w tym celu. Pamiętajcie by podać rozmiar pliku oraz dodać wartość display.

.main  #box_menu .boxhead h3 img{
display: inline;
background: url("../images/user/icon.png") no-repeat 0 0 transparent;
width: 11px;
height: 9px;
vertical-align: middle;
}

To powinno załatwić nam sprawę nagłówka, zajmijmy się wiec ramką. Ramkę możemy zbudować poprzez wykorzystanie pięciu elementów.  Dwóch brzegów centralnej części modułu oraz 3 części spodu modułu. Zacznijmy od boków:

.main #box_menu .innerbox .leftside {
background: url(„../images/user/bottom.png”) repeat-y scroll 0 0 white;
width:1px;
}

W tym przypadku ustaliłem, że element ma mieć szerokość 1px a tło elementu ma tworzyć się poprzez powielenie pliku bottom.png wzdłuż osi y, ustaliłem także kolor na biały.

.main #box_menu .innerbox .rightside {
background: url(„../images/user/bottom.png”) repeat-y scroll 0 0 white;
width:1px;
}

Teraz ustalam wygląd dolnej ramki budując ją podobnie jak wcześniej z pliku bottom.png. W tym przypadku ważne jest aby ustalić wysokość elementu oraz kolor tła. Kolor tła potrzebny nam jest dlatego, że wykorzystujemy plik o wysokości 1px więc pozostałe trzy pixele musimy czymś wypełnić (wypełniamy więc kolorem białym) i ustalamy by plik wyświetlał się w dolnej części tego elementu.

.main #box_menu .bottombar{
background: url("../images/user/bottom.png") repeat-x scroll left bottom white;
height:4px;
}

Teraz dodajmy narożniki poprzez klasy:

.main #box_menu  .bottombar .leftcorner {
background: url(„../images/user/bottom_left.png”) no-repeat scroll 0 0 transparent;
width:4px;
}
.main #box_menu  .bottombar .rightcorner {
background: url(„../images/bottom_right.png”) no-repeat scroll 0 0 transparent;
width:4px;
}

Z takim kodem mamy już gotowy nagłówek oraz ramkę modułu, pozostaje zająć się częścią główną czyli listą kategorii.

 

Zacznijmy od pozbycia się liczb z ilością produktów w danej kategorii, możemy to zrobić na dwa sposoby albo wyłączyć je poprzez panel administracyjny (wystarczy kliknąć na ikonę edycji znajdującą się w prawym górnym rogu modułu w dziale zarządzania modułami skórki) lub dodać kod display:none do elementu wyświetlającego liczby.

Po wyłączeniu liczb zajmijmy się usunięciem niepotrzebnymch odstępów i marginesów:

.main #box_menu  .innerbox {
padding: 0;
}
#box_menu .innerbox ul.standard, #box_menu .innerbox ul.folded{
margin:0;
}

Zmieniamy także wysokość wiersza poszczególnych kategorii:

#box_menu .innerbox ul.standard li, #box_menu .innerbox ul.folded li{
padding: 0;
line-height: 22px;
}

Teraz dodajmy kod który wyświetli nam strzałki przy poszczególnych linkach do kategorii ustalając położenie strzałki na 8px od lewej i 10px od górnej krawędzi. Ważne jest także by nie zapomnieć o ustaleniu wartości display.:

#box_menu .innerbox ul.standard li a, #box_menu .innerbox ul.folded li a{
background: url(„../images/user/arrow1.png”) no-repeat scroll 8px 10px transparent;
padding: 0 0 0 30px;
display:block;
}

następnie ustalamy aby po najechaniu myszką na link zmieniło nam się tło na takie jak w projekcie:

#box_menu .innerbox ul.standard li a:hover, #box_menu .innerbox ul.folded li a:hover{
background: #b780b7;
}

I to koniec tego małego przemeblowania 🙂 Mam nadzieję, że wam to w czymś pomoże. Na koniec wspomnę także o możliwości dodania różnych plików graficznych do poszczególnych kategorii. Np posiadając kategorię szklanki możecie ustalić by posiadała ikonkę szklanki. Aby tego dokonać wykorzystajcie indywidualne id każdej kategorii i zmieńcie np:

#box_menu .innerbox ul.standard li a, #box_menu .innerbox ul.folded li a{
background: url("../images/user/arrow1.png") no-repeat scroll 8px 10px transparent;
}
na
#box_menu .innerbox ul.standard #category_9 a, #box_menu .innerbox ul.folded #category_9 a{
background: url("../images/user/inny_plik.png") no-repeat scroll 8px 10px transparent;
}

Zachęcam do testowania różnych opcji i zabawy z kodem, jak uda wam się coś zrobić to podeślijcie linka.

Pozdrawiam

42 odpowiedzi do “Edycja wyglądu modułu kategorii w Shoper 5”

  1. witam, jestem na etapie rozwoju firmy i nie mam za bardzo czasu aby rozwinąć sklep pod względem graficznym jedynie co chciałbym zmienić na stronie to to żeby menu kategorii było bardziej czytelne bardzo bym był wdzięczny o jakąś radę czy drobną pomoc do 3 miesięcy będę chciał zmienić całkowicie grafikę na stronie to też pewnie zgłoszę się i z tym do Pana 🙂

  2. WItam serdecznie

    Na wstępie dziękuję bardzo za Twą pracę włożoną w ten blog.
    Odwiedzam regularnie i w dużej części wręcz uczę się podstaw tutaj zawartych.
    Na teraz nie jestem w stanie zainwestować w fachowca,który przygotowałby
    dla mnie shoper „od deski do deski” więc staram się jedynie troszkę „podpicować” domyślną skórkę (zmiana kolorów)
    Napodkałem jeden problem i mam nadzieję uzyskać pomoc: (przepraszam za laiczny opis)
    -mianowicie chodzi mi o odstępy między boksami, gdzie .main.top.boxbar spotyka się z .main.bottom.topbar następnego boxu nad nim,
    w tym miejscu mam wolną przestrzeń ok.6-8px w której u mnie widać tło clasy main ;/
    -chciałbym jakoś kotrolować tą przestrzeń lub ją usunąć aby boksy się stykały.
    Proszę o przynajmniej naprowadzenie w którym miejscu szukać , ponieważ DragonFly mi nie pomógł i mam dość, a przeraża mnie skład z dopasowaniem koloru do tego tła.
    Z góry dziekuję i pozdrawiam

    1. Ciesze się, że blog ułatwia Ci pracę z Shoperem.
      Jeżeli chodzi o sprawę odstępów między modułami to odpowiada za nie klasa .main .box która ustawia 5px odstęp od górnej i dolnej krawędzi przez styl margin:5px 0;

  3. witam ponownie – bardzo zależy mi na czasie a mam problem z menu kategorii
    jest nie czytelna – jak co bardzo bym prosił o jakieś wskazówki ….
    co mógłbym zrobić abym to poprawił

    1. aktualnie nie ma takiej możliwości gdyż system pobiera informacje o podkategoriach dopiero po kliknięci na daną kategorię. Z tego co wiem w aktualizacji 5.3 ma być pełny dostęp do kategorii oraz podkategorii więc może uda się wykonać takie otwarte menu. Dam znać jak zaktualizuje się jakiś nasz soft

    1. rozmiar lewej kolumny nie ulega zmianie, cały czas jest taki sam. Problemem tworzy box „Wyszukiwanie wg marek” gdzie dodane są zdjęcia które „rozpychają” cały moduł

  4. Witam. Dobra robota naprawdę pomocne sam skorzystałem. W kodzie wkradło się kilka błędów postaram się je poprawić:

    1. .main #box_menu .boxhead .leftside {
    background: url(„../images/user/top_right.png”) no-repeat 0 0 transparent;
    width: 4px;

    powinno być: (.rightside a nie .leftside)

    .main #box_menu .boxhead .rightside {
    background: url(„../images/user/top_right.png”) no-repeat 0 0 transparent;
    width: 4px;

    2. .main #box_menu .bottombar .leftcorner {
    background: url(„../images/bottom_left.png”) no-repeat scroll 0 0 transparent;
    width:4px;
    }
    .main #box_menu .bottombar .rightcorner {
    background: url(„../images/bottom_right.png”) no-repeat scroll 0 0 transparent;
    width:4px;
    }

    powinno być: (ścieżki do plików są złe zapomniałeś dodać /user/w środku)

    3.#box_menu .innerbox ul.standard li a, #box_menu .innerbox ul.folded li a{
    background: url(„../images/user/arrow.png”) no-repeat scroll 8px 10px transparent;
    padding: 0 0 0 30px;
    display:block;

    powinno być: (zła nazwa pliku grafiki nie arrow.png tylko arrow1.png)

    4. #box_menu .innerbox ul.standard li a, #box_menu .innerbox ul.folded li a{
    background: #b780b7;
    }
    powinno byś:

    #box_menu .innerbox ul.standard li a:hover, #box_menu .innerbox ul.folded li a:hover{
    background: #b780b7;
    }

    no to chyba tyle niby nic ale dla kogoś kto dopiero zaczyna się w tym bawić mam nadzieje, że będzie pomocne

    aha i ja jeszcze dodałem na początku kod:

    .main #box_menu .topbar .rightcorner {
    display: none;
    }
    czyli to samo tylko dla prawego rogu

    Pozdrawiam.

  5. Witam,
    Także chętnie tutaj zaglądam, pytanie dotyczące na stałe rozwiniętego menu już padło, ale została wydana wersja 5.3, wprowadzająca poziome menu, więc może już coś się zmieniło w kwestii rozwinięcia podkategorii na stałe?
    dzięki z góry za info

    1. niestety aktualne zmiany dotyczyły tylko menu w obrębie nagłówka, moduł menu kategorii nie uległ zmianie więc jeszcze nic nie da się w tej sferze zmienić. Kompletuję swoją małą listę zmian które będę chciał przeforsować w Shoperze na nowy rok, może uda się załatwić również sprawę kategorii.

  6. Witam, super porady szkoda, że nie znalazłem bloga wcześniej zaoszczędziłbym kilkadziesiąt godzin mojego życia 😉 Mam pytanko nie wiecie jak zmienić nazwę nowego rozwijanego menu kategorii na np. Nasza oferta?

    1. Z tego co się orientuję aktualnie nie ma takiej możliwości (chyba przeoczyli to przy dodawaniu), sprawa jest jednak zgłoszona więc najprawdopodobniej w następnej aktualizacji będzie to poprawione. Nie wiem jeszcze w jaki sposób będzie to edytowalne ale najpewniej poprzez system zarządzania frazami językowymi…

      1. Ok, powęszyłem trochę głębiej i znalazłem rozwiązanie. Jeżeli chcesz zmienić nazwę Menu to przejdź do działu zarządzania językami, wejdź na frazy języka polskiego i dodaj nową frazę gdzie jako „klucz” wpisz Menu a jako „Wartość” dowolną inną frazę np Nasza oferta

  7. Witam,

    Jeśli dokanamy takich modyfikacja jak tu przedstawione , zmienia nam się kategoria główna i wszytkie pod kategorie, problem pojawia sie wtedy jak chcemy do kategori głównej przypisać wiekszy obrazek ,i jest on wtedy dulowany na wszytkie pod rzędne kategorie , da radę to jakoś wyłaczyć. Mam najnowszą wersję.

    Pozdrawiam

    1. Jest kilka sposobów by sobie z tym poradzić. Do każdej kategorii możesz dostać się poprzez indywidualny identyfikator także jak chcesz możesz ustalić inną ikonkę dla konkretnej kategorii. Możesz także ustalić by ikonka kategorii była inna od ikony podkategorii, osiągniesz to przez odniesienie się do kolejnego zagłębienia w drzewie.
      Standardowo masz taki odnośnik #box_menu .innerbox ul.standard li a, #box_menu .innerbox ul.folded li a{}
      Jak chcesz ustalić coś dla podkategorii to dostaniesz się do nich przez
      #box_menu .innerbox ul.standard li li a, #box_menu .innerbox ul.folded li li a{}

  8. Chyba coś nie wychodzi

    #box_menu .innerbox ul.standard li a, #box_menu .innerbox ul.folded li a{
    background: url(„…/public/images/user/arrow11.jpg”) no-repeat scroll 8px 10px transparent;
    padding: 0 0 0 30px;
    display:block;}

    #box_menu .innerbox ul.standard li, #box_menu .innerbox ul.folded li{
    padding: 0;
    line-height: 22px;
    }

    #box_menu .innerbox ul.standard li #category_12 a, #box_menu .innerbox ul.folded li #category_12 a{
    background: url(„…/public/images/user/arrow_red1.jpg”) no-repeat
    scroll 1px 1px transparent;
    color: #ffffff; font-weight: bold;
    // padding: 9;
    // line-height: 55px;

    }

    #box_menu .innerbox ul.standard li li #category_12 a, #box_menu .innerbox ul.folded #category_12 li li a{
    background: url(„…/public/images/user/arrow11.jpg”) no-repeat scroll 8px 10px transparent;
    padding: 0 0 0 30px;
    display:block;}

    #box_menu .innerbox ul.standard li a:hover, #box_menu .innerbox ul.folded li a:hover{

    background: #dcdcdc;
    }

    wpisuję li li ale dalej grafika z nadrzędnego pozostaje hm…. probowałem juz chyba na wszytkie możliwe sposoby.

    Da radę coś z tym zrobić ?

  9. Witam, pierwszy raz mam przygotowywac projekt graficzny dla programisty, który będzie wdrażał sklep na shoper.pl, jako grafik, w jaki sposób mam przygotować projekt, by programiście było łatwo? Czy moge stworzyc projekt w photoshopie na warstwach? Pozdrawiam

    1. Najczęściej tylko plik z wszystkim warstwami pozwoli wdrożyć poprawnie Twoją kreacje także polecam takie rozwiązanie. Pamiętaj także by zapoznać się choć odrobinę ze standardowym wyglądem oprogramowania i nie projektuj funkcjonalności których ono nie posiada. Nie wiem jaką masz rutynę pracy ale jeżeli wykonujesz szkice lub makiety sklepu zanim zaczniesz przenosić to do photoshopa to podeślij je osobie wdrażającej by mogła ocenić czy dane elementy mogą być tak zrobione. Aby unikać późniejszych problemów warto tak przygotować projekt by nie wymuszał on zbyt wielu ingerencji w pliki HTMLowe a najlepiej jak będzie go można wdrożyć tylko czystym kodem CSS

  10. Witam,

    zmieniłem w podobny sposób moduł kategorii. Problem pojawia się kiedy klikam na produkt by szczegółowo go przeczytać bo wtedy cały moduł wraca do takiego jak był przed zmianą…

Skomentuj Marcin Anuluj pisanie odpowiedzi