Mit CSS-Überschreibungsdateien arbeiten

Schein

Die Retail-Interessengruppe von Dynamics 365 Commerce wurde von Yammer zu Viva Engage verschoben. Wenn Sie keinen Zugriff auf die neue Viva Engage-Community haben, füllen Sie dieses Formular (https://aka.ms/JoinD365commerceVivaEngageCommunity) aus, um hinzugefügt zu werden und sich weiterhin in die neuesten Diskussionen einbringen zu können.

In diesem Artikel wird beschrieben, wie Cascading Style Sheets-Überschreibungsdateien (CSS-Überschreibungsdateien) in Microsoft Dynamics 365 Commerce verwendet werden.

Permanente Site-Stile sollten normalerweise über das Thema einer Site verwaltet werden. Designs bilden die grundlegenden CSS- und Stileinstellungen für die Module auf einer beliebigen Seite Ihrer Website. Sie erstellen Designs mithilfe des Dynamics 365 Commerce Online Software Development Kit (SDK) und stellen sie über Microsoft Dynamics Lifecycle Services (LCS) auf Ihren Websites bereit. Design-Debugging-Funktionen und Modulschnittstellenkonfigurationen im SDK helfen Site-Entwicklern, anpassbare und zusammenhängende Site-Design-Pakete zu erstellen. Wenn Sie diese Designpakete auf einer Website bereitstellen, können Websiteautoren sich auf das Erstellen, Bearbeiten und Veröffentlichen von Inhalten anstelle der Websiteentwicklung konzentrieren.

Angesichts des üblichen Lebenszyklus eines Themas kann die Abhängigkeit von Entwicklern, Stiländerungen über die SDK- und LCS-Bereitstellungspipeline vorzunehmen, in einigen Szenarien untragbar sein. Site-Prototypen oder Hotfixes können mühsam erscheinen, wenn das SDK nicht konfiguriert ist oder Sie keine Zeit haben, auf eine LCS-Bereitstellung zu warten.

In diesen Szenarien können CSS-Überschreibungsdateien hilfreich sein. In den Commerce-Dokumenterstellungs-Tools können authentifizierte Benutzer eine CSS-Datei hochladen, sie in einer Vorschau anzeigen, und anschließend aktivieren, um das Design einer Website zu überschreiben. Sie benötigen keinen Aufwand für die SDK- oder LCS-Bereitstellung. Die Überschreibungen, die Sie in einer CSS-Überschreibungsdatei angeben, können so klein wie eine Änderung an einem einzelnen Textstil oder so umfangreich wie eine vollständige Markenüberholung sein.

Bevor Sie CSS-Überschreibungsdateien verwenden, beachten Sie beim Überschreiben von Dateien die folgenden Einschränkungen:

• Nur eine CSS-Überschreibungsdatei kann gleichzeitig auf einer Website aktiv sein. Daher müssen alle aktiven Außerkraftsetzungen in einer einzigen Außerkraftsetzungsdatei vorhanden sein.
• Obwohl Sie eine Vorschau der Überschreibungen in den Commerce-Authoring-Tools anzeigen können, gibt es keine dedizierten Debugging-Funktionen, mit denen Sie die durch die Überschreibungen verursachten Fehler identifizieren können. Mit anderen Worten, verfügen Sie bei Verwendung von CSS-Überschreibungsdateien nicht über dasselbe Toolset, das das SDK für die Modul- und Dokumenterstellungsprüfung bietet.

Dennoch bieten CSS-Überschreibungsdateien eine schnelle Möglichkeit, ein Design zu prototypisieren oder einen Hotfix zu implementieren, bevor ein vollständiges Design-Update entwickelt und bereitgestellt wird.

Eine CSS-Überschreibungsdatei erstellen

Verwenden Sie zum Erstellen einer CSS-Außerkraftsetzungsdatei eine beliebige integrierte Entwicklungsumgebung (Integrated Development Environment, IDE), Text-Editor oder Quellcode-Editor. Ein typischer Ansatz besteht darin, Standard-Web-Debugger in Ihrem Browser zu verwenden, um Stilselektoren, Eigenschaften und Werte auf Ihrer vorhandenen Site zu identifizieren. In den meisten Browsern können Sie Werte ändern und im Debugger eine Vorschau anzeigen. Nachdem Sie die änderungen identifiziert haben, die Sie vornehmen möchten, speichern Sie sie in Ihrer eigenen CSS-Datei.

Eine CSS-Überschreibungsdatei hochladen

Führen Sie die folgenden Schritte aus, um eine CSS-Datei auf Ihre Website in Commerce hochzuladen:

1. Gehen Sie in den Erstellungstools zu Ihrer Site.

2. Wählen Sie im linken Navigationsbereich Design aus.

   Schein

   Je nach Version der von Ihnen verwendeten Tools für die Erstellung von Commerce müssen Sie möglicherweise einstellungen im Navigationsbereich erweitern, bevor Sie " Entwurf" auswählen können.

3. Wählen Sie oben im Hauptdesignfenster die Registerkarte CSS-Überschreibung aus, falls noch nicht geschehen.

4. Wählen Sie unter Verfügbare CSS-Überschreibungen die Option CSS-Datei hochladen aus. Ein Dateiexplorerfenster wird angezeigt.

5. Suchen Sie im Datei-Explorer eine CSS-Datei und wählen Sie sie aus. Gehen Sie dann auf Öffnen. Die hochgeladene CSS-Datei erscheint jetzt unter Verfügbare CSS-Überschreibungen.

Vorschau einer CSS-Überschreibungsdatei

Führen Sie die folgenden Schritte aus, um eine Vorschau einer CSS-Außerkraftsetzungsdatei anzuzeigen, bevor Sie sie auf Ihrer Livewebsite aktivieren:

1. Wählen Sie im linken Navigationsbereich Design aus. Suchen Sie auf der Registerkarte "CSS-Außerkraftsetzung" unter "Verfügbare CSS-Außerkraftsetzungen" die CSS-Datei, die Sie in der Vorschau anzeigen möchten.
2. Wählen Sie neben dem CSS-Dateinamen die Option Site in der Vorschau anzeigen aus.
3. Wählen Sie im Dialogfeld URL auswählen die URL der Site, auf die die Überschreibung angewendet werden soll, und dann OK aus.
4. Wenn es verschiedene Varianten für die ausgewählte URL gibt, wählen Sie die gewünschte Variante im Dialogfeld Vorschau der Variationen aus, das angezeigt wird.

Ein neuer Browser-Tab oder ein neues Browser-Fenster öffnet sich, in dem Sie Ihre Stilüberschreibungen für Ihre Website überprüfen können. Anschließend können Sie die URL für andere authentifizierte Commerce-Benutzer zur Überprüfung und für Feedback freigeben.

Eine CSS-Überschreibungsdatei auf Ihrer Live-Website aktivieren

Nachdem Sie eine Vorschau angezeigt und die CSS-Außerkraftsetzungsdatei genehmigt haben, aktivieren Sie sie auf Ihrer Livewebsite.

Schein

Sie können jeweils nur eine aktive CSS-Außerkraftsetzungsdatei auf Ihrer Website haben. Wenn Sie eine neue Außerkraftsetzungsdatei aktivieren, deaktivieren Sie die vorherige Außerkraftsetzungsdatei. Stellen Sie sicher, dass alle erforderlichen Überschreibungen in einer einzelnen CSS-Überschreibungsdatei vorhanden sind.

Führen Sie die folgenden Schritte aus, um eine CSS-Außerkraftsetzungsdatei zu aktivieren:

1. Wählen Sie im linken Navigationsbereich Design aus. Suchen Sie auf der Registerkarte "CSS-Außerkraftsetzung" unter "Verfügbare CSS-Außerkraftsetzungen" die CSS-Datei, die Sie aktivieren möchten.
2. Wählen Sie unter dem CSS-Dateinamen die Option Aktivieren aus. Die Überschreibungsdatei wird sofort auf Ihrer Live-Site aktiv.

Eine CSS-Überschreibungsdatei auf Ihrer Live-Website deaktivieren

Führen Sie die folgenden Schritte aus, um eine CSS-Außerkraftsetzungsdatei auf Ihrer Website zu deaktivieren:

1. Wählen Sie im linken Navigationsbereich Design aus. Suchen Sie auf der Registerkarte "CSS-Außerkraftsetzung" unter "Verfügbare CSS-Außerkraftsetzungen" die CSS-Datei, die Sie deaktivieren möchten.
2. Wählen Sie unter dem CSS-Dateinamen die Option Deaktivieren aus. Die Überschreibungsdatei wird sofort auf Ihrer Live-Site inaktiv.

Tipp

Wählen Sie zum Zugriff auf weitere Optionen für CSS-Überschreibungsdateien die Auslassungspunkte (...) neben dem CSS-Dateinamen aus. Die Optionen Herunterladen, Umbenennen und Ersetzen sind nützlich für schnelle Änderungen an vorhandenen CSS-Überschreibungsdateien.

Zusätzliche Ressourcen

Hinzufügen eines Logos

Sitedesign auswählen

Arbeiten Sie mit Stilvoreinstellungen

Hinzufügen eines Favicons

Hinzufügen eines Urheberrechtshinweises

Hinzufügen von Sprachen zu Ihrer Website

Hinzufügen von Skriptcode zu Standortseiten zur Unterstützung von Telemetrie