--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/programowanie/motywy' title: 'Motywy w DXPR Builder | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:35:55+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Treść kreatora to zwykły HTML na twojej stronie, więc twój motyw stylizuje ją jak każdą inną treść. Ta strona opisuje, co motyw dziedziczy, jak dodaje klasy do edytora i gdzie umieszczać nadpisania. Co stylizuje twój motyw Opublikowana treść kreatora dziedziczy style twojego motywu: tags: - 'Build on it' 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: 'Motywy w DXPR Builder' description: |- Treść kreatora to zwykły HTML na twojej stronie, więc twój motyw stylizuje ją jak każdą inną treść. Ta strona opisuje, co motyw dziedziczy, jak dodaje klasy do edytora i gdzie umieszczać nadpisania. Co stylizuje twój motyw Opublikowana treść kreatora dziedziczy style twojego motywu: image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T01:35:55+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/programowanie/motywy' articleSection: 'Twórz na tej bazie' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/programowanie/motywy' description: |- Treść kreatora to zwykły HTML na twojej stronie, więc twój motyw stylizuje ją jak każdą inną treść. Ta strona opisuje, co motyw dziedziczy, jak dodaje klasy do edytora i gdzie umieszczać nadpisania. Co stylizuje twój motyw Opublikowana treść kreatora dziedziczy style twojego motywu: 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) /[Rozszerzenia](/pl/hc/documentation/learn-dxpr-builder/extend) /[Twórz na tej bazie](/pl/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Motywy w DXPR Builder. Poznaj DXPR BuilderRozszerzeniaTwórz na tej bazie ## W tym przewodniku Treść kreatora to zwykły HTML na twojej stronie, więc twój motyw stylizuje ją jak każdą inną treść. Ta strona opisuje, co motyw dziedziczy, jak dodaje klasy do edytora i gdzie umieszczać nadpisania. ## Co stylizuje twój motyw Opublikowana treść kreatora dziedziczy style twojego motywu: - Nagłówki, tekst zasadniczy i linki używają stylów twojego motywu. - Układ używa wierszy i kolumn Bootstrap 5, więc motyw oparty na Bootstrap 5 wyrównuje się z nim. Przy każdym innym motywie przejdź do **DXPR Studio > DXPR Builder > General Settings** i ustaw **Sideload Bootstrap files** na **Bootstrap 5**. - Każdy element ma jedną klasę na typ, na przykład `az-card` albo `az-button`, a większość niesie też `az-element`; zobacz [Architektura CSS](/pl/hc/dokumentacja/nauka-dxpr-builder/programowanie/architektura-css). ## Dodawanie klas do edytora ### W pliku info.yml motywu Wymień klasy w `dxpr_builder_classes` w pliku `.info.yml` swojego motywu. Pojawiają się na liście **HTML classes** każdego elementu, w grupie opcji nazwanej od motywu, gdy motyw jest włączony: ```yaml # mytheme.info.yml dxpr_builder_classes: brand-header: 'Brand header style' brand-cta: 'Call to action style' bg-gradient-primary: 'Primary gradient background' ``` ### Z modułu Zaimplementuj `hook_dxpr_builder_classes_alter()`. Nazwa musi kończyć się na `_alter`; zobacz [Dokumentacja API hooków](/pl/hc/dokumentacja/nauka-dxpr-builder/programowanie/api-hookow). ```php /** * Implements hook_dxpr_builder_classes_alter(). */ function mymodule_dxpr_builder_classes_alter(&$classes) { $classes['optgroup-custom'] = t('Custom Styles'); $classes['custom-card'] = t('Custom card'); $classes['custom-hero'] = t('Custom hero'); } ``` ## Style przycisków Element przycisku oferuje style Bootstrapa Primary, Secondary, Success, Info, Warning, Danger, Link, Light i Dark. Lista jest stała w edytorze; hook folderów przycisków jej nie zmienia. Aby nadać przyciskom wygląd marki, ostyluj klasy `btn-*` Bootstrapa w swoim motywie albo dodaj własną klasę przez **HTML classes**. ## Nadpisania CSS Nadpisz wyjście kreatora w CSS swojego motywu: ```css /* Section padding */ .az-section { padding-top: 4rem; padding-bottom: 4rem; } /* Card shadows */ .az-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } ``` Ustawienia wprowadzone przez redaktora na zakładce Styl zapisują się jako style wstawione. Style wstawione biją reguły motywu, które nie używają `!important`, więc używaj CSS motywu do wartości domyślnych, a redaktorom pozwól nadpisywać je na element. ## Edytor a twój motyw Edytor działa na stronie, na której wyświetla się pole, więc wewnątrz twojego motywu front-endowego, nie motywu administracyjnego. Jego paski sterowania, menu i okna niosą klasę `dxpr-builder-ui` i wczytują własny arkusz stylów `dxpr_builder_backend.css`. Reguły motywu celujące w szerokie selektory, na przykład `button` albo `.modal`, wciąż mogą je dosięgnąć; ogranicz swoje reguły do regionów treści, aby tego uniknąć.