Visuelle Anpassung

Verwenden Sie die Optionen in diesem Abschnitt, um das Erscheinungsbild Ihrer B2CORE-Benutzeroberfläche an den einzigartigen Stil Ihrer Marke anzupassen.

Ressourcen

Auf dieser Seite können Sie die in Ihrer B2CORE-Benutzeroberfläche angezeigten Logos sowie bei Bedarf Hintergrundbilder für die Seiten Registrieren und Anmelden hochladen oder ändern.

Logo für helles Theme

Das Hauptlogo, das in der B2CORE-Benutzeroberfläche angezeigt wird, wenn das helle Theme aktiviert ist.

Erforderliches Format: SVG mit transparentem Hintergrund, Dateigröße bis zu 10 MB.

Kurzes Logo für helles Theme

Eine kompakte Version des Logos, die angezeigt wird, wenn das Hauptmenü im hellen Theme eingeklappt ist.

Erforderliches Format: SVG mit transparentem Hintergrund, Dateigröße bis zu 10 MB.

Logo für dunkles Theme

Das Hauptlogo, das in der B2CORE-Benutzeroberfläche angezeigt wird, wenn das dunkle Theme aktiviert ist.

Erforderliches Format: SVG mit transparentem Hintergrund, Dateigröße bis zu 10 MB.

Kurzes Logo für dunkles Theme

Eine kompakte Version des Logos, die angezeigt wird, wenn das Hauptmenü im dunklen Theme eingeklappt ist.

Erforderliches Format: SVG mit transparentem Hintergrund, Dateigröße bis zu 10 MB.

Favicon (.ico)

Das kleine Symbol, das im Browser-Tab angezeigt wird.

Erforderliches Format: ICO, Dateigröße bis zu 10 MB.

Favicon (.svg)

Die Vektorversion des Favicons für Browser, die SVG unterstützen.

Erforderliches Format: SVG, Dateigröße bis zu 10 MB. Wird als skalierbares Symbol verwendet.

Apple-Touch-Icon

Das Symbol, das auf Apple-Geräten angezeigt wird, wenn die B2CORE-Benutzeroberflächenseite zum Home-Bildschirm hinzugefügt wird.

Erforderliches Format: PNG, 180×180 Pixel, Dateigröße bis zu 10 MB.

Hintergrund für helles Theme

Das Hintergrundbild, das auf den Seiten Registrieren und Anmelden angewendet wird, wenn das helle Theme aktiviert ist. Das Hinzufügen eines Hintergrundbilds ist optional.

Empfohlenes Format: SVG, JPG oder PNG, Dateigröße bis zu 10 MB.

Hintergrund für dunkles Theme

Das Hintergrundbild, das auf den Seiten Registrieren und Anmelden angewendet wird, wenn das dunkle Theme aktiviert ist. Das Hinzufügen eines Hintergrundbilds ist optional.

Empfohlenes Format: SVG, JPG oder PNG, Dateigröße bis zu 10 MB.

Bilder für das Admin Panel

In diesem Abschnitt können Sie die im Back Office angezeigten Bilder hochladen (empfohlenes Format: JPG, PNG oder SVG, Dateigröße bis zu 10 MB):

• Menü-Logo — das im Back-Office-Hauptmenü angezeigte Logo
• Logo der Anmeldeseite — das auf der Back-Office-Anmeldeseite angezeigte Logo
• Hintergrund der Anmeldeseite — das auf die Back-Office-Anmeldeseite angewendete Hintergrundbild

Farbschema

Auf dieser Seite können Sie die Farbeinstellungen für die hellen und dunklen Themes Ihrer B2CORE-Benutzeroberfläche anpassen.

Im Abschnitt Markenkonfiguration können Sie Ihre Markenidentität schnell einrichten, indem Sie die Markenfarbe angeben und die Option Getönte Hintergründe aktivieren, die einen dezenten Farbton der Markenfarbe auf die Hintergründe der Benutzeroberfläche anwendet.

Die unten beschriebenen Farbeinstellungen für einzelne Oberflächenelemente sind im Abschnitt Erweiterte Farbeinstellungen verfügbar.

Helles Theme aktiviert

Aktivieren Sie das Kontrollkästchen, um das helle Theme für die B2CORE-Benutzeroberfläche zu aktivieren.

Aktivieren Sie die Option Standard, um das helle Theme als Standard festzulegen, wenn beide Themes aktiviert sind.

Dunkles Theme aktiviert

Aktivieren Sie das Kontrollkästchen, um das dunkle Theme für die B2CORE-Benutzeroberfläche zu aktivieren.

Aktivieren Sie die Option Standard, um das dunkle Theme als Standard festzulegen, wenn beide Themes aktiviert sind.

Die erweiterten Farbeinstellungen sind in die Abschnitte Semantische Tokens V1 (Hell / Dunkel) und Semantische Tokens V2 (Hell / Dunkel) gegliedert, sodass Sie jedes Farb-Token für die hellen und dunklen Themes separat anpassen können. Um die Farb-Tokens auf die aus Ihrer Markenfarbe abgeleiteten Werte zurückzusetzen, klicken Sie auf die Schaltfläche Farben aus Marke zurücksetzen.

Der Abschnitt Semantische Tokens V1 (Hell / Dunkel) enthält die folgenden Token-Gruppen:

• Akzent — accent, accentHover, accent40, accent10, demo
• Status — positive, positive20, medium, medium20, negative, negative20
• Oberfläche — background, background96, card, field, disabled, overlay, tooltip, divider
• Text — textMain, textSecondary, textSecondary40, textContrast

Der Abschnitt Semantische Tokens V2 (Hell / Dunkel) enthält die folgenden Token-Gruppen:

• Akzent — brand, brandSubtle, brandMuted, alternative, alternativeSubtle, alternativeMuted, positive, positiveSubtle, positiveMuted, medium, mediumSubtle, mediumMuted, negative, negativeSubtle, negativeMuted, neutral, overlay, overlaySubtle, overlayMuted
• Zeichen — onSurface, onSurfaceSecondary, onSurfaceInverse, onBrand, onAlternative, onPositive, onMedium, onNegative, onNeutral, onOverlay, onSurfaceBrand, onSurfaceAlternative, onSurfacePositive, onSurfaceMedium, onSurfaceNegative, onSurfaceOverlay
• Oberfläche — surfaceLow, surface, surfaceHigh, surfaceHighest, surfaceInverse, backdrop
• Umriss — outline, outlineStrong
• Status — stateHovered, statePressed, stateHoveredInverse, statePressedInverse, stateDarken, stateDarkenStrong

Zusätzliche Variablen für helles/dunkles Theme (json)

Verwenden Sie dieses Feld, um ein JSON-Objekt mit zusätzlichen Variablen anzugeben, beispielsweise solche, die festlegen, wie sich ein Hintergrundbild im jeweiligen Theme verhält:

{
"optional-external-bg-position": "0 0",
"optional-external-bg-size": "cover",
"optional-external-bg-repeat": "no-repeat",
"optional-external-bg-attachment": "fixed"
}

"optional-external-bg-position": "0 0"

Positioniert das Hintergrundbild in der oberen linken Ecke.

"optional-external-bg-size": "cover"

Skaliert das Hintergrundbild so, dass es die gesamte Seite abdeckt.

"optional-external-bg-repeat": "no-repeat"

Verhindert, dass sich das Hintergrundbild in irgendeine Richtung wiederholt (gekachelt wird).

"optional-external-bg-attachment": "fixed"

Hält das Hintergrundbild beim Scrollen der Seite an einer festen Position. Es bewegt sich nicht mit dem Inhalt.

Felder

Auf dieser Seite können Sie zusätzliche Anpassungsfelder angeben.

Projektname

Der Name Ihres Projekts, der in der B2CORE-Benutzeroberfläche angezeigt wird.

Skripte (js-script)

Fügen Sie hier Ihre JavaScript- (JS-)Skripte hinzu. Diese Skripte werden automatisch ausgeführt, wenn Kunden die Seite Registrieren oder Anmelden öffnen.