Wprowadzenie do edycji zaawansowanej skórki sklepu

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 az.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.

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.

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ć,
    edycja1
  3. Kliknij prawym przyciskiem myszy, a następnie wybierz Zbadaj,edycja2
  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.edycja3

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.

  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.
    edycja4
  3. Skorzystaj z przycisku oznaczania obiektu, wskazując element który chcesz edytować.edycja5
  4. Wskaż element.edycja6
  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.edycja7
  7. Wprowadzone zmiany zostaną od razu uwzględnione w podglądzie strony WWW.edycja8
  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.edycja9
  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.

  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.
    edycja11
  3. Skorzystaj z przycisku oznaczania obiektu, wskazując element który chcesz edytować.edycja12
  4. Wskaż element.edycja13
  5. Po prawej stronie pojawi się wybrana klasa CSS dla wybranego kontenera. Zobaczysz także jego własności już istniejące,edycja14
  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.edycja15
  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.edycja16
  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.edycja17
  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.
    edycja18
  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.edycja19
  11. Zaloguj się do panelu sklepu, przejdź do sekcji Konfiguracja –> Wygląd –> Aktywny styl graficzny –> Własny styl CSS i wklej kod.edycja20
  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
Generic filters
Tylko dokładne dopasowania
Szukaj w tytułach
Szukaj w treści
Filter by Article Categories
Program partnerski AZ.pl
Program partnerski> Certyfikaty SSL
Program partnerski: Domeny .pl
Program partnerski: Hosting WWW
Poczta e-mail w AZ.pl
Poczta Webmail
Konfiguracja programu pocztowego
Obsługa kont e-mail w panelu
OX Business - poczta dla firmy
Akademia AZ.pl
Popularne pytania
Rejestracja usług
Faktury i płatności
Obsługa panelu klienta
Logowanie i zmiana hasła
Użytkownicy panelu klienta
Konto i rozliczenia
Domeny
Hosting
Listy mailingowe
WebFTP
Serwery VPS
Skrzynki e-mail
Strony WWW (Kreator WWW)
Nowy Certyfikaty SSL
Pomoc i kontakt
Obsługa domeny internetowej
Obsługa hostingu WWW
Automatyczna instalacja CMS
Obsługa serwerów VPS
Zarządzanie VPS
Serwery VPS
Produkty i usługi
Bezpieczeństwo
G Suite - Poczta dla firm
Terminal płatniczy SumUp
Asystent AZ
Reklama internetowa
Poczta Xchange Pro
Tworzenie stron WWW
Sklep internetowy AZ.pl
RODO w sklepie internetowym
Panel sklepu
Produkty
Zamówienia
Klienci
Konfiguracja
Zamówienia i płatności
Opcje produktów
Promocja sklepu
Integracje
Systemy aukcyjne
Inne integracje
Porównywarki cen
Integracje partnerów
Inne zagadnienia
Modyfikacja wyglądu
Raporty i statystyki
Kwestie techniczne
Porady
Dodatki (Partnerzy + Store Manager)
Store Manager
Office 365
Fakturowanie
SEO rankingCoach
Kreator stron WWW
Hosting WordPress
Regulacje RODO
Pozostałe

jak się zalogowaćjak zmienić hasłojak sprawdzić pocztękonfiguracja pocztyftp

lub