> ## 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łasny CSS dla aplikacji rezerwujących nominacje

> ℹ️ **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, aby widget rezerwacji pasował dokładnie do marki sklepu? Hoppy Appointments pozwala na dodanie własnego CSS na szczycie built- w ustawieniach projektowych, więc można fine- tune czcionki, kolory, odstępy, przyciski i więcej.

Ten przewodnik prowadzi Cię przez dodanie i stosowanie niestandardowych CSS do widżetu rezerwacji.

---

# **⚠️ Zanim zaczniesz**

Przed użyciem własnego CSS upewnij się, że masz:

*   W **Hoppy Appointments** aplikacja zainstalowana na Twoim Shopify przechowywać
*   Co najmniej jedna usługa aktywna
*   Podstawowa znajomość wybranych CSS i deklaracji

💡 Dla większości zmian projektu - kolory, czcionki, logo i style guzików - użyj built- in **Projekt** Najpierw ustawienia. Własny CSS jest najlepszy, gdy potrzebujesz zmian built- w opcje nie pokrywają.

Pełny przegląd opcji konstrukcyjnych, patrz **Rezerwacja ofert - Opcje projektowania i stylizacji**.

---

# **🛠️ Krok 1 - Otwarcie własnego edytora CSS**

Custom CSS można zarządzać w dwóch miejscach.

## **Globalny CSS (domyślnie dotyczy wszystkich usług)**

1.  Otwórz **Hoppy Appointments** aplikacja
2.  Kliknij **Ustawienia** w menu aplikacji
3.  Kliknij **Projekt**
4.  Przewiń w dół do **Niestandardowe CSS** karta na dole strony

## **Perservice CSS (przewyższa globalny CSS dla jednej usługi)**

1.  Otwórz **Hoppy Appointments** aplikacja
2.  Idź do **Usługi**
3.  Kliknij usługę chcesz styl
4.  Kliknij **Projekt** tab
5.  Upewnij się, że **Nie stosuj domyślnych ustawień motywu** należy sprawdzić
6.  Przewiń w dół do **Niestandardowe CSS** karta

---

# **🛠️ Krok 2 - Wybierz globalny lub usługowy poziom CSS**

Podczas edycji CSS na usługi **Projekt** tab, zobaczysz toggle:

**Nie stosuj domyślnych ustawień motywu**

*   **Wyłącz** → usługa wykorzystuje globalny CSS z **Ustawienia → Projektowanie**
*   **On** → usługa wykorzystuje własne CSS z poziomu usługi **Projekt** tab

Pozwala to zachować jeden spójny styl we wszystkich usługach, lub dać konkretne usługi unikalny wygląd.

---

# **🛠️ Krok 3 - Napisz swój CSS**

Edytor CSS rozpoczyna się od domyślnego szablonu, który zawiera najczęstsze wybieracze widżetów. Możesz zastąpić lub rozszerzyć szablon własnymi zasadami.

## **Główne klasy opakowań**

Wybór

Co ma na celu

`.futureblink-appointment`

Cały widget rezerwacji

`.futureblink-appointment .dialog`

Główne okno rezerwacji (pulpit)

`.futureblink-appointment.mobile .dialog`

Główne okno rezerwacji (mobilne)

`.futureblink-appointment .userInfoSection`

Panel szczegółów obsługi

## **Wspólne selektory można stylizować**

Wybór

Co ma na celu

`.futureblink-appointment .confirm-btn`

Potwierdź / zapisz przycisk

`.futureblink-appointment .continue-btn`

Dalej

`.futureblink-appointment .back-btn`

Przycisk tylny

`.futureblink-appointment .time-slot.selected`

Wybrane gniazdo czasu

`.futureblink-appointment .highlighted_date.react-calendar__tile--active`

Wybrana data kalendarzowa

`.futureblink-appointment .schedule-form`

Formularz rezerwacji dla klienta

`.futureblink-appointment .meeting-booked`

Strona sukcesu / potwierdzenia

## **Przykład**

.futureblink- innocent. confirm- btn {  
color: # 2563eb;  
kolor: # ffffff;  
promień graniczny: 8px;  
¶

.futureblink- requirement.mobile .confirm- btn {  
background- color: # 1d4ed8;  
¶

ℹ️ Tak. **nie** trzeba dodać `!important` Do twoich deklaracji. Hoppy Appointments automatycznie dołącza `!important` kiedy CSS jest wstrzykiwane do widżetu, co pomaga Twoim zasadom nadpisać domyślne style.

---

# **🛠️ Krok 4 - Zastosuj CSS**

Po wprowadzeniu CSS, kliknij przycisk **Zastosuj** przycisk poniżej edytora.

*   **Zastosuj** → umożliwia niestandardowe CSS i wprowadza go do widget rezerwacji
*   **Reset** → wyłącza własny CSS i przywraca edytor do domyślnego szablonu

⚠️ Własny CSS działa dopiero po kliknięciu **Zastosuj**. Wklejanie CSS w pole samo nie zmienia wyglądu widżetu.

---

# **💾 Krok 5 - Zapisz i podgląd**

1.  Kliknij **Zapisz** w górnym pasku
2.  Czekaj na wiadomość potwierdzającą
3.  Podgląd widżetu rezerwacji w Twoim sklepie lub w panelu podglądu admin

Jeśli edytujesz CSS, upewnij się, że **Nie stosuj domyślnych ustawień motywu** Włączanie jest włączone, w przeciwnym razie globalny CSS będzie nadal używany.

---

# **💡 Porady i najlepsze praktyki**

*   **Uruchom mały** - zmienić jeden element na raz, aby zobaczyć, co każda zasada wpływa
*   **Użyj specyficznych selektorów** - cel `.futureblink-appointment .your-class` zamiast szerokich selektorów, które mogą wpływać na inne części sklepu
*   **Badanie w trybie mobilnym** - `.futureblink-appointment.mobile` przedrostek do regulacji układu mobilnego oddzielnie
*   **Zachowaj kopię zapasową** - skopiować działający CSS do pliku notatek przed kliknięciem **Reset**
*   **Użyj najpierw ustawień konstrukcyjnych** - kolory, czcionki i logo są łatwiejsze do zarządzania tam i nie wymagają wiedzy CSS

---

# **🐞 Rozwiązywanie problemów**

## **Mój CSS nie pokazuje się w sklepie**

1.  Upewnij się, że kliknąłeś **Zastosuj** w edytorze CSS
2.  Upewnij się, że kliknąłeś **Zapisz** na górze strony
3.  W przypadku CSS dla przerobu, upewnij się, że **Nie stosuj domyślnych ustawień motywu** jest włączony
4.  Sprawdź, czy Twoje wybieracze pasują do prawdziwych nazw klas widget
5.  Wyczyść bufora przeglądarki lub test w oknie incognito

## **Widget wrócił do domyślnego wyglądu**

Kliknięcie **Reset** wyłącza CSS i przywraca domyślny szablon. Jeśli chcesz odzyskać swoje niestandardowe zasady, wklej je ponownie i kliknij **Zastosuj**.

## **Niektóre zasady nie działają.**

Automat `!important` wtrysk działa najlepiej z prostym `property: value;` deklaracje. Bardzo złożony CSS - takie jak `@media` pytania, `@keyframes`lub zagnieżdżone sektory - nie mogą być przekształcane niezawodnie. Trzymaj swoje zasady proste dla najbardziej konsekwentnych wyników.

---

# **📚 Artykuły pokrewne**

*   **Rezerwacja ofert - Opcje projektowania i stylizacji**
*   **Jak skonfigurować lokalizacje spotkań dla rezerwacji mianowań**
*   **Jak skonfigurować usługę rezerwacji**