> ## 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ć niestandardowy CSS dla paska ogłoszeń > ℹ️ **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 wyglądem paska ogłoszeń? 🎨 Choć wbudowane ustawienia projektowania pokrywają większość potrzeb związanych z personalizacją, funkcja **Custom CSS** (niestandardowy CSS) pozwala dokładnie dostosować styl poza standardowymi opcjami. Jest to przydatne dla sprzedawców, którzy chcą precyzyjnie odzwierciedlić wytyczne marki, dostosować odstępy, spersonalizować typografię lub rozwiązać konflikty stylów specyficzne dla danego szablonu. --- # **⚠️ Zanim zaczniesz** Przed użyciem funkcji Custom CSS: * Upewnij się, że pasek ogłoszeń został już utworzony. * Miej podstawową znajomość CSS lub dostęp do dewelopera. * Pamiętaj, że Custom CSS może zastępować standardowe ustawienia projektowania. ℹ️ Większość sprzedawców nigdy nie potrzebuje Custom CSS. Używaj go tylko wtedy, gdy wbudowane opcje projektowania nie pozwalają uzyskać pożądanego wyglądu. --- # **🛠️ Krok 1 — Otwórz kartę Design (Projektowanie)** Otwórz aplikację **Hoppy Announcement Bar** i przejdź do paska ogłoszeń, który chcesz dostosować. Następnie: ➡️ Kliknij kartę **Design** (Projektowanie). Przewiń w dół, aż znajdziesz sekcję **Custom CSS** (niestandardowy CSS). --- # **🎨 Krok 2 — Włącz Custom CSS (niestandardowy CSS)** W sekcji **Custom CSS** (niestandardowy CSS): ➡️ Kliknij przycisk **Apply** (Zastosuj). Po włączeniu pojawi się edytor CSS zawierający wstępnie skonfigurowany szkielet CSS. Szkielet zawiera wszystkie obsługiwane selektory, co ułatwia kierowanie stylów do różnych elementów paska ogłoszeń bez konieczności ręcznego identyfikowania nazw klas. --- # **✍️ Krok 3 — Dodaj swój kod CSS** Edytor zawiera gotowe selektory dla głównych elementów paska ogłoszeń. ### **Dostępne selektory** | Selektor | Opis | | ----- | ----- | | `.futureblink-announcement-bar` | Cały kontener paska ogłoszeń | | `.futureblink-announcement-bar .title` | Główny tekst tytułu | | `.futureblink-announcement-bar .subheading` | Tekst podtytułu | | `.futureblink-announcement-bar .cta-button` | Przycisk wezwania do działania | | `.futureblink-announcement-bar .close-btn` | Ikona zamykania | | `.futureblink-announcement-bar .arrow` | Strzałki nawigacyjne | | `.futureblink-announcement-bar .button-prev` | Przycisk poprzedniego slajdu | | `.futureblink-announcement-bar .button-next` | Przycisk następnego slajdu | ### **Selektory specyficzne dla urządzeń mobilnych** Aby kierować style wyłącznie na urządzenia mobilne, użyj wariantu `.mobile`. Przykłady: * `.futureblink-announcement-bar.mobile .title` * `.futureblink-announcement-bar.mobile .cta-button` * `.futureblink-announcement-bar.mobile .close-btn` --- ### **Przykładowy CSS** Aby wyświetlać tytuł wielkimi literami z dodatkowym odstępem: `.futureblink-announcement-bar .title {` `text-transform: uppercase;` `letter-spacing: 2px;` `}` Aby przycisk CTA był na pełną szerokość na urządzeniach mobilnych: `.futureblink-announcement-bar.mobile .cta-button {` `width: 100%;` `}` 💡 W podanych selektorach możesz używać dowolnych prawidłowych właściwości CSS. --- # **👀 Krok 4 — Podgląd zmian** Po wpisaniu kodu CSS: ➡️ Kliknij przycisk **Apply** (Zastosuj). Podgląd na żywo aktualizuje się automatycznie, więc możesz od razu przejrzeć zmiany. Jeśli konieczne są korekty: ➡️ Edytuj CSS bezpośrednio w edytorze. ➡️ Sprawdź zaktualizowany podgląd. --- # **⚙️ Jak działa Custom CSS (niestandardowy CSS)** Aplikacja automatycznie stosuje dodatkowe przetwarzanie, aby zapewnić poprawne działanie stylów. ### **Automatyczne wstrzykiwanie \!important** Wszystkie deklaracje CSS automatycznie otrzymują priorytet `!important` w witrynie sklepu, aby zapobiec nadpisywaniu zmian przez style szablonu. ### **Automatyczna obsługa urządzeń mobilnych** Selektory korzystające z wariantu `.mobile` są automatycznie zawijane w zapytania medialne dla urządzeń mobilnych podczas renderowania w sklepie. ### **Priorytet nadpisywania projektowania** Custom CSS zazwyczaj ma pierwszeństwo przed standardowymi ustawieniami projektowania skonfigurowanymi w innych miejscach aplikacji. --- # **💾 Krok 5 — Zapisz i opublikuj** Gdy będziesz zadowolony ze stylów: ➡️ Kliknij przycisk **Save** (Zapisz). ➡️ Kliknij przycisk **Publish** (Opublikuj). ⚠️ Samo zapisanie nie aktualizuje witryny sklepu. Konfiguracja musi zostać również opublikowana, zanim klienci zobaczą zmiany. --- # **🔄 Resetuj Custom CSS (niestandardowy CSS)** Jeśli chcesz wrócić do domyślnych ustawień projektowania: ➡️ Otwórz sekcję **Custom CSS** (niestandardowy CSS). ➡️ Kliknij przycisk **Reset** (Resetuj). Spowoduje to usunięcie niestandardowego kodu CSS i przywrócenie kontroli standardowym ustawieniom projektowania. --- # **💡 Przydatne wskazówki** ### **Zacznij od małych zmian** Wprowadzaj zmiany pojedynczo, aby łatwiej było określić, na co wpływa każda reguła CSS. ### **Korzystaj z podglądu na żywo** Zawsze przeglądaj zmiany w podglądzie przed opublikowaniem. ### **Testuj układy mobilne** Nawet jeśli kod CSS wygląda poprawnie na komputerze, sprawdź wygląd na urządzeniach mobilnych. ### **Zachowaj kopię zapasową** W przypadku większych dostosowań CSS rozważ przechowywanie kopii kodu poza aplikacją. --- # **❓ Rozwiązywanie problemów** Jeśli CSS nie jest stosowany zgodnie z oczekiwaniami: ➡️ Sprawdź, czy włączona jest opcja **Apply** (Zastosuj). ➡️ Upewnij się, że pasek ogłoszeń został zapisany za pomocą przycisku **Save** (Zapisz) i opublikowany za pomocą przycisku **Publish** (Opublikuj). ➡️ Sprawdź dokładnie, czy nazwy selektorów zgadzają się z podanymi nazwami klas. ➡️ Przetestuj w oknie incognito, aby wyeliminować problemy z pamięcią podręczną przeglądarki. W przypadku zaawansowanych potrzeb stylistycznych rozważ współpracę z deweloperem Shopify lub zespołem wsparcia Twojego szablonu. --- # **🎉 Efekt końcowy** ✅ Twój pasek ogłoszeń korzysta z w pełni spersonalizowanego stylu. ✅ Konflikty z szablonem są minimalizowane dzięki automatycznemu nadawaniu priorytetu CSS. ✅ Układy mobilne i desktopowe można stylizować niezależnie. ✅ Pasek ogłoszeń można dostosować do wizualnej tożsamości marki z większą precyzją. Custom CSS (niestandardowy CSS) zapewnia maksymalną elastyczność, gdy standardowe ustawienia projektowania są niewystarczające, pomagając stworzyć bardziej dopracowane i spójne wrażenia w sklepie. 🚀