Wprowadzenie do edycji zaawansowanej skórki sklepu Click Shop

Poniższy artykuł przedstawia przykład edycji zaawansowanej skórki sklepu, wykonanej przy pomocy zewnętrznego oprogramowania dostępnego w ramach przeglądarki Google Chrome. Zwracamy uwagę, że home.pl nie świadczy wsparcia w zakresie edycji wyglądu sklepu realizowanej przy pomocy edycji zaawansowanej oraz własnych skryptów JavaScript i stylów CSS.
Przejdź na stronę forum.home.pl i dołącz do dyskusji z innymi użytkownikami usług home.pl, aby znaleźć najlepsze rozwiązania i uzyskać więcej informacji w zakresie, w jakim chciałbyś dokonać modyfikacji wyglądu sklepu.

Korzystając z przeglądarki Google Chrome i dostępu do panelu administracyjnego sklepu, możesz w każdej chwili dokonać niestandardowej edycji wyglądu poszczególnych jego elementów, których edycja nie jest domyślnie dostępna w panelu administracyjnym.

Edytowany w ten sposób wygląd sklepu, możesz jeszcze bardziej dopasować do swoich potrzeb. Pamiętaj, aby wykonywaną edycję realizować na kopii skórki, z której aktualnie korzystasz. Dzięki temu, w przypadku nadmierne modyfikacji, zawsze będziesz mógł powrócić do pierwotnych ustawień lub wprowadzić nowe.

  • Kliknij tutaj aby dowiedzieć się więcej o edycji zaawansowanej oraz tworzeniu kopii skórek sklepu.

Podgląd stylu CSS w przeglądarce Google Chrome

  1. Pobierz, zainstaluj i uruchom przeglądarkę Google Chrome,
  2. Przejdź na stronę swojego sklepu internetowego i odszukaj element, który chcesz edytować,
  3. Kliknij prawym przyciskiem myszy, a następnie wybierz Zbadaj,
  4. W kolejnym kroku uruchomiony zostanie tryb debugowania, umożliwiający podgląd aktualnie aktywnego kodu HTML, JavaScript strony a także utworzonych stylów CSS, których edycja umożliwia wprowadzanie dodatkowych zmian w wyglądzie stron WWW, lokalizacji jej elementów, wyglądu, kolorów itp.

Więcej informacji o samym narzędziu, możesz znaleźć w sieci Internet np. wpisując w wyszukiwarce Google frazę: „Google Chrome zbadaj element”

Narzędzie Zbadaj element, nie tylko daje fragmentaryczny podgląd do kodu i stylu strony WWW, ale umożliwia ich edycję bezpośrednio w przeglądarce, bez ingerencji w pierwotny kod strony. W praktyce, możemy w tej chwili dokonać edycji poszczególnych fragmentów kodu i stylu, obserwując efekty tych działań na żywo. Zamknięcie przeglądarki czy odświeżenie strony, spowoduje przywrócenie pierwotnych ustawień.

WAŻNE! Wprowadzane zmiany za pomocą narzędzia Zbadaj element, nie są zapisywane na serwerze, na którym strona jest zlokalizowana. Rozwiązanie jest bezpieczne i nie powoduje stałych zmian w wyglądzie stron WWW.

Przykład edycji stylu CSS za pomocą narzędzia Zbadaj element

W poniższym przykładzie, znajdziemy oraz edytujemy już istniejący styl, który standardowo jest domyślnie ustalony wspólnie dla całego sklepu i wszystkich jego elementów. Zmiana obejmie powiększenie czcionki, która odpowiada za wyświetlanie nazwy produktu na liście produktów.

Rozwiązanie tego problemu oraz setki innych gotowych rozwiązań, znajdziesz na stronie forum dyskusyjnego naszej firmy – forum.home.pl
  1. Przejdź na stronę swojego sklepu internetowego i odszukaj element, który chcesz edytować.
  2. Kliknij prawym przyciskiem myszy, a następnie wybierz Zbadaj element.
  3. Skorzystaj z przycisku oznaczania obiektu, wskazując element który chcesz edytować.
  4. Wskaż element.
  5. Po prawej stronie pojawi się wybrana klasa CSS dla wybranego kontenera. Zobaczysz także jego własności np. font-size, oraz ich właściwości, np. 1.6em.
  6. Dokonaj edycji właściwości wpisując nowy rozmiar.
  7. Wprowadzone zmiany zostaną od razu uwzględnione w podglądzie strony WWW.
  8. Skopiuj wybraną klasę wraz z właściwościami które chcesz edytować (możesz zaznaczyć całość lub jej fragment, dokonując ostatecznej selekcji podczas wklejania kodu w panelu sklepu.
  9. Zaloguj się do Panelu sklepu, przejdź do sekcji Konfiguracja –> Wygląd –> Aktywny styl graficzny –> Własny styl CSS
  10. Wklej skopiowany fragment stylu CSS i dokonaj odpowiednich modyfikacji.
  11. Zapisz zmiany i przejdź na stronę sklepu. Wciśnij CTRL + F5 na klawiaturze. Zmiany powinny być widoczne.
WAŻNE! Edycja poszczególnych klas może mieć wpływ na wygląd także innych elementów sklepu, jeśli np. wybrana klasa odnosi się także do nich. Po zapisaniu zmian warto sprawdzić inne strony sklepu, czy nie uległy modyfikacji dodatkowe elementy. W przypadku klas rozpoczynających się od nazwy obiektu np. #box_productfull, edycja klasy zwykle obejmuje tylko i wyłącznie wybrany obiekt i nie powinna modyfikować dodatkowych elementów, z nim nie związanych.

Przykład 2: dodawanie właściwości stylu i ich wartości

Jednym z dodatkowych elementów jakie posiada narzędzie Zbadaj element, jest możliwość nie tylko edycji wybranych klas i ich właściwości, ale także dodawanie nowych, za pomocą autosugestii. W ten sposób odnajdując interesującą nas klasę, możemy dodać nową właściwość, a narzędzie samo podpowie nam jakie są możliwe opcje.

Analogicznie dodając wartości właściwości, będziemy mogli skorzystać z dedykowanych podpowiedzi, czy to w formie gotowych wpisów czy palety kolorów (umożliwi wybór koloru bez znajomości jego kodu).

W ten sposób przygotowany i sprawdzony fragment stylu, umieszczasz w konfiguracji skórki, własnym stylu CSS, zgodnie z powyższym przykładem.

Poniższej przedstawiamy przykład, w którym domyślnie, tylko po najechaniu kursorem myszy na podkategorię, podświetla się ona. Chcielibyśmy aby podświetlenie było stałe. W tym celu konieczne będzie dodanie nowej właściwości, odpowiedzialnej za nadanie koloru.

Rozwiązanie tego problemu oraz setki innych gotowych rozwiązań, znajdziesz na stronie forum dyskusyjnego naszej firmy – forum.home.pl
  1. Przejdź na stronę swojego sklepu internetowego i odszukaj element, który chcesz edytować.
  2. Kliknij prawym przyciskiem myszy, a następnie wybierz Zbadaj element.
  3. Skorzystaj z przycisku oznaczania obiektu, wskazując element który chcesz edytować.
  4. Wskaż element.zbadaj6
  5. Po prawej stronie pojawi się wybrana klasa CSS dla wybranego kontenera. Zobaczysz także jego własności już istniejące,
  6. Kliknij w puste pole pod ostatnią właściwością aby dodać nową, a następnie rozpocznij wpisywanie frazy background… (właściwość odpowiedzialna za dodanie tła). Narzędzie podpowie Ci dostępne właściwości, odpowiedzialne za ustalenie tła, wśród nich będzie także dostępna background-color. Nadaje ona kolor.
  7. Zatwierdź właściwość przyciskiem Enter, a następnie wprowadź wartość właściwości. W przypadku kolorów, możesz podawać ich wybrane nazwy i kody.
  8. Jeśli nie jesteś pewny koloru, jego nazwy czy kodu, skorzystaj z palety kolorów wskazując kursorem myszy interesujący Cię kolor. Zatwierdź zmiany klikając przycisk Enter.
  9. Zmiany zostały zapamiętane, a po lewej stronie ekranu widać ich podgląd na żywo. Podkategorie są podświetlone trwale, podobnie jak nazwa wybranej kategorii.
  10. Zaznacz wybrany fragment stylu CSS, np. trzymając lewy przycisk myszy, a następnie naciśnij na klawiaturze Ctrl + C lub prawym przyciskiem myszki i Kopiuj.
  11. Zaloguj się do panelu sklepu, przejdź do sekcji Konfiguracja –> Wygląd –> Aktywny styl graficzny –> Własny styl CSS i wklej kod.
  12. Zapisz zmiany i przejdź na stronę sklepu. Wciśnij CTRL + F5 na klawiaturze. Zmiany powinny być widoczne.
  13. Edycję kodu (np. usunięcie zbędnych właściwości, padding-left, border itp.) możesz wykonać bezpośrednio w panelu sklepu. Wprowadzając własny styl CSS, możesz ograniczyć się do wprowadzania tylko właściwości które edytujesz lub dodajesz.
  • Czy artykuł był pomocny?
  • TAK   Nie
Więcej informacji na forum dyskusyjnym:   Kliknij tutaj, aby przejść na forum.home.pl