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

Użytkownicy systemu Shoper w wersji 4.0 i wyższej wiedzą, iż standardowo wyposażony jest tylko w jedną skórkę graficzną, co dość  drastycznie ogranicza pole manewru.

Grafika indywidualna czy też gotowe szablony są zawsze opcją jednak co zrobić gdy nie chcemy wydawać dodatkowych pieniędzy?

Pozostaje własnoręczna edycja skórki domyślnej, która wymaga jednak znajomości CSS a czasem także HTML.

Dla wszystkich tych, którzy chcieliby „podrasować” swoją shoperowską skórkę, zdecydowałem zamieszczać tu drobne podpowiedzi.

Prace edycyjne najlepiej zacząć od stworzenia kopi skórki domyślnej. W razie gdyby efekt końcowy nie był zadowalający zawsze będziemy mogli wrócić do oryginalnego wyglądu. Dodatkowo ewentualne zmiany aktualizacyjne w skórce standardowej dokonywane przez producenta oprogramowania mogą nadpisać nasze zmiany i całą prace trzeba by powtórzyć.

Aby stworzyć kopię skórki należy w zakładce Konfiguracja/Grafika i Wygląd z prawej strony okna wyboru skórki kliknąć na link „Utwórz kopię tej skórki„. Nazwa kopii skórki to standardowo nazwa skórki oryginalnej plus nr kopii (np. „shoper_blue1″ dla pierwszej kopii, shoper_blue2” dla drugiej itd.). Po stworzeniu kopi należy jeszcze zaznaczyć ją jako domyślną oraz potwierdzić zmiany klikając na przycisk „Zapisz”.

Kolejnym krokiem jest wymiana grafiki głównej oraz logo sklepu co jest czynnością dość prostą (zakładając oczywiście, że takowe elementy posiadamy). Wymiany dokonać należy poprzez panel administracyjny w zakładce Konfiguracja/Grafika i Wygląd. Pamiętajmy by zwrócić uwagę do jakiej skórki dodajemy nowe pliki.

Po zmianie plików podstawowych na stronie sklepu zobaczyć możemy nowododane elementy (logo oraz grafikę główną).  Następnym krokiem na liście jest edycja pliku ze stylami CSS czyli w tym przypadku main.css. Plik ten możemy pobrać  z serwera i edytować w dowolnym edytorze tekstowym jednak zalecane jest by był to edytor poprawnie obsługujący standardy UTF-8. Na szczęście sklep internetowy Shoper daje możliwość edycji plików css oraz html z poziomu panelu administracyjnego.

Aby edytować plik main.css należy wybrać go z listy znajdującej sie w Konfiguracja/Grafika i Wygląd. System otworzy plik w trybie edycyjnym co dla osób nie mających styczności z kodem CSS może być lekko zniechęcające. Z myślą właśnie o tych użytkownikach powstał ten post więc mam nadzieję, że po jego lekturze nie będzie to już tak straszne przeżycie.

Dzisiaj zajmijmy się edycja wyglądu nagłówków „modułów” czy też inaczej nazywając „boksów” (takich jak menu kategorii, sonda, newsletter itd.)

Za wygląd nagłówków boksów odpowiada element (nie zamierzam tu pisać o samym kodzie CSS zbyt dokładnie bo to nie kurs CSS 😉 ):

.box h2 – należy więc go odnaleźć w kodzie (niestety system Shoper w tym przypadku nie pomaga zbytnio więc trzeba użyć np. wyszukiwarki wbudowanej w przeglądarkę internetową. Najczęściej uruchamianą skrótem klawiszowym „Ctrl+F”).

To co odnajdzie wyszukiwarka powinno wyglądać podobnie do:

.box h2    {font-size:13px;color:#448aae;border-left:3px solid #448aae;background:#448aae url(gfx/h2.png) no-repeat right top;margin:0;padding:7px 10px 6px 10px;border-bottom:1px solid #d9d9d9}

To co znajduje się pomiędzy znacznikami { } odpowiada za:

font-size:13px; – rozmiar czcionki ustawiony na 13px (nie są to rozmiary równoznaczne z np 13 punktami w programie Word),

color:#448aae; – kolor czcionki ustawiony na #448aae ( jest to postać heksadecymalna koloru) – jeżeli nie dysponujecie programem w które mogą pomóc wam w określeniu kodu danego koloru możecie użyć internetowej bazy takich kodów znajdujących się np na paleta kolorów,

border-left:3px solid #448aae; – ustawia krawędź (dokładnie to obramowania) z lewej strony nagłówka na 3px grubości oraz kolor na #448aae, solid oznacza, że linia jest ciągła,

background:#448aae url(gfx/h2.png) no-repeat right top; – ustawia jako tło nagłówka obraz h2.png znajdujący się katalogu gfx a w momencie gdy grafika ma fragmęty przeźroczyste lub plik się nie wczytał to tło przyjmie kolor #448aae,

margin:0; – marginesy ustawione na 0,

padding:7px 10px 6px 10px; – dopełnienie (w tym wypadku prościej będzie napisać odległości tekstu od krawędzi) ustawione na od góry – 7px, od prawej – 10px , od dołu – 6px, od lewej – 10px,

border-bottom:1px solid #d9d9d9 – obramowanie dolne o grubości 1px i kolorze #d9d9d9,

Mam nadzieję, że to wystarczy na początek a następnym razem napiszę o tym jak zmienić wygląd reszty modułu  i jak sprawić by część modułów rózniła się od pozostałych.

Pozdrawiam G.R.