{"id":49956,"date":"2024-07-24T11:46:30","date_gmt":"2024-07-24T09:46:30","guid":{"rendered":"https:\/\/community.simplifier.io\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/"},"modified":"2025-12-11T15:40:22","modified_gmt":"2025-12-11T13:40:22","slug":"css-editor","status":"publish","type":"manual_documentation","link":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/","title":{"rendered":"CSS-Editor"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row row_content_display=&#8221;in_grid&#8221; row_content_display_align=&#8221;left&#8221; row_type=&#8221;row&#8221; stretch_row_type=&#8221;yes&#8221;][vc_column][vc_column_text]<\/p>\n<h1>Voraussetzungen<\/h1>\n<p>Eine <strong>Simplifier-Anwendung<\/strong>, die du gestalten m\u00f6chtest[\/vc_column_text][vc_message]UI5 und CSS: Bitte beachten Sie, CSS-Direktiven haupts\u00e4chlich f\u00fcr Designzwecke und nicht f\u00fcr grundlegendes Layout zu verwenden, um die Reaktionsf\u00e4higkeit von UI5 zu erhalten. F\u00fcr Designzwecke empfehlen wir die Verwendung der Theming-Funktionalit\u00e4t von UI5[\/vc_message][vc_message]Das allgemeine Erscheinungsbild der App sollte mit dem <a href=\"https:\/\/community.simplifier.io\/knowledge\/using-sap-ui-theme-designer\/\">SAP UI Theme Designer<\/a> realisiert werden.[\/vc_message][vc_column_text]<\/p>\n<h1>Schritt 1 \u2013 Simplifier CSS-Editor \u00f6ffnen<\/h1>\n<p>W\u00e4hlen Sie im <g id=\"gid_0\">Application Editor<\/g> <g id=\"gid_1\">CSS-Editor<\/g> aus, indem Sie auf <em>Sonstige<\/em> klicken (<a target=\"_blank\" href=\"https:\/\/community.simplifier.io\/doc\/current-release\/applications\/create-apps-from-scratch\/create-the-userinterface\/css-editor\/\" rel=\"noopener\">Simplifier-Dokumentation<\/a>):[\/vc_column_text][vc_single_image image=&#8221;28394&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; style=&#8221;vc_box_shadow&#8221; onclick=&#8221;link_image&#8221;][vc_column_text]<\/p>\n<h1>Schritt 2 \u2013 Widgets \u00fcber die Style-Class-Eigenschaft gestalten<\/h1>\n<p>Sie k\u00f6nnen einem Widget \u00fcber die <strong>Widget-Eigenschaft<\/strong> <em>cssClasses<\/em> CSS-<em>Style-Klassen<\/em> zuweisen.<\/p>\n<ul>\n<li>Definieren Sie eine CSS-Style-Klasse im <strong>CSS-Editor<\/strong> (<a href=\"https:\/\/www.w3schools.com\/css\/css3_buttons.asp\">Button Styles &#8211; W3Schools<\/a>):<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_single_image image=&#8221;28389&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; style=&#8221;vc_box_shadow&#8221; onclick=&#8221;link_image&#8221;][vc_message]Um die Standardstile zu \u00fcberschreiben, f\u00fcgen Sie <em>!important<\/em> zu den Style-Anweisungen hinzu.[\/vc_message][vc_column_text]<\/p>\n<ul>\n<li>Geben Sie den Namen der CSS-Style-Klasse in das Eigenschaftsfeld <strong>cssClasses<\/strong> des Widgets im <strong>UI Designer<\/strong> ein (rechte Seitenleiste):<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_single_image image=&#8221;28393&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; style=&#8221;vc_box_shadow&#8221; onclick=&#8221;link_image&#8221;][vc_message]Bitte verwenden Sie ein Leerzeichen, um mehrere Klassen im Eigenschaftsfeld <em>cssClasses<\/em> zu trennen.[\/vc_message][vc_column_text]<\/p>\n<h1>Schritt 3 \u2013 Widgets nach ID gestalten<\/h1>\n<p>Sie k\u00f6nnen Widgets direkt <em>CSS-Style-Klassen<\/em> zuweisen, indem Sie die <strong>Widget-ID<\/strong> verwenden.<\/p>\n<ul>\n<li>Definieren Sie eine CSS-Style-Klasse im CSS-Editor, indem Sie die Widget-ID als <strong>Klassennamen<\/strong> verwenden:<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_single_image image=&#8221;28390&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; style=&#8221;vc_box_shadow&#8221; onclick=&#8221;link_image&#8221;][vc_message]Die Syntax f\u00fcr den Zugriff auf Widgets nach ID mit CSS lautet: #&lt;screenId&gt;\u2013&lt;widgetId&gt;[\/vc_message][vc_column_text]<\/p>\n<h1>Schritt 4 \u2013 Widgets mit HTML-Elementklassen gestalten<\/h1>\n<p>Sie k\u00f6nnen Widgets <g id=\"gid_0\">CSS-Style-Klassen<\/g> mithilfe von <strong>HTML-Elementklassen<\/strong> zuweisen:  <\/p>\n<ul>\n<li>\u00dcberpr\u00fcfen Sie die HTML-Elementklasse \u00fcber die <strong>Browserkonsole<\/strong> (Browserkonsole \u00f6ffnen, Rechtsklick auf das Widget und <em>Untersuchen<\/em> ausw\u00e4hlen):<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_single_image image=&#8221;51867&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; style=&#8221;vc_box_shadow&#8221; onclick=&#8221;link_image&#8221;][vc_single_image image=&#8221;51866&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; style=&#8221;vc_box_shadow&#8221; onclick=&#8221;link_image&#8221;][vc_single_image image=&#8221;51869&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; style=&#8221;vc_box_shadow&#8221; onclick=&#8221;link_image&#8221;][vc_column_text]<\/p>\n<ul>\n<li>Definieren Sie eine CSS-Style-Klasse im <strong>CSS-Editor<\/strong>, indem Sie die HTML-Elementklassen des Widgets als <strong>Klassennamen<\/strong> verwenden:<\/li>\n<\/ul>\n<p>[\/vc_column_text][vc_single_image image=&#8221;28391&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; style=&#8221;vc_box_shadow&#8221; onclick=&#8221;link_image&#8221;][vc_single_image image=&#8221;28392&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; style=&#8221;vc_box_shadow&#8221; onclick=&#8221;link_image&#8221;][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Das App-Styling mit UI5 und CSS sollte sich st\u00e4rker auf das Design als auf grundlegende Layouts konzentrieren, um die Reaktionsf\u00e4higkeit von UI5 zu gew\u00e4hrleisten. Die gesamte \u00c4sthetik sollte \u00fcber den SAP UI Theme Designer erstellt werden. \u00d6ffnen Sie den Simplifier CSS-Editor im Application Editor, indem Sie Sonstige (Simplifier-Dokumentation) ausw\u00e4hlen. Widgets k\u00f6nnen gestaltet werden, indem ihnen \u00fcber die Widget-Eigenschaft cssClasses CSS-Style-Klassen zugewiesen werden. Sie definieren eine CSS-Style-Klasse im CSS-Editor und f\u00fcgen !important hinzu, um Standardstile zu \u00fcberschreiben. Der Klassenname wird in das Eigenschaftsfeld eingetragen<\/p>\n","protected":false},"author":3651,"featured_media":0,"parent":49900,"menu_order":109,"template":"","format":"standard","class_list":["post-49956","manual_documentation","type-manual_documentation","status-publish","format-standard","hentry","manualdocumentationcategory-aktueller-release"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS-Editor - Simplifier Makers Club<\/title>\n<meta name=\"description\" content=\"Das App-Styling mit UI5 und CSS sollte sich st\u00e4rker auf das Design als auf grundlegende Layouts konzentrieren, um die Reaktionsf\u00e4higkeit von UI5 zu gew\u00e4hrleisten. Die gesamte \u00c4sthetik sollte \u00fcber den SAP UI Theme Designer erstellt werden. \u00d6ffnen Sie den Simplifier CSS-Editor im Application Editor, indem Sie Sonstige (Simplifier-Dokumentation) ausw\u00e4hlen. Widgets k\u00f6nnen gestaltet werden, indem ihnen \u00fcber die Widget-Eigenschaft cssClasses CSS-Style-Klassen zugewiesen werden. Sie definieren eine CSS-Style-Klasse im CSS-Editor und f\u00fcgen !important hinzu, um Standardstile zu \u00fcberschreiben. Der Klassenname wird in das Eigenschaftsfeld eingetragen\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS-Editor - Simplifier Makers Club\" \/>\n<meta property=\"og:description\" content=\"Das App-Styling mit UI5 und CSS sollte sich st\u00e4rker auf das Design als auf grundlegende Layouts konzentrieren, um die Reaktionsf\u00e4higkeit von UI5 zu gew\u00e4hrleisten. Die gesamte \u00c4sthetik sollte \u00fcber den SAP UI Theme Designer erstellt werden. \u00d6ffnen Sie den Simplifier CSS-Editor im Application Editor, indem Sie Sonstige (Simplifier-Dokumentation) ausw\u00e4hlen. Widgets k\u00f6nnen gestaltet werden, indem ihnen \u00fcber die Widget-Eigenschaft cssClasses CSS-Style-Klassen zugewiesen werden. Sie definieren eine CSS-Style-Klasse im CSS-Editor und f\u00fcgen !important hinzu, um Standardstile zu \u00fcberschreiben. Der Klassenname wird in das Eigenschaftsfeld eingetragen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Simplifier Makers Club\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/simplifier.io\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-11T13:40:22+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@simplifier_io\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/erstellen-sie-apps-von-grund-auf-neu\\\/erstellen-der-benutzeroberflaeche\\\/css-editor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/erstellen-sie-apps-von-grund-auf-neu\\\/erstellen-der-benutzeroberflaeche\\\/css-editor\\\/\"},\"author\":{\"name\":\"Andreas Dallner\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#\\\/schema\\\/person\\\/814075d0504de8a4e87666436dc7e636\"},\"headline\":\"CSS-Editor\",\"datePublished\":\"2024-07-24T09:46:30+00:00\",\"dateModified\":\"2025-12-11T13:40:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/erstellen-sie-apps-von-grund-auf-neu\\\/erstellen-der-benutzeroberflaeche\\\/css-editor\\\/\"},\"wordCount\":480,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#organization\"},\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/erstellen-sie-apps-von-grund-auf-neu\\\/erstellen-der-benutzeroberflaeche\\\/css-editor\\\/\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/erstellen-sie-apps-von-grund-auf-neu\\\/erstellen-der-benutzeroberflaeche\\\/css-editor\\\/\",\"name\":\"CSS-Editor - Simplifier Makers Club\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#website\"},\"datePublished\":\"2024-07-24T09:46:30+00:00\",\"dateModified\":\"2025-12-11T13:40:22+00:00\",\"description\":\"Das App-Styling mit UI5 und CSS sollte sich st\u00e4rker auf das Design als auf grundlegende Layouts konzentrieren, um die Reaktionsf\u00e4higkeit von UI5 zu gew\u00e4hrleisten. Die gesamte \u00c4sthetik sollte \u00fcber den SAP UI Theme Designer erstellt werden. \u00d6ffnen Sie den Simplifier CSS-Editor im Application Editor, indem Sie Sonstige (Simplifier-Dokumentation) ausw\u00e4hlen. Widgets k\u00f6nnen gestaltet werden, indem ihnen \u00fcber die Widget-Eigenschaft cssClasses CSS-Style-Klassen zugewiesen werden. Sie definieren eine CSS-Style-Klasse im CSS-Editor und f\u00fcgen !important hinzu, um Standardstile zu \u00fcberschreiben. Der Klassenname wird in das Eigenschaftsfeld eingetragen\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/erstellen-sie-apps-von-grund-auf-neu\\\/erstellen-der-benutzeroberflaeche\\\/css-editor\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/erstellen-sie-apps-von-grund-auf-neu\\\/erstellen-der-benutzeroberflaeche\\\/css-editor\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/erstellen-sie-apps-von-grund-auf-neu\\\/erstellen-der-benutzeroberflaeche\\\/css-editor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"App Builder Anleitung\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/app-builder-leitfaden\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Erstellen\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/app-builder-leitfaden\\\/bauen\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Apps von Grund auf neu erstellen\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/app-builder-leitfaden\\\/bauen\\\/erstellen-sie-apps-von-grund-auf-neu\\\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Benutzeroberfl\u00e4che erstellen\",\"item\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/doc\\\/erstellen-sie-apps-von-grund-auf-neu\\\/erstellen-der-benutzeroberflaeche\\\/\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"CSS-Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/\",\"name\":\"Simplifier Makers Club\",\"description\":\"Where Ideas become Digital Reality - Simplifier Documentation, Knowledgebase, Forum, Courses and Marketplace\",\"publisher\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#organization\",\"name\":\"Simplifier AG\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/simplifier-logo.png\",\"contentUrl\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/simplifier-logo.png\",\"width\":651,\"height\":150,\"caption\":\"Simplifier AG\"},\"image\":{\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/simplifier.io\\\/\",\"https:\\\/\\\/x.com\\\/simplifier_io\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/simplifier-ag\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/Simplifier\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/de\\\/#\\\/schema\\\/person\\\/814075d0504de8a4e87666436dc7e636\",\"name\":\"Andreas Dallner\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/avatars\\\/3651\\\/1745953947-bpfull.jpg\",\"url\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/avatars\\\/3651\\\/1745953947-bpfull.jpg\",\"contentUrl\":\"https:\\\/\\\/community.simplifier.io\\\/wp-content\\\/uploads\\\/avatars\\\/3651\\\/1745953947-bpfull.jpg\",\"caption\":\"Andreas Dallner\"},\"description\":\"Hello, I\u2019m Andreas, Head of Product Management at Simplifier. My mission is to ensure that our product evolves in alignment with your needs. I translate your needs into innovative product features by closely listening to your feedback and understanding your requirements. My goal is to help you fully leverage the power of low-code technology, providing the right support and methodologies to drive significant value for your business\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS-Editor - Simplifier Makers Club","description":"Das App-Styling mit UI5 und CSS sollte sich st\u00e4rker auf das Design als auf grundlegende Layouts konzentrieren, um die Reaktionsf\u00e4higkeit von UI5 zu gew\u00e4hrleisten. Die gesamte \u00c4sthetik sollte \u00fcber den SAP UI Theme Designer erstellt werden. \u00d6ffnen Sie den Simplifier CSS-Editor im Application Editor, indem Sie Sonstige (Simplifier-Dokumentation) ausw\u00e4hlen. Widgets k\u00f6nnen gestaltet werden, indem ihnen \u00fcber die Widget-Eigenschaft cssClasses CSS-Style-Klassen zugewiesen werden. Sie definieren eine CSS-Style-Klasse im CSS-Editor und f\u00fcgen !important hinzu, um Standardstile zu \u00fcberschreiben. Der Klassenname wird in das Eigenschaftsfeld eingetragen","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/","og_locale":"de_DE","og_type":"article","og_title":"CSS-Editor - Simplifier Makers Club","og_description":"Das App-Styling mit UI5 und CSS sollte sich st\u00e4rker auf das Design als auf grundlegende Layouts konzentrieren, um die Reaktionsf\u00e4higkeit von UI5 zu gew\u00e4hrleisten. Die gesamte \u00c4sthetik sollte \u00fcber den SAP UI Theme Designer erstellt werden. \u00d6ffnen Sie den Simplifier CSS-Editor im Application Editor, indem Sie Sonstige (Simplifier-Dokumentation) ausw\u00e4hlen. Widgets k\u00f6nnen gestaltet werden, indem ihnen \u00fcber die Widget-Eigenschaft cssClasses CSS-Style-Klassen zugewiesen werden. Sie definieren eine CSS-Style-Klasse im CSS-Editor und f\u00fcgen !important hinzu, um Standardstile zu \u00fcberschreiben. Der Klassenname wird in das Eigenschaftsfeld eingetragen","og_url":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/","og_site_name":"Simplifier Makers Club","article_publisher":"https:\/\/www.facebook.com\/simplifier.io\/","article_modified_time":"2025-12-11T13:40:22+00:00","twitter_card":"summary_large_image","twitter_site":"@simplifier_io","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/#article","isPartOf":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/"},"author":{"name":"Andreas Dallner","@id":"https:\/\/community.simplifier.io\/de\/#\/schema\/person\/814075d0504de8a4e87666436dc7e636"},"headline":"CSS-Editor","datePublished":"2024-07-24T09:46:30+00:00","dateModified":"2025-12-11T13:40:22+00:00","mainEntityOfPage":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/"},"wordCount":480,"commentCount":0,"publisher":{"@id":"https:\/\/community.simplifier.io\/de\/#organization"},"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/","url":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/","name":"CSS-Editor - Simplifier Makers Club","isPartOf":{"@id":"https:\/\/community.simplifier.io\/de\/#website"},"datePublished":"2024-07-24T09:46:30+00:00","dateModified":"2025-12-11T13:40:22+00:00","description":"Das App-Styling mit UI5 und CSS sollte sich st\u00e4rker auf das Design als auf grundlegende Layouts konzentrieren, um die Reaktionsf\u00e4higkeit von UI5 zu gew\u00e4hrleisten. Die gesamte \u00c4sthetik sollte \u00fcber den SAP UI Theme Designer erstellt werden. \u00d6ffnen Sie den Simplifier CSS-Editor im Application Editor, indem Sie Sonstige (Simplifier-Dokumentation) ausw\u00e4hlen. Widgets k\u00f6nnen gestaltet werden, indem ihnen \u00fcber die Widget-Eigenschaft cssClasses CSS-Style-Klassen zugewiesen werden. Sie definieren eine CSS-Style-Klasse im CSS-Editor und f\u00fcgen !important hinzu, um Standardstile zu \u00fcberschreiben. Der Klassenname wird in das Eigenschaftsfeld eingetragen","breadcrumb":{"@id":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/css-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/community.simplifier.io\/de\/"},{"@type":"ListItem","position":2,"name":"App Builder Anleitung","item":"https:\/\/community.simplifier.io\/de\/doc\/app-builder-leitfaden\/"},{"@type":"ListItem","position":3,"name":"Erstellen","item":"https:\/\/community.simplifier.io\/de\/doc\/app-builder-leitfaden\/bauen\/"},{"@type":"ListItem","position":4,"name":"Apps von Grund auf neu erstellen","item":"https:\/\/community.simplifier.io\/de\/doc\/app-builder-leitfaden\/bauen\/erstellen-sie-apps-von-grund-auf-neu\/"},{"@type":"ListItem","position":5,"name":"Benutzeroberfl\u00e4che erstellen","item":"https:\/\/community.simplifier.io\/de\/doc\/erstellen-sie-apps-von-grund-auf-neu\/erstellen-der-benutzeroberflaeche\/"},{"@type":"ListItem","position":6,"name":"CSS-Editor"}]},{"@type":"WebSite","@id":"https:\/\/community.simplifier.io\/de\/#website","url":"https:\/\/community.simplifier.io\/de\/","name":"Simplifier Makers Club","description":"Where Ideas become Digital Reality - Simplifier Documentation, Knowledgebase, Forum, Courses and Marketplace","publisher":{"@id":"https:\/\/community.simplifier.io\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/community.simplifier.io\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/community.simplifier.io\/de\/#organization","name":"Simplifier AG","url":"https:\/\/community.simplifier.io\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/community.simplifier.io\/de\/#\/schema\/logo\/image\/","url":"https:\/\/community.simplifier.io\/wp-content\/uploads\/2024\/09\/simplifier-logo.png","contentUrl":"https:\/\/community.simplifier.io\/wp-content\/uploads\/2024\/09\/simplifier-logo.png","width":651,"height":150,"caption":"Simplifier AG"},"image":{"@id":"https:\/\/community.simplifier.io\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/simplifier.io\/","https:\/\/x.com\/simplifier_io","https:\/\/www.linkedin.com\/company\/simplifier-ag\/","https:\/\/www.youtube.com\/c\/Simplifier\/"]},{"@type":"Person","@id":"https:\/\/community.simplifier.io\/de\/#\/schema\/person\/814075d0504de8a4e87666436dc7e636","name":"Andreas Dallner","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/community.simplifier.io\/wp-content\/uploads\/avatars\/3651\/1745953947-bpfull.jpg","url":"https:\/\/community.simplifier.io\/wp-content\/uploads\/avatars\/3651\/1745953947-bpfull.jpg","contentUrl":"https:\/\/community.simplifier.io\/wp-content\/uploads\/avatars\/3651\/1745953947-bpfull.jpg","caption":"Andreas Dallner"},"description":"Hello, I\u2019m Andreas, Head of Product Management at Simplifier. My mission is to ensure that our product evolves in alignment with your needs. I translate your needs into innovative product features by closely listening to your feedback and understanding your requirements. My goal is to help you fully leverage the power of low-code technology, providing the right support and methodologies to drive significant value for your business"}]}},"_links":{"self":[{"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/49956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/types\/manual_documentation"}],"author":[{"embeddable":true,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/users\/3651"}],"version-history":[{"count":5,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/49956\/revisions"}],"predecessor-version":[{"id":74230,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/49956\/revisions\/74230"}],"up":[{"embeddable":true,"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/docs\/49900"}],"wp:attachment":[{"href":"https:\/\/community.simplifier.io\/de\/wp-json\/wp\/v2\/media?parent=49956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}