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

O to i jest trzecia osłona mini poradnika do edycji domyślnej skórki systemu Shoper 4.0  miałem ją pisać dopiero na początku czerwca ale skoro jest kilku chętnych do zdobycia tych informacji zdecydowałem, iż opublikuję to troszkę wcześniej.

W części tej znajdziecie informacje odnośnie edycji modułów (czasami zwanych boksami), a raczej kilku modułów bo resztę opiszę w czerwcu.

W systemie Shoper 4 istnieją (jak pewnie dobrze wiecie) następujące moduły:

• Filtr
• Menu
• Wyszukiwarka
• Waluty
• Produkt dnia
• Subskrypcja
• Sonda
• Producenci
• Cennik
• Języki
• Koszyk
• Bestselery
• Statystyki
• Ostatnio dodane

System daje także możliwość stworzenia modułów dodatkowych.

Edycja wyglądu poszczególnych modułów w aktualnej wersji Shopera ma niestety kilka wad. Główną wadą jest użycie nadrzędnej klasy .box. Niestety wszystkie moduły w systemie posiadają taką klasę a co za tym idzie zmieniając w arkuszu stylów „main.css” wartości klasy .box zmieniamy je dla wszystkich modułów w tym samym czasie. Wszystko jest fajnie (bo nie trzeba dużo zmieniać) jeżeli wszystkie moduły mają wyglądać jednakowo, jeżeli chcemy mieć różne moduły to zaczynają się schody ;).

Jak już wcześniej pisałem wszystkie artykuły odnośnie zmian w skórce domyślnej systemu Shoper piszę tak by edycji ulegał jedynie arkusz stylów css. Ingerencja w pliki szablonów smarty czyli tych z rozszerzeniem .tpl nie jest zalecana dla osób, które nie znają choćby podstaw HTML.

Przed rozpoczęciem prac zlokalizujcioe sobie w kodzie arkusza tekst „/* Lewa i prawa kolumna */” od tego zaczyna się sekcja stylii poświęconych modułom.

Zacznijmy więc edycję od modułów „Menu”, „Bestsellery” oraz „Ostatnio dodane” czyli drzewa kategorii.  Już wcześniej pisałem o zmianach nagłówków to też teraz przejdźmy do edycji zawartości tych boksów. Piszę od razu o tych trzech modułach, gdyż w systemie Shoper odpowiada za nie jedna klasa a dokładnie „.menu”.

No to lecimy pokoleji. Jak już odszukaliśmy /* Lewa i prawa kolumna */ to tuż pod nią mamy:

#current {font-weight:bold;} – identyfikator ten odpowiada za wygląd kategorii w której aktualnie się znajdujemy.W tym przypadku oznacza on tyle, że jeżeli klikniemy na daną kategorie to będzie ona miała pogrubioną czcionkę. Przypuśćmy że chcemy by ten element posiadał tło w postaci cieniowania. Aby go zastosować należy przygotować plik graficzny który ma tworzyć tło (podobnie jak wcześniej tworzyliśmy pliki do kreowania wyglądu nagłówków) .

Jak już mamy gotowy plik to dodajemy odpowiednie informacje:

#current {font-weight:bold;background:white url(gfx/plik_tla_menu.png) repeat-x;} – jak widać dodaliśmy tło, które tworzyć się będzie z powtarzania pliku „plik_tla_menu.png” na osi x, dodatkowo ustawiliśmy aby color white wyświetlał się w momencie gdy wystąpiły by problemy z pobraniem pliku tła.

Następna linia arkusza CSS to:

.menu {list-style-type:none;margin:0;padding:5px 0;width:100%;} – klasa ta jak już wcześniej wspomniałem jest klasą główną drzewa kategorii, listy bestsellerów oraz ostatnio dodanych. Osobiście zazwyczaj nicc tu nie zmieniam, no może poza usunięciem paddingu, który niepotrzebnie odsówa drzewo o 5px od dolnej krawędzi nagłówka i dolnej krawędzi całego boksu. Czyli mam tak:

.menu {list-style-type:none;margin:0;padding:0;width:100%;}

Jedyna różnica pomiędzy stylami drzewa kategorii a stylami bestsellerów i ostatnio dodanych jest takaże pierwszą tworzy lista zapisana znacznikami <ul> a dwie pozostałe są listami <ol>. Co za tym idzie kolejne linie w CSS:

ol.menu a {padding:9px 13px 6px 13px;display:block;}
ul.menu a {padding:9px 13px 5px 20px;display:block;background:transparent url(gfx/arrow.gif) no-repeat 10px 14px;}

odpowiadają za wygląd linków zgodnie ztym co napisałem troszke wyżej.

Jak widać drzewo kategorii posiada tło, które tworzy plik arrow.gif, jak możecie zobaczyć w standardowym wyglądzie sklepu jest to ta czarna strzałka przy każdej kategorii. Dodatkowo parametry no-repeat 10px 14px; ustalają, że ma sie ona wyświetlić tylko raz i być umieszczona 10px od lewej oraz 14px od górnej krawędzi wiersza.

Plik strzałki można oczywiście dowolnie zamieniać. Chcąc jednak użyć innego tła (np gradientu) należy zmienić rónież sposób powtarzania oraz ustawienie tła np:

z  no-repeat 10px 14px; na repeat-x (czyli powtarzanie po osi x).

Ostatnia istotna część kodu to:

.menu li a:hover {background-color:#fbfbfb;font-weight:bold;text-decoration:none;} – odpowiadająca za wygląd wiersza po najechaniu na niego myszką. Jak widzicie standardowo zmienia ono kolor na#fbfbfb. Chcąc użyć pliku tła należy zamienić całe background-color:#fbfbfb; na np background:white url(gfx/plik_tla_menu.png) repeat-x;.

Na tym kończą się style boksów menu i pojawiają się style modułów z wyborem producentów, języków oraz waluty. Odpowiada za nie jedna klasa:

.choose-category {padding:16px 13px;} – jak widać standardowo ustala tylko odstępy od krawędzi górnej i dolnej na 16px oraz bocznych na 13px. Można tu swobodnie dodać kolor tła lub użyć obrazka wpisując podobnie jak wyżej kod „background:…”.
.choose-category select {border:1px solid #dededc;width:98%;height:18px;} – odpowiada za wygląd menu rozwijanego z  danymi (np producentami).

Klasa .newsletter jak sama nazwa wskazuje odpowiada wygląd modułu subskrypcji. Zazwyczaj edycji ulegają tu trzy elementy.

Styl treści tekstu informacyjnego (np kolor czcionki, wielkość itp.), za styl ten odpowiada fragment:

.newsletter p {line-height:1.5em;margin-bottom:0.7em} – standardowo ustalone są tylko marginesy oraz odstępy między wierszami ale łatwo można tam wstawić styl koloru „color:red;” lub styl wielkości czcionki „font-size:12px;„.

.newsletter label {display:block;background-color:#f7f7f7;border-left:1px solid #908f8f;border-top:1px solid #908f8f;border-width:1px 0 0 1px;padding:6px 6px 5px 6px;} – odpowiada za wygląd pola do wpisywania adresu e-mail.

.newsletter .buttons input {width:76px;height:20px;background:#448aae url(gfx/button.png) no-repeat;font-weight:bold;color:white;border-width:0;cursor:pointer;padding:0 0 2px 0;} – odpowiada za wygląd przycisku gdzie jako tło używa pliku „button.png”.

.newsletter .buttons input:hover {background-position:left bottom;} – tu ustalamy co się dzieje ze stylem przycisku gdy najedziemy na niego kursorem myszy, standardowo tło przesówa się do lewej i dolnej krawędzi. W tym przypadku nie nw wiele się to przydaje bo plik button.png to tylko zwykły przycisk to też jego przesunięcie nie spowoduje zmian w wyglądzie. W przeciwieństwie do przycisku „addtocart.png”, który jak możecie zobaczyć składa się z dwóch przycisków (niebieskiego i zielonego). Co za tym idzie efektem przesunięcia tła będzie zmiana koloru.