Edycja domyślnej skórki systemu Shoper 4.0 – cz. II

Przyszła pora na drugą część artykułu związanego z edycją domyślnej skórki oprogramowania Shoper 4.0.

Tym razem skupmy się na edycji  menu jako znaczącego elementu witryny. Standardowo posiada on błękitny odcień z dodatkowym efektem zmiany koloru po najechaniu myszą. Kolorystyka odpowiada oczywiści reszcie szablonu to też nie dziwi jego wygląd. Zakładam jednak, że czytający zamierza dokonać pewnych zmian w wyglądzie skórki domyślnej Shopera. A biorąc pod uwagę wielkość, umiejscowienie oraz znaczenie tegoż elementu witrynę zapewne będzie on wymagał zmian.

Prace nad zmianami warto poprzedzić pewnymi przygotowaniami. Warto pomyśleć nad tym czy zmieniając wygląd menu użyjemy tylko kolorów czy też elementów graficznych. Jeżeli decydujemy się użyć elementów graficznych to czeka nas troszkę prac przygotowawczych. Przede wszystkim warto pomyśleć o minimalizacji używanych elementów graficznych gdyż ich nadmierny rozmiar może sprawiać sporo problemów w przyszłości (wydłużać czas ładowania, zwiększać niepotrzebnie transfer). Warto więc myśleć o używaniu elementów które można klonować (powielać) przy użyciu kodu CSS.

Dla małej wizualizacji przygotowałem kilka zdjęć z projektów, które wdrażałem wraz z oceną ich przydatności.

tool_bar11

tool_bar2

Oba zdjęcia pochodzą z projektów jakie ostatnio wdrażałem. Różnice są oczywiste 🙂 ale wyjaśnię może, jakie one się mają do wdrożenia.

Wdrażając propozycję nr jeden należy niestety ingerować w kod HTML gdyż jej układ nie pozwala na osiągnięcie zamierzonych celów samą edycją arkusza CSS. Problemy są dokładnie dwa. Pierwszy z nich to kształt, a raczej fakt, iż pierwszy i ostatni element men jest umiejscowiony niżej niż część centralna. Drugi problem to kwestia wyglądu czcionki, a dokładniej faktu iż posiada ona wypełnienie gradientem. Niestety przy takim układzie pozostało jedynie wstawić, każdy z elementów menu „na sztywno” w kodzie jako  obrazek.

Menu nr. 2 jest już klasycznym przypadkiem edycji standardowego wyglądu. Całe menu budowane jest tylko przez 3 maleńkie elementy (o szerokości 1px ) dzięki czemu w optymalny sposób wykorzystujemy możliwości systemu bez obaw o limity transferu na serwerze :).

Do tego nie wydaje mi się również by takie rozwiązanie traciło na wyglądzie. Ale to już kwestia gustu.

Jak wstawić menu nr 2?

Wystarczy wyciąć z projektu graficznego menu 3 pliki, które posłużą później jako tło naszego menu. Do cięcia można wykorzystać darmowy program do obróbki grafiki rastrowej GIMP. Wycinając należy pamiętać na zwrócenie uwagi na to jak wygląda grafika. W tym przypadku widać, iż wykorzystuje ona pionowe wypełnienie gradientem. Dzięki tej informacji wiemy, że nasz wycinek ma zajmować całą wysokość menu (by objąć wszystkie zmiany koloru) oraz posiadać minimalną szerokość (czyli 1px).

Wycinamy więc fragment niebieskiego koloru i zapisujemy np w formacie .PNG (nazwa powinna nawiązywać do zawartości czyli np „menu_glowne_bg.png”).

Następnie wycinamy fragment menu z kolorem jaki ma się pojawiać po najechaniu myszą ( w tym przypadku pomarańczowy) oraz zapisujemy podobnie jak wcześniej (np „menu_glowne_bg_hover.png).

Pozostaje nam jeszcze wyodrębnić belkę pionową, która oddziela poszczególne elementy menu. W tym przypadku należy więc wyciąć fragment o szerokości 2px gdyż takiej szerokości jest belka.  Należy jeszcze zapisać plik z obrazkiem belki nazywając go np. „menu_glowne_belka.png”.

Po przygotowaniu plików graficznych potrzebnych do zmiany menu należy skopiować je na serwer do katalogu z grafiką a następnie edytować arkusz stylów „main.css”.

W arkuszu tym należy odnaleźć następujący fragment kodu:

#menu {width:100%;overflow:hidden;list-style-type:none;margin:0;padding:0;line-height:36px;padding-bottom:1px;background:#3d7ea6 url(gfx/menu.png);font-size:12px;}
#menu li {float:left;padding:0 2px 0 0;background:transparent url(gfx/menuli.png) no-repeat right top;}
#menu a {float:left;padding:0 20px;color:white;}
#menu a:hover {color:white;background:#4593c0 url(gfx/menuhover.png);text-decoration:none;}

Wyjaśnię może szczegóły tegoż fragmentu:

#menu

{

width:100% ;-  ustala szerokość całego menu,

overflow:hidden; – ustala, iż w przypadku przepełnienia, nadmierna treść  zostanie ukryta,

list-style-type:none; – ustala rodzaj wypunktowania elementów na liście  (w tym przypadku brak wypunktowania),

margin:0; – ustala wielkość marginesu,

padding:0; – ustala wielkość dopełnienia,

line-height:36px;  – ustala wysokość wiersza,

padding-bottom:1px; – ustala dopełnienie dolne na 1px;

background:#3d7ea6 url(gfx/menu.png); – ustala kolor tła oraz obrazek z jakiego tło będzie budowane, w naszym przypadku nazwę „menu.png” należy zamienić na „menu_glowne_belka.png„, dodatkowo należy jeszcze dopisać, iż nasz obrazek ma być powtarzany na osi x, czyli po znaku zamknięcia nawiasu dopisujemy repeat-x (czyli powinniśmy mieć background:#3d7ea6 url(gfx/menu_glowne_belka.png) repeat-x;). Pamiętajmy jeszcze, iż zapis #3d7ea6 oznacza kolor tła jakie wyświetlone zostanie pod elementem graficznym.

font-size:12px; – ustala wielkość czcionki,

}

Teraz edytujmy styl poszczególnych elementów menu:

#menu li {

float:left; – ustala sposób dosunięcia elementów,

padding:0 2px 0 0; – ustala dopełnienie z prawej na 2px oraz dopełnienie reszty na 0px, ten sam efekt daje zapis padding-right:2px;

background:transparent url(gfx/menuli.png) no-repeat right top; – ustawia plik „menuli.png” jako tło z prawej strony elementu. W tym wydatku jest to belka pionowa oddzielająca elementy menu, więc musimy ją zamienić na naszą czyli na plik „menu_belka.png„. Dalsze informacje, czyli no-repeat right top oznaczają iż plik graficzny nie będzie powtarzany oraz zostanie dosunięty do prawej i górnej krawędzi elementu,

}

Zostało jeszcze ustalić styl w jakim wyświetlają się linki (pamiętajmy, że napisy na tym menu są właśnie linkami) w tym ustalić tło jakie pojawi się pod danym elementem menu po najechaniu na niego myszą:

#menu a

{

float:left; – jak wcześniej

padding:0 20px; – ustala dopełnienie boczne linków czyli w tym przypadku odstępy między poszczególnymi elementami menu,

color:white; – ustala kolor tła na biały,

}
#menu a:hover – zapis :hover pozwala ustalić wygląd linku po najechaniu naniego myszą

{

color:white; – ustala kolor tła na biały

background:#4593c0 url(gfx/menuhover.png); – ustala kolor tła na #4593c0 oraz użycie pliku  „menuhover.png” jako tło. W naszym przypadku należy więc zmienić ten wpis na  „menu_glowne_belka_hover.png” podobnie jak wcześniej należy dopisać, iż nasz obrazek ma być powtarzany tylko na osi x, czyli po znaku zamknięcia nawiasu dopisujemy repeat-x.

text-decoration:none; – ustala sposób dekoracji tekstu po najechaniu

}

W taki sposób edytowaliśmy wygląd menu głównego sklepu opartego na oprogramowaniu Shoper w wersji 4.

Mam nadzieję, że komuś ten artykuł się przyda 😉

Z poważaniem G.R.

8 odpowiedzi do “Edycja domyślnej skórki systemu Shoper 4.0 – cz. II”

  1. Świetny artykuł! Dzięki niemu wiele udało mi się zmienić na „+”. Mam nadzieję, że kolejna część „edycji shopera” ujrzy wkrótce światło dzienne. Dziękuję za wysiłek i pozdrawiam.

  2. Witam
    Bardzo fajny artykulik. Przydało by się więcej treści tego typu np na temat jak wstawiać buttony albo edycja pozostałej treści strony.

  3. Biopol – „dwoma ręcami z tobą” – więcej, więcej… chętnie zobaczyłbym jakieś tutki dotyczące przestawiania „modułów” na stronie, tzn. np. koszyk nad logo, a może z lewej strony, zmiana tła pod koszykiem itp. I inne usprawnienia np. inne rozmieszczenie elementów przy opisie produktu, na karcie tego produktu itd…, itd… można marzyć i marzyć…

    1. Co do zmiany pozycji danych modułów w obrębie lewej lub prawej kolumny to taka opcja jest w panelu administracyjnym. Co do zmiany poza obręb kolumn z modułami to już niestety trzeba będzie ingerować w pliki html. Może uda mi się coś przygotować w przyszłym tygodniu, wszystko zależy od tego ile czasu będę mógł poświęcić na blogowanie ;).

  4. 🙂 trzymam kciuki za „dużo czasu” drogi adminie. Chodzi o zmiany np. na karcie wyświetlanego produktu, coś dołożyć, coś zmienić – nawet niby drobna sprawa dodanie ikony przy opcji rat itp. Zresztą sama integracja Shopera z Żaglem w sensie graficznym, wypunktowania rat – też wygląda tak sobie…
    a może ktoś poza adminem dołoży swoje trzy grosze!?
    Przeglądając różne Shoperki w sieci można znaleźć różne ciekawostki.
    Pozdrawiam wszystkich Shoperomaniaków 🙂

  5. witam ponownie, może ktoś podpowie jak można (nie naruszając kodu itd) zmienić, dodać element, wyróżnić kategorie główne w menu Shopera? Chętnie poczytałbym na ten temat. Nie chodzi mi o samouczek jak obsługiwać panel administratora, w zakresie dodawania kategorii itp. 😉
    Pozdrawiam

    1. właśnie jestem w trakcie pisania III części edycji skórki Shoper, w której będzie troszkę informacji o edycji menu kategorii więc może znajdziesz potrzebne informacje

Dodaj komentarz

Twój adres email nie zostanie opublikowany.