Firebug – czyli jak ułatwić sobie edycję wyglądu sklepu

Każdy zainteresowany wprowadzeniem własnoręcznych przeróbek w sklepie internetowym lub na stronie internetowej powinien zapoznać się z bardzo przydatnym dodatkiem do przeglądarki internetowej. Niezależnie od tego czy jesteś fanem Firefox, IE czy też Chrome w każdej chwili możesz zaopatrzyć się w to małe cudo dzięki któremu zaoszczędzisz masę czasu.

Postaram się tu przybliżyć wam ten niezbędny w mojej pracy dodatek i mam nadzieję, że w krótkim czasie sami zobaczycie jak pomocne jest to internetowe stworzenie ;).

Firebug jest programistycznym narzędziem umożliwiającym między innymi podgląd kodu HTML lub edycje kaskadowych stylów CSS. Edycja dowolnego elementu stylu jest automatycznie widoczna w przeglądarce więc możemy dokładnie sprawdzić jaki efekt nasza zmiana w kodzie wywoła na docelowej stronie sklepu. Szczególnie początkujący adepci sztuki kodowania powinni docenić wartość tej wtyczki.

Poniżej zaprezentuję w jaki sposób możecie zaopatrzyć się we wtyczkę oraz jak ją zastosować na rzeczywistym przykładzie. Standardowo zamierzam pracować na systemie Shoper ale nie widzę przeszkód by wtyczkę tą posługiwać się również podczas edycji skórki innych programów do prowadzenia sklepów internetowych lub stron www.

Przede wszystkim gdzie szukać?

Firebug możecie pobrać ze strony projektu czyli z getfirebug.com. Wtyczka ta stworzona oryginalnie przez Joe Hewitt`a (jednego z twórców przeglądarki Firefox) jest dostępna całkowicie za darmo. Oczywiście najlepszym środowiskiem dla pracy wtyczki jest przeglądarka Firefox choć dostępne są również wersje na inne znane przeglądarki takie  jak Opera czy Chrome.

Na potrzeby tego tekstu zamierzam zainstalować wtyczkę do przeglądarki Firefox.

  • wchodzę na stronę projektu,
  • klikam czerwony przycisk „Install Firebub for Firefox”,
  • akceptuję instalacje wtyczki i resetuję przeglądarkę,

Wtyczka nie jest włączana automatycznie po wejściu na daną stronę. Aby uruchomić Firebug należy kliknąć na małego robaka w prawym dolnym rogu ekranu lub wcisnąć klawisz funkcyjny „F12”.

Powinniście zobaczyć coś takiego:

Jak widzicie u dołu przeglądarki pojawił się ekran z kodem podzielony na dwie części. W głównej części standardowo powinien pokazać się kod HTML z prawej kod CSS. Górna belka ekranu wtyczki Firebug pozwala przełączać widoki. Po kodzie możemy swobodnie poruszać się za pomocą myszki lub strzałek na klawiaturze. W prawym górnym rogu okna wtyczki znajduje się ikona narzędzia do bezpośredniego wskazywania elementów strony.

Po kliknięciu na tę ikonę możemy zaznaczyć dowolny element na stronie a Firebug pokaże nam dokładnie w którym miejscu kodu HTML znajduje się to zaznaczenie oraz jakie są przypisane style CSS do tego elementu.

Zmiany dokonane przy użyciu wtyczki są jedynie chwilowe to też po np przeładowaniu strony edytowanej wszystkie wprowadzone poprawki nie będą widoczne. Dzięki temu możecie mieć pewność, że zmieniając dany styl osiągniecie założony rezultat bez obawy, że przy okazji popsujecie coś w działającym sklepie.

Zatem co zrobić jak już sprawdziliście jaka klasa odpowiada za wygląd np nazwy produktu?

W systemie Shoper edycja tego stylu jest banalnie prosta. Należy wejść do panelu administracyjnego, kliknąć na dział Konfiguracja a następnie wybrać Wygląd/Galeria stylów. Po przejściu do galerii duplikujemy aktualnie używaną skórkę i przechodzimy do jej edycji.

Z menu po prawej stronie wybieramy zakładkę „Własny kod CSS” tak by otworzył nam się edytor. W tym miejscu możemy wstawić nasze nowe style. Wszystko co należy zrobić to wpisać nazwę klasy zmienianego obiektu i dopisać zmieniane parametry.

Przed rozpoczęciem prac warto poznać choć podstawy CSS polecam skorzystać ze strony http://www.w3schools.com/css/default.asp. CSS nie jest skomplikowany, znając język angielski można łatwo się w nim odnaleźć.

Oto kilka przykładów dzięki którym łatwiej zrozumiecie o co mi chodzi:

Jeżeli chcemy usunąć  ze sklepu Shoper 5 link do strony shoper.pl (nie polecam gdyż w regulaminie macie zapis, iż nie wolno tego linku usuwać):

#shoper-foot {display:none;}

Chcąc zmienić kolor ceny na liście produktów:

#box_mainproducts .innerbox table.products tr .product .price em {color:blue;}

Pamiętajcie, że kolory najlepiej zapisywać w formacie heksadecymalnym tu http://en.wikipedia.org/wiki/List_of_colors znajdziecie listę kolorów wraz z kodami jakie są im przypisane

Mam nadzieję, że wtyczka się wam przyda. Życzę miłej zabawy w edycji skórek waszych sklepów.

6 odpowiedzi do “Firebug – czyli jak ułatwić sobie edycję wyglądu sklepu”

  1. Witam ponownie,

    czy istnieje możliwość, aby każde zdjęcie – na stronie startowej, w kategoriach i szczegółach posiadało ramkę w kolorze (oczywiście jednakowym dla wszystkich)? Z góry dziękuję za pomoc.

    1. jasne że istnieje 🙂 np poprzez #box_mainproducts .innerbox table.products tr.fewperrow .product a.details img {border: 1px solid red;} gdzie „1px” to grubość ramki „solid” to rodzaj ramki w tym przypadku standardowa linia pojedyncza a red to rodzaj koloru (możliwy jest także zapis heksadecymalny czyli dla red to #FF0000)

    1. usunąć się go nie da (przynajmniej nie w licencjach saas) ale można sprawić by się nie wyświetlał wystarczy:
      1 – w panelu administracji przejść do działu Konfiguracja/Wygląd
      2 – wybrać zakładkę z lewej strony „Własny styl CSS”
      3 – wkleić #shoper-foot{display:none;} i zapisać zmiany

Skomentuj Łukasz Anuluj pisanie odpowiedzi