> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Jak ustawić własne CSS dla Odznaki zaufania i ikony > ℹ️ **Note:** Ten artykuł został automatycznie przetłumaczony za pomocą AI i może zawierać nieścisłości. Jeśli coś wygląda źle, skontaktuj się z naszym zespołem wsparcia. Chcesz mieć pełną kontrolę nad tym, jak wyglądają twoje odznaki zaufania? 🎨 Podczas gdy zakładka Design zapewnia obszerne opcje dostosowania, **Niestandardowe CSS** daje elastyczność do dokonywania zaawansowanych zmian stylizacji, które wykraczają poza standardowe ustawienia. Niezależnie od tego, czy rafinacja odstępów, dopasowanie ścisłych wytycznych marki, dodanie własnych efektów wizualnych, czy rozwiązanie specyficznych stylizacji konfliktów, CSS Custom zapewnia pełną kontrolę twórczą nad projektem Odznaki zaufania. --- # **⚠️ Zanim zaczniesz** Przed użyciem CSS: * Upewnij się, że już stworzyłeś Odznakę zaufania. * Podstawowe zrozumienie CSS lub dostęp do dewelopera. * Zrozum, że CSS Custom może obejść standardowe ustawienia Design. 💡 Jeśli jeszcze nie stworzyłeś Odznaki Zaufania, zrób ją przed przystąpieniem do tego przewodnika. --- # **🛠️ Krok 1 - Otwórz kartę projektu** Otwórz **Hoppy Trust Badges** aplikacja i nawigacja do Odznaki zaufania chcesz dostosować. Następnie: ➡️ Kliknij **Projekt** Tab. Przewiń w dół, aż zlokalizujesz **Niestandardowe CSS** sekcja. Ta sekcja zawiera wszystkie narzędzia potrzebne do dodawania stylizacji i zarządzania nią. --- # **🎨 Krok 2 - Otwarcie sekcji CSS** Wewnątrz **Niestandardowe CSS** sekcja znajdziesz: * Edytor CSS * A **Przewodnik widoku** przycisk * An **Zastosuj** przycisk * Wzór CSS dla startera Szablon startowy zawiera dostępne selektory, które mogą być dostosowane do Twojej Odznaki zaufania. Ułatwia to rozpoczęcie stylizacji bez konieczności ręcznego sprawdzania elementów sklepowych. --- # **✍️ Krok 3 - Dodaj swój własny CSS** Edytor zawiera kilka wstępnie skonfigurowanych selektorów, które mają na celu specyficzne elementy Odznaki zaufania. ### **Dostępne Selektory** #### **Pojemnik** Wybór Opis `.futureblink-trust-badge` Cały pojemnik Odznaka zaufania --- #### **Tytuł** Wybór Opis `.futureblink-trust-badge .fb-title` Główny tekst tytułu `.futureblink-trust-badge.mobile .fb-title` Stylizacja tytułu mobilnego 💡 Do pływania znaczników, selektor tytułu używa `.title` zamiast `.fb-title`. --- #### **Podpozycja** Wybór Opis `.futureblink-trust-badge .subheading` Opis `.futureblink-trust-badge.mobile .subheading` Opis mobilny stylizacja --- #### **Ikony** Wybór Opis `.futureblink-trust-badge .icon` Ikony znaczników `.futureblink-trust-badge.mobile .icon` Mobilna stylizacja ikon --- #### **Przycisk Call- To- Action** Wybór Opis `.futureblink-trust-badge .cta-button` Przycisk CTA `.futureblink-trust-badge.mobile .cta-button` Mobilna stylizacja przycisku CTA --- ### **Przykład CSS** Aby dodać wyściełanie do pojemnika na odznakę i dostosować tytuł: `.futureblink-trust-badge {` `padding: 20px;` `}` `.futureblink-trust-badge .fb-title {` `color: #2c3e50;` `font-size: 18px;` `}` 💡 Możesz dodać dodatkowe selekcje CSS, zapytania medialne, animacje i zasady stylizacji w razie potrzeby. --- # **📱 Krok 4 - Dodanie stylizacji specyficznej dla mobilności** Aby celować w urządzenia mobilne, należy użyć `.mobile` zmiany wyboru. Przykład: `.futureblink-trust-badge.mobile .fb-title {` `font-size: 14px;` `}` Aplikacja automatycznie owija `.mobile` selektory wewnątrz mobilnego zapytania medialnego podczas renderowania ich na Twoim sklepie. Jeśli wolisz pisać własne pytania medialne, zostaną one zachowane dokładnie tak, jak zostały wprowadzone. --- # **✅ Krok 5 - Zastosuj CSS** Po dodaniu CSS: ➡️ Kliknij **Zastosuj**. Podgląd na żywo aktualizuje się automatycznie, co pozwala na natychmiastowy przegląd stylizacji. Jeśli chcesz usunąć swój styl użytkownika później: ➡️ Kliknij **Reset**. Usuwa CSS i przywraca standardowe ustawienia Design. --- # **👀 Krok 6 - Przegląd podglądu** Po zastosowaniu CSS: ➡️ Przegląd podglądu pulpitu. ➡️ Przejrzyj podgląd Mobile. Sprawdzić, czy: * Tekst pojawia się poprawnie. * Ikony pozostają odpowiednio ustawione. * Odstęp wygląda na zgodny. * Przyciski wyświetlają się zgodnie z oczekiwaniami. Jeżeli wymagane są korekty: ➡️ Uaktualnij CSS. ➡️ Kliknij **Zastosuj** Znowu. Podgląd odświeża się automatycznie po każdej zmianie. --- # **💾 Krok 7 - Zapisz i opublikuj** Kiedy będziesz zadowolony z projektu: ➡️ Kliknij **Zapisz**. ➡️ Kliknij **Publikuj**. ⚠️ Saving alone nie aktualizuje sklepu. Odznaka zaufania musi być również opublikowana, zanim klienci zobaczą zmiany. --- # **⚠️ Ważne uwagi** ### **Własne ustawienia standardowe CSS** Własny CSS ma pierwszeństwo przed większością ustawień karty Design. Jeśli kolor, odstępy lub ustawienie typograficzne wydaje się być ignorowane, prawdopodobnie jest on nadstawiany przez CSS. --- ### **Automatyczne! ważne obsługi** Aplikacja automatycznie dodaje `!important` pierwszeństwo deklaracji CSS przy renderowaniu stylów na stronie internetowej. Nie musisz dodawać `!important` ręcznie. --- ### **Styling łuskany** Własny CSS jest automatycznie skalowany do konkretnej Odznaki zaufania, która jest edytowana. Pomaga to zapobiegać konfliktom stylizacji z: * Inne odznaki zaufania * Elementy motywu * Pozostałe elementy składowe storefrontu --- ### **Puste selektory są dozwolone** Nie musisz używać każdego selektora podanego w szablonie. Tylko dodać style do elementów, które chcesz dostosować. --- ### **Walidacja CSS** Edytor nie sprawdza składni CSS. Jeżeli styl nie jest prawidłowo stosowany: ➡️ Sprawdź nazwy wyboru. ➡️ Sprawdź aparat i średniki. ➡️ Przegląd CSS na błędy składni. --- # **❓ Rozwiązywanie problemów** Jeśli style nie pojawiają się poprawnie: ➡️ Potwierdź **Zastosuj** został kliknięty. ➡️ Weryfikacja Odznaki zaufania została **Uratowana** oraz **Opublikowane**. ➡️ Sprawdź, czy nazwy wyboru dokładnie pasują do dostarczonego szablonu. ➡️ Test w oknie przeglądarki Incognito lub Private. ➡️ Odśwież sklep do jasnych stylów cached. --- # **🎉 Wynik końcowy** ✅ Twoja Odznaka zaufania może być dostosowana do standardowych ustawień Design. ✅ Znakowanie, odstępy, typografia i stylizacja ikon można precyzyjniej kontrolować. ✅ Desktop i ruchome układy mogą być stylizowane niezależnie. ✅ Niestandardowe style pozostają odizolowane od wybranego Odznaki zaufania. CSS Custom zapewnia elastyczny sposób tworzenia bardziej polerowanego i brand- konsekwentnego doświadczenia Trust Badge przy jednoczesnym zachowaniu prostoty budynku aplikacji w narzędziach projektowych. ✨