--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/wlasny-css' title: 'Styluj treści kreatora CSS motywu | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:37:13+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Treści kreatora DXPR są częścią strony renderowanej przez twój motyw, więc CSS motywu styluje je w edytorze i na opublikowanej stronie. Użyj tej strony, gdy wygląd ma się powtarzać w wielu elementach albo stronach albo gdy ustawienia elementu go nie dadzą. Kończysz z arkuszem stylów w motywie i klasą do zastosowania przez redaktorów. Do jednego elementu użyj jego okna ustawień.' tags: - 'Match your brand' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Styluj treści kreatora CSS motywu' description: 'Treści kreatora DXPR są częścią strony renderowanej przez twój motyw, więc CSS motywu styluje je w edytorze i na opublikowanej stronie. Użyj tej strony, gdy wygląd ma się powtarzać w wielu elementach albo stronach albo gdy ustawienia elementu go nie dadzą. Kończysz z arkuszem stylów w motywie i klasą do zastosowania przez redaktorów. Do jednego elementu użyj jego okna ustawień.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:37:13+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/wlasny-css' articleSection: 'Dopasuj do marki' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/wlasny-css' description: 'Treści kreatora DXPR są częścią strony renderowanej przez twój motyw, więc CSS motywu styluje je w edytorze i na opublikowanej stronie. Użyj tej strony, gdy wygląd ma się powtarzać w wielu elementach albo stronach albo gdy ustawienia elementu go nie dadzą. Kończysz z arkuszem stylów w motywie i klasą do zastosowania przez redaktorów. Do jednego elementu użyj jego okna ustawień.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Zarządzaj witryną](/pl/hc/documentation/learn-dxpr-builder/manage) /[Dopasuj do marki](/pl/hc/documentation/learn-dxpr-builder/customization) # Styluj treści kreatora CSS motywu. Poznaj DXPR BuilderZarządzaj witrynąDopasuj do marki ## W tym przewodniku Powiązane przewodniki - [Klasy narzędziowe](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/klasy-narzedziowe) - [Używaj czcionek marki na stronach kreatora](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/wlasne-czcionki) - [Dodaj style marki i przyciski do edytora tekstu](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/edytor-tekstu) Treści kreatora DXPR są częścią strony renderowanej przez twój motyw, więc CSS motywu styluje je w edytorze i na opublikowanej stronie. Użyj tej strony, gdy wygląd ma się powtarzać w wielu elementach albo stronach albo gdy ustawienia elementu go nie dadzą. Kończysz z arkuszem stylów w motywie i klasą do zastosowania przez redaktorów. Do jednego elementu użyj jego [okna ustawień](/hc/documentation/learn-dxpr-builder/element-settings). ## Zanim zaczniesz - Potrzebujesz dostępu do plików motywu i sposobu ich wdrożenia. - Użyj własnego motywu albo submotywu. Aktualizacja motywu dodatkowego zastępuje jego pliki, a wraz z nimi twój CSS. ## Konfiguracja 1. Utwórz `css/custom.css` w katalogu motywu, na przykład `themes/custom/mytheme/css/custom.css`. 2. Zadeklaruj plik w `mytheme.libraries.yml`: ```yaml global-styling: css: theme: css/custom.css: {} ``` 3. Wczytaj bibliotekę na każdej stronie z `mytheme.info.yml`: ```yaml libraries: - mytheme/global-styling ``` 4. Napisz regułę dla własnej nazwy klasy: ```css .brand-hero { background: linear-gradient(135deg, #1a4d8f, #0f2a4d); color: #ffffff; } ``` 5. Wyczyść pamięć podręczną w **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`) poleceniem **Clear all caches** albo uruchom `drush cr`. 6. W kreatorze otwórz ustawienia **Section** i dodaj `brand-hero` w **HTML classes**. [HTML ID i klasy](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css) pokazują, jak wpisać własną klasę. Redaktorzy mogą też wybrać klasę z listy **HTML classes**, gdy motyw ją tam wymieni; zobacz [klasy narzędziowe](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/klasy-narzedziowe). ## Co widzisz Sekcja przejmuje gradient i biały tekst, gdy tylko dodasz klasę, ponieważ edytor działa na stronie renderowanej przez twój motyw. Odwiedzający widzą to samo po zapisaniu strony. Klasa przechowywana jest w HTML strony, więc późniejsza zmiana reguły aktualizuje każdy element, który ją ma. ## Klasy zapisywane przez kreator DXPR Własna klasa to najbezpieczniejszy cel. Te klasy też znajdują się w zapisanym HTML: | Selektor | Pasuje do | |---|---| | `.az-container` | opakowanie każdego pola kreatora DXPR; ma też `.dxpr-editor`, gdy ktoś je edytuje | | `.az-section` | każda **Section**; wewnątrz niej znajduje się `.container` albo `.container-fluid`, gdy **Full width** jest włączone | | `.row` | każdy **Row**; kreator DXPR używa własnej klasy Bootstrapa i nie dodaje `az-row` | | `.col-*` | każda kolumna, na przykład `.col-12.col-md-6`; nie ma `az-column` | | `.az-text`, `.az-image`, `.az-button`, `.az-card` | jeden typ elementu: `az-` plus nazwa elementu, na przykład `.az-separator` dla elementu Divider | | `.az-element` | większość elementów treści, ale nie Image, Icon ani Button | Panel **Style** zapisuje osadzone atrybuty `style`, które biją regułę klasy dla tej samej właściwości. Klasy narzędziowe Bootstrapa oznaczone są `!important` i biją obie. ## Jeśli nie widzisz stylu - **Klasa jest na elemencie, ale nic się nie zmienia.** Biblioteka nie jest wczytana albo pamięć podręczna nadal trzyma stary CSS. Sprawdź, czy `mytheme.info.yml` wymienia bibliotekę, potem wyczyść pamięci podręczne w `/admin/config/development/performance`. - **Stosują się tylko niektóre właściwości.** Wartość panelu **Style** dla tej samej właściwości wygrywa. Wyczyść tę wartość w panelu **Style** elementu albo przenieś cały wygląd do swojej klasy. - **Styl pokazuje się w edytorze, ale nie u odwiedzających.** **Apply text format filters to frontend content** jest włączone, a format tekstu pola usuwa atrybuty `class`. Wyłącz je w **Text Filters** w `/admin/dxpr_studio/dxpr_builder/settings` albo zezwól na klasy w formacie. - **Reguła dla `.az-row` albo `.az-column` nigdy nie pasuje.** Kreator DXPR nie zapisuje tych klas. Celuj w `.row`, klasy `.col-*` albo własną klasę. ## Co dalej? - [Klasy narzędziowe](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/klasy-narzedziowe): wymień swoje klasy w **HTML classes**, aby redaktorzy mogli je wybierać. - [Własne czcionki](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/wlasne-czcionki): wczytaj czcionki marki tak samo. - [Edytor tekstu](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/edytor-tekstu): oferuj klasy dla akapitów i słów na liście **Styles**.