In diesem Reiter kannst du mithilfe eines grafischen Editors gezielt CSS-Regeln für vordefinierte Bereiche erstellen und deine gespeicherten Regeln verwalten.
Wichtiger Hinweis: Dieses Tool soll dir zur Unterstützung dienen, um dein NIUplus auch ohne CSS Kenntnisse zu individualisieren. Es ersetzt jedoch keine Fachkenntnisse. Du benutzt dieses Tool auf eigene Verantwortung. Der Hersteller leistet keinen kostenfreien Support für Änderungen, die mit diesem Tool erstellt wurden.
Hier definierst du die Eigenschaften einer neuen Design-Anpassung.
Selektor wählen: Wähle im ersten Dropdown den Bereich aus, den du bearbeiten möchtest (z. B. “Nav Topbar”). Im zweiten Dropdown kannst du einen Status wählen (z. B. “Ohne” für den Normalzustand).
Hintergrundfarbe: Lege eine Hintergrundfarbe fest. Aktiviere den Important-Schalter, um diese Regel zu erzwingen (CSS !important).
Schriftfarbe: Lege die Textfarbe fest. Auch hier steht dir der Important-Schalter zur Priorisierung zur Verfügung.
Schriftdicke: Wähle die Stärke der Schriftart (Font Weight) aus dem Dropdown. Nutze Important, falls die Änderung sonst nicht greift.
Custom Rules: In dieses Textfeld kannst du manuellen CSS-Code eingeben, um Eigenschaften zu ändern, die oben nicht als Auswahlfeld zur Verfügung stehen (z. B. border: 1px solid #e5e5e5;).
Code Editor: Trage hier deinen kompletten CSS-Code ein (“Code goes here…”). Dieser wird global in das Stylesheet des Shops geladen.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"DZM Dokumentation","description":"Willkommen in der offiziellen Dokumentation der DZM Plugins. Hier findest du alles, was du brauchst, um das Maximum aus deinem JTL-Shop herauszuholen – von der Installation über die Konfiguration bis hin zu Best Practices und Troubleshooting.","colors":{"primary":"#005F56","light":"#BAF06D","dark":"#0A2624"},"logo":{"light":"https://mintcdn.com/dzm/w5Mco5BVQjkhpkQO/images/dzm-icon.png?fit=max\u0026auto=format\u0026n=w5Mco5BVQjkhpkQO\u0026q=85\u0026s=8ac7f5545b8684ff5ee8605a01bd0e74","dark":"https://mintcdn.com/dzm/k15FIjREh6T3sdQw/images/dzm-icon-white.png?fit=max\u0026auto=format\u0026n=k15FIjREh6T3sdQw\u0026q=85\u0026s=145dbf954c7b19d3e14e16360943348b"},"favicon":"https://mintcdn.com/dzm/w5Mco5BVQjkhpkQO/images/dzm-icon.png?fit=max\u0026auto=format\u0026n=w5Mco5BVQjkhpkQO\u0026q=85\u0026s=8ac7f5545b8684ff5ee8605a01bd0e74","appearance":{"default":"dark"},"background":{"decoration":"grid","color":{"dark":"#0A2624"}},"navbar":{"links":[{"href":"https://dreizack-medien.de/neues-ticket-erstellen","label":"Support"},{"href":"https://dreizack-medien.de/","label":"Website"}],"primary":{"type":"button","label":"Dashboard","href":"https://dashboard.mintlify.com"}},"footer":{"socials":{"youtube":"https://www.youtube.com/@dreizackmedien-de/videos","website":"https://dreizack-medien.de/","instagram":"https://www.instagram.com/dreizackmedien"}},"search":{"prompt":"Suche nach Plugins, Optionen und Features"},"fonts":{"family":"Inter","source":"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900\u0026family=Signika:wght@300..700\u0026display=swap","format":"woff"},"banner":{"content":"Offizielle Dokumentation - Dreizack Medien GmbH","dismissible":false},"contextual":{"options":["copy","view","chatgpt","claude","perplexity","mcp","cursor","vscode"],"display":"header"},"styling":{"latex":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"dzm","hasAudioNarration":false,"actualSubdomain":"dzm","customDomains":["docs.dreizack-medien.de"],"gitSource":{"type":"gitlab","owner":"dreizack-medien","repo":"dzm_docs","projectId":78283979,"deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ae071f30b7ac5b0e15f3fe8","collectionId":"12a0f76a-9b40-4354-84be-bfdd4f5f1e1c","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae071f30b7ac5b0e15f3fe8"},"entitlements":{},"buildId":"6ae071f30b7ac5b0e15f3fe8","clientVersion":"0.0.3990","searchFilterCounts":[{"language":"default","tag":"OPC Plus","count":86},{"language":"default","tag":"Einstellungen","count":59},{"language":"default","tag":"NIU Plus Template","count":34},{"language":"default","tag":"Quickstart","count":31},{"language":"default","tag":"Setup","count":28},{"language":"default","tag":"OPC Conversion Booster","count":21},{"language":"default","tag":"Resources \u0026 Health","count":20},{"language":"default","tag":"Portlets \u0026 Widgets","count":17},{"language":"default","tag":"Updates \u0026 Changelog","count":16},{"language":"default","tag":"ECommerce Portlets","count":13}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-v7-file-tree","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"pause-universal-search-reconcile","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-nav-generations","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-agent-model-picker","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"isAtlas":false,"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"NIU-Plus/custom-css","slug":"/NIU-Plus/custom-css","pageMetadata":{"title":"Custom CSS Editor","description":"Definiere eigene CSS-Regeln und gestalte deinen Shop individuell, auch ohne tiefgehende Programmierkenntnisse.","href":"/NIU-Plus/custom-css"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Definiere eigene CSS-Regeln und gestalte deinen Shop individuell, auch ohne tiefgehende Programmierkenntnisse.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={code:`code`,hr:`hr`,li:`li`,p:`p`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{Frame,Heading,OptimizedImage,Warning}=_components;if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsx(Heading,{level:`2`,id:`deine-regeln`,children:`Deine Regeln`}),`\n`,_jsx(_components.p,{children:`In diesem Reiter kannst du mithilfe eines grafischen Editors gezielt CSS-Regeln für vordefinierte Bereiche erstellen und deine gespeicherten Regeln verwalten.`}),`\n`,_jsx(`div`,{className:`mint-border mint-border-[#DFE1E1] mint-rounded-2xl mint-overflow-hidden dark:mint-border-transparent`,children:_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-editor.jpg?fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=630f3e522e03b48b64a864e4f8cbb677`,alt:`Custom CSS Editor`,\"data-og-width\":`2064`,width:`2064`,\"data-og-height\":`1192`,height:`1192`,\"data-path\":`images/niu-plus-custom-css-editor.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-editor.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=69d8994d792fc27badd246e7a0e95ab3 280w, https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-editor.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=118c2c74226920811374085d8b255982 560w, https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-editor.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=fd4f164aaeb8a8f4ff4dbd5966d2c1c0 840w, https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-editor.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=614dd82023835a67f3bd6eb6d269de4e 1100w, https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-editor.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=c19cd006a6c4ef711178a42173943b06 1650w, https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-editor.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=1efc65ae3ea5f57f77860235ba997686 2500w`})})}),`\n`,_jsx(Warning,{children:_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`Wichtiger Hinweis:`}),` Dieses Tool soll dir zur Unterstützung dienen, um dein NIUplus auch ohne CSS Kenntnisse zu individualisieren. Es ersetzt jedoch keine Fachkenntnisse. Du benutzt dieses Tool auf eigene Verantwortung. Der Hersteller leistet keinen kostenfreien Support für Änderungen, die mit diesem Tool erstellt wurden.`]})}),`\n`,_jsx(Heading,{level:`3`,id:`neue-css-regel-erstellen`,children:`Neue CSS Regel erstellen`}),`\n`,_jsx(_components.p,{children:`Hier definierst du die Eigenschaften einer neuen Design-Anpassung.`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Selektor wählen:`}),` Wähle im ersten Dropdown den Bereich aus, den du bearbeiten möchtest (z. B. “Nav Topbar”). Im zweiten Dropdown kannst du einen Status wählen (z. B. “Ohne” für den Normalzustand).`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Hintergrundfarbe:`}),` Lege eine Hintergrundfarbe fest. Aktiviere den `,_jsx(_components.strong,{children:`Important`}),`-Schalter, um diese Regel zu erzwingen (CSS `,_jsx(_components.code,{children:`!important`}),`).`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Schriftfarbe:`}),` Lege die Textfarbe fest. Auch hier steht dir der `,_jsx(_components.strong,{children:`Important`}),`-Schalter zur Priorisierung zur Verfügung.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Schriftdicke:`}),` Wähle die Stärke der Schriftart (Font Weight) aus dem Dropdown. Nutze `,_jsx(_components.strong,{children:`Important`}),`, falls die Änderung sonst nicht greift.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Custom Rules:`}),` In dieses Textfeld kannst du manuellen CSS-Code eingeben, um Eigenschaften zu ändern, die oben nicht als Auswahlfeld zur Verfügung stehen (z. B. `,_jsx(_components.code,{children:`border: 1px solid #e5e5e5;`}),`).`]}),`\n`]}),`\n`,_jsx(Heading,{level:`3`,id:`deine-regeln-übersicht`,children:`Deine Regeln (Übersicht)`}),`\n`,_jsx(_components.p,{children:`Unterhalb des Editors findest du eine Liste aller bereits angelegten Regeln.`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Tabelle:`}),` Hier siehst du eine Übersicht der Regeln, sortiert nach `,_jsx(_components.strong,{children:`Selektor`}),` und `,_jsx(_components.strong,{children:`State`}),`.`,`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Wenn keine Regeln vorhanden sind, erscheint die Meldung “Keine Datensätze gefunden”.`}),`\n`,_jsxs(_components.li,{children:[`Du kannst die Anzahl der angezeigten Elemente pro Seite (“Items per page”) steuern (z. B. `,_jsx(_components.code,{children:`100`}),`).`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,_jsx(_components.hr,{}),`\n`,_jsx(Heading,{level:`2`,id:`dein-stylesheet`,children:`Dein Stylesheet`}),`\n`,_jsx(_components.p,{children:`Dieser Reiter bietet dir einen freien Code-Editor für umfangreichere oder komplett freie CSS-Anpassungen.`}),`\n`,_jsx(`div`,{className:`mint-border mint-border-[#DFE1E1] mint-rounded-2xl mint-overflow-hidden dark:mint-border-transparent`,children:_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-stylesheet.jpg?fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=54f1950c171ab4a3c27e7f03cd041972`,alt:`Custom CSS Stylesheet`,\"data-og-width\":`2018`,width:`2018`,\"data-og-height\":`716`,height:`716`,\"data-path\":`images/niu-plus-custom-css-stylesheet.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-stylesheet.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=4a961e4dc2bcad4a496a83c22b5faa50 280w, https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-stylesheet.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=2b2f161ccc2f115e3993c574539bc9e2 560w, https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-stylesheet.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=da46cf3a3de46da759affc985348388c 840w, https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-stylesheet.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=6817450aafefa8430fd29d0ab523043d 1100w, https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-stylesheet.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=930fcfbb3dc4d09f13970c6cddff8428 1650w, https://mintcdn.com/dzm/3pbDFteAD0ejAg3i/images/niu-plus-custom-css-stylesheet.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=3pbDFteAD0ejAg3i\u0026q=85\u0026s=7633f4d6a6e5d02584f99d706e9a43ef 2500w`})})}),`\n`,_jsx(Heading,{level:`3`,id:`neue-css-regel-erstellen-2`,children:`Neue CSS Regel erstellen`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Code Editor:`}),` Trage hier deinen kompletten CSS-Code ein (“Code goes here…”). Dieser wird global in das Stylesheet des Shops geladen.`]}),`\n`]}),`\n`,_jsx(`div`,{style:{height:`1px`,backgroundColor:`silver`,margin:`24px 0`}})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Custom CSS Editor","description":"Definiere eigene CSS-Regeln und gestalte deinen Shop individuell, auch ohne tiefgehende Programmierkenntnisse.","href":"/NIU-Plus/custom-css"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Deine Regeln","slug":"deine-regeln","depth":2,"children":[{"title":"Neue CSS Regel erstellen","slug":"neue-css-regel-erstellen","depth":3,"children":[]},{"title":"Deine Regeln (Übersicht)","slug":"deine-regeln-übersicht","depth":3,"children":[]}]},{"title":"Dein Stylesheet","slug":"dein-stylesheet","depth":2,"children":[{"title":"Neue CSS Regel erstellen","slug":"neue-css-regel-erstellen-2","depth":3,"children":[]}]}],"codeExamples":{}},"jsLinks":[],"dynamicCss":".mint-overflow-hidden {\n overflow: hidden\n}\n.mint-rounded-2xl {\n border-radius: 1rem\n}\n.mint-border {\n border-width: 1px\n}\n.mint-border-\\[\\#DFE1E1\\] {\n --tw-border-opacity: 1;\n border-color: rgb(223 225 225 / var(--tw-border-opacity, 1))\n}\n.dark\\:mint-border-transparent:is(.dark *) {\n border-color: transparent\n}","subdomain":"dzm","siteName":"DZM Dokumentation","title":"Custom CSS Editor - DZM Dokumentation","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-04-08T09:41:35.090Z","originalFileLocation":"NIU-Plus/custom-css.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Definiere eigene CSS-Regeln und gestalte deinen Shop individuell, auch ohne tiefgehende Programmierkenntnisse.\">\u003cmeta data-mint-head name=\"application-name\" content=\"DZM Dokumentation\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/dzm/gRDJqCSor3lSjlNb/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/dzm/gRDJqCSor3lSjlNb/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/dzm/gRDJqCSor3lSjlNb/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/dzm/gRDJqCSor3lSjlNb/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/dzm/gRDJqCSor3lSjlNb/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/dzm/gRDJqCSor3lSjlNb/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/dzm/gRDJqCSor3lSjlNb/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/dzm/gRDJqCSor3lSjlNb/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/dzm/gRDJqCSor3lSjlNb/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Custom CSS Editor - DZM Dokumentation\">\u003cmeta data-mint-head property=\"og:description\" content=\"Definiere eigene CSS-Regeln und gestalte deinen Shop individuell, auch ohne tiefgehende Programmierkenntnisse.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"DZM Dokumentation\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.dreizack-medien.de/NIU-Plus/custom-css\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://dzm.mintlify.app/_mintlify/api/og/v2?division=Setup\u0026amp;title=Custom+CSS+Editor\u0026amp;description=Definiere+eigene+CSS-Regeln+und+gestalte+deinen+Shop+individuell%2C+auch+ohne+tiefgehende+Programmierkenntnisse.\u0026amp;theme=d0550ab4562e35d419b96497\u0026amp;signature=2cef819bb0464e5421493831d0a9560e4e3e210cd1ba90195d11a296998fa494\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Custom CSS Editor - DZM Dokumentation\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Definiere eigene CSS-Regeln und gestalte deinen Shop individuell, auch ohne tiefgehende Programmierkenntnisse.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://dzm.mintlify.app/_mintlify/api/og/v2?division=Setup\u0026amp;title=Custom+CSS+Editor\u0026amp;description=Definiere+eigene+CSS-Regeln+und+gestalte+deinen+Shop+individuell%2C+auch+ohne+tiefgehende+Programmierkenntnisse.\u0026amp;theme=d0550ab4562e35d419b96497\u0026amp;signature=2cef819bb0464e5421493831d0a9560e4e3e210cd1ba90195d11a296998fa494\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/dzm/gRDJqCSor3lSjlNb/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"DZM Dokumentation\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#005F56\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.dreizack-medien.de/NIU-Plus/custom-css\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/NIU-Plus/custom-css.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.dreizack-medien.de/#organization\",\"name\":\"DZM Dokumentation\",\"url\":\"https://docs.dreizack-medien.de\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/dzm/w5Mco5BVQjkhpkQO/images/dzm-icon.png?fit=max\u0026auto=format\u0026n=w5Mco5BVQjkhpkQO\u0026q=85\u0026s=8ac7f5545b8684ff5ee8605a01bd0e74\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.dreizack-medien.de#website\",\"name\":\"DZM Dokumentation\",\"url\":\"https://docs.dreizack-medien.de\",\"publisher\":{\"@id\":\"https://docs.dreizack-medien.de/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.dreizack-medien.de/NIU-Plus/custom-css#webpage\",\"url\":\"https://docs.dreizack-medien.de/NIU-Plus/custom-css\",\"name\":\"Custom CSS Editor\",\"description\":\"Definiere eigene CSS-Regeln und gestalte deinen Shop individuell, auch ohne tiefgehende Programmierkenntnisse.\",\"dateModified\":\"2026-04-08T09:41:35.090Z\",\"isPartOf\":{\"@id\":\"https://docs.dreizack-medien.de#website\"},\"breadcrumb\":{\"@id\":\"https://docs.dreizack-medien.de/NIU-Plus/custom-css#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.dreizack-medien.de/NIU-Plus/custom-css#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Setup\",\"item\":\"https://docs.dreizack-medien.de/NIU-Plus/variablen\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom CSS Editor\",\"item\":\"https://docs.dreizack-medien.de/NIU-Plus/custom-css\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.dreizack-medien.de/NIU-Plus/custom-css#article\",\"headline\":\"Custom CSS Editor\",\"name\":\"Custom CSS Editor\",\"description\":\"Definiere eigene CSS-Regeln und gestalte deinen Shop individuell, auch ohne tiefgehende Programmierkenntnisse.\",\"url\":\"https://docs.dreizack-medien.de/NIU-Plus/custom-css\",\"mainEntityOfPage\":{\"@id\":\"https://docs.dreizack-medien.de/NIU-Plus/custom-css#webpage\"},\"dateModified\":\"2026-04-08T09:41:35.090Z\",\"publisher\":{\"@id\":\"https://docs.dreizack-medien.de/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.dreizack-medien.de#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"DZM Dokumentation\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"DZM Dokumentation","nav":{"global":null,"products":[{"product":"Home","icon":"house","pages":[{"title":"Home","href":""}]},{"product":"NIU Plus Template","icon":"display-code","description":"JTL Shop 5 Template","groups":[{"group":"Quickstart","icon":"flag","pages":[{"title":"Einführung","href":"/NIU-Plus/einfuehrung"},{"title":"Installation","href":"/NIU-Plus/installation"},{"title":"Erste Schritte","href":"/NIU-Plus/erste-schritte"},{"title":"Update","href":"/NIU-Plus/update"}]},{"group":"Updates \u0026 Changelog","icon":"clock-rotate-left","pages":[{"title":"Changelog","href":"/NIU-Plus/changelog"}]},{"group":"Aktuelles","icon":"bell","pages":[{"title":"Gewährleistung und Garantie-Label","href":"/NIU-Plus/garantie-label"}]},{"group":"Setup","icon":"diagram-cells","pages":[{"title":"Variablen","href":"/NIU-Plus/variablen"},{"title":"Theme 2.0 (Beta)","description":"Neues, tokenbasiertes Farb- und Gestaltungssystem für NIU Plus","href":"/NIU-Plus/theme-2-0"},{"title":"Custom CSS Editor","href":"/NIU-Plus/custom-css"},{"title":"Header","description":"Header und Navigationsleiste konfigurieren","href":"/NIU-Plus/header"},{"title":"Menü","href":"/NIU-Plus/menue-2"},{"title":"Menu Builder (BETA)","href":"/NIU-Plus/menue-builder-beta"},{"title":"Footer","href":"/NIU-Plus/footer"},{"title":"Kategorieseite","href":"/NIU-Plus/kategorieseite"},{"title":"Produktdetailseite","href":"/NIU-Plus/produktdetailseite"},{"title":"Feature Ribbons","href":"/NIU-Plus/feature-ribbons"},{"title":"Warenkorbseite","href":"/NIU-Plus/warenkorbseite"},{"title":"Checkout","href":"/NIU-Plus/niu-checkout"},{"title":"Sidebar","href":"/NIU-Plus/sidebar"},{"title":"Slider","href":"/NIU-Plus/slider"},{"title":"Blog","href":"/NIU-Plus/blog"},{"title":"Ajax Suche","href":"/NIU-Plus/ajax-suche"},{"title":"Globale Einstellungen","href":"/NIU-Plus/globale-einstellungen"},{"title":"SEO","href":"/NIU-Plus/seo"},{"title":"Consent \u0026 Tracking einrichten","href":"/NIU-Plus/consent"},{"title":"Google Tag Manager (GTM)","href":"/NIU-Plus/gtm"},{"title":"Tracking","href":"/NIU-Plus/tracking"},{"title":"Barrierefreiheit","href":"/NIU-Plus/barrierefreiheit"},{"title":"Spamschutz","href":"/NIU-Plus/spamschutz"},{"title":"KI \u0026 Crawler","href":"/NIU-Plus/ki-crawler"},{"title":"Kundengruppen","href":"/NIU-Plus/kundengruppen"},{"title":"Freischaltung","href":"/NIU-Plus/freischaltung"},{"title":"Styleshub","href":"/NIU-Plus/styleshub"},{"title":"Entwicklereinstellungen","href":"/NIU-Plus/entwicklereinstellungen"}]}]},{"product":"Resources \u0026 Health","icon":"heart-pulse","description":"JTL Shop 5 Plugin","pages":[{"title":"Resources \u0026 Health","href":"/Resources-and-Health/einfuehrung"}]},{"product":"OPC Conversion Booster","icon":"badge-percent","description":"JTL Shop 5 Plugin","pages":[{"title":"OPC Conversion Booster","href":"/OPC-Conversion-Booster/installation"}]},{"product":"OPC Plus","icon":"object-exclude","description":"JTL Shop 5 Plugin","pages":[{"title":"OPC Plus","href":"/OPC-Plus/einfuehrung"}]},{"product":"OPC Portlets vererben","icon":"arrow-down-square-triangle","description":"JTL Shop 5 Plugin","pages":[{"title":"OPC Portlets vererben","href":"/OPC-Portlets-vererben/einfuehrung"}]},{"product":"OPC Smarty Portlets","icon":"brackets-curly","description":"JTL Shop 5 Plugin","pages":[{"title":"OPC Smarty Portlets","href":"/OPC-Smarty-Portlets/einfuehrung"}]},{"product":"OPC Suite","icon":"object-union","description":"JTL Shop 5 Plugin","pages":[{"title":"OPC Suite","href":"/OPC-Suite/Einfuehrung"}]},{"product":"Reloadify","icon":"paper-plane","description":"JTL Shop 5 Plugin","pages":[{"title":"Reloadify","href":"/Reloadify/Einfuehrung"}]},{"product":"CLP Gefahrenhinweise","icon":"triangle-exclamation","description":"JTL Shop 5 Plugin","pages":[{"title":"CLP Gefahrenhinweise","href":"/CLP-Gefahrenhinweise/einfuehrung"}]},{"product":"Luigis Box","icon":"box-check","description":"JTL Shop 5 Plugin","pages":[{"title":"Luigis Box","href":"/Luigis-Box/einfuehrung"}]},{"product":"DZM Monitoring","icon":"chart-line","description":"JTL Shop 5 Plugin","pages":[{"title":"DZM Monitoring","href":"/DZM-Monitoring/installation"}]},{"product":"DZM E-Mail Plus","icon":"envelope","description":"JTL Shop 5 Plugin","pages":[{"title":"DZM E-Mail Plus","href":"/DZM-Email-Plus/einstellungen"}]},{"product":"Elfsight+","icon":"star","description":"JTL Shop 5 Plugin","pages":[{"title":"Elfsight+","href":"/Elfsight-Plus/einfuehrung"}]},{"product":"DZM PWA","icon":"mobile","description":"JTL Shop 5 Plugin","pages":[{"title":"DZM PWA","href":"/DZM-PWA/changelog"}]},{"product":"DZM Bonus Plus","icon":"coins","description":"JTL Shop 5 Plugin","pages":[{"title":"DZM Bonus Plus","href":"/DZM-Bonus-Plus/einfuehrung"}]},{"product":"DZM Agentic Plus","icon":"robot","description":"JTL Shop 5 Plugin","pages":[{"title":"DZM Agentic Plus","href":"/DZM-Agentic-Plus/einfuehrung"}]},{"product":"Panderra AI","icon":"magnifying-glass","description":"JTL Shop 5 Plugin","pages":[{"title":"Panderra AI","href":"/Panderra-AI/einfuehrung"}]}]},"title":"Custom CSS Editor - DZM Dokumentation","buildId":"dpl_2oYXwqkEXirXBPk8wV1FtM5USFWi","deploymentId":"dpl_2oYXwqkEXirXBPk8wV1FtM5USFWi","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-BbYRHtLl.js","DynamicMarkdown-DN96a4Ur.js","zoom-image-lightbox-D7yRe3On.js","lightbox-handle-r17bVUz3.js"]}
