Verwenden Sie CSS, um Brandguide anzupassen

CSS oder Cascading Style Sheets ist eine Designsprache, die verwendet wird, um ein einheitliches und visuell ansprechendes Erscheinungsbild für mehrere Seiten einer Website zu schaffen. HTML bestimmt weitgehend den Textinhalt, aber CSS bestimmt die visuelle Struktur, das Layout und die Ästhetik der Website.

Die Anpassung von CSS wird nur empfohlen, wenn Sie über fortgeschrittene CSS-Kenntnisse verfügen, da der Support keine Hilfe bei der Implementierung von benutzerdefiniertem Code in Brandguide bietet.

Brandguide bereinigt den Code, um XSS-Angriffe zu verhindern. Beachten Sie, dass wir den zugrunde liegenden Brandguide-Code jederzeit ändern können – dies kann sich möglicherweise auf Ihr CSS und HTML auswirken.

Verwenden Sie CSS in Brandguides

1. Öffnen Sie Ihren Brandguide. 
2. Wählen Sie im linken Menü Einstellungen aus. 
3. Scrollen Sie nach unten zum Abschnitt Anpassung und geben Sie Ihren Code in das Textfeld CSS ein. 

Brandfolder Image

Nützliche CSS-Eigenschaften

Hier sind einige CSS-Eigenschaften, die für die Anpassung Ihres Brandguide nützlich sein könnten:

Texteigenschaften

• font-family: Setzt die Schriftart des Textes, z. B.: Arial oder Times
• font-size: Legt die Schriftgröße fest, z. B.: 5px oder 1em
• font-weight: Legt die Schriftstärke oder Fettdruck fest, z. B.: bold oder 200
• color: Legt die Farbe des Textes fest, z. B.: blue, #add8e6 oder rgb(135,206,250)
• line-height: Vertikaler Abstand zwischen Zeilen, z. B.: 5 px oder 1em
• letter-spacing: Abstand zwischen den Zeichen, z. B.: 5 px oder 1 em
• word-spacing: Abstand zwischen Wörtern, z. B.: 5px oder 1em

Hintergrundeigenschaften

• background-color: Legen Sie die Hintergrundfarbe des Elements fest, z. B.: blue, #add8e6 oder rgb(135,206,250)
• background-image: Setzt ein Hintergrundbild basierend auf der URL, z. B.: url('sample-image.jpg')
• background-position: Legt die Startposition eines Hintergrundbilds fest, z. B.: Mitte oder 50 %

Bereichseigenschaften

Die folgenden Eigenschaften akzeptieren auto, inherit, %, oder jede beliebige CSS-Längeneinheit 

• height: Legt die Höhe des Elements fest 
• width: Legt die Breite des Elements fest 
• padding: Legt den Abstand des Elements fest
• margin: Legt den Randabstand des Elements fest 

Längen und Einheiten

• px: Pixel (1 px = 1/96 von 1 Zoll)
• em: Relativ zur Schriftgröße des Elements (3em = 3-fache Größe der aktuellen Schrift)
• vw: Relativ zu 1 % der Breite des Ansichtsfensters
• vh: Relativ zu 1 % der Höhe des Ansichtsfensters
• %: Relativ zum übergeordneten Element

Fügen Sie Schriftarten von Drittanbietern hinzu

@font-face ist eine CSS-Regel, die es Ihnen ermöglicht, Schriftarten von Drittanbietern zu importieren und in Ihrem Brandguide zu verwenden. Wir empfehlen Ihnen, Ihre Schriftart über CSS auf globaler Einstellungsebene (im Gegensatz zur Blockebene) hinzuzufügen.

Sie haben zwei Möglichkeiten, eine Schriftart eines Drittanbieters hinzuzufügen:

• Navigieren Sie zur Schriftbibliothek Ihrer Wahl und wählen Sie die Schriftart aus, die Sie zu Ihrem Brandguide hinzufügen möchten. Kopieren Sie die URL und fügen Sie sie ein.

Oder:

• Konvertieren Sie die Schriftart in ein woff- oder woff2-Format. Dieses Web-Font-Format ist mit Browsern besser kompatibel als ttf/otf-Textdateiformate.

In den folgenden Abschnitten werden die einzelnen Möglichkeiten erläutert.

Verwenden Sie die Schriftart eines Drittanbieters unverändert

1. Navigieren Sie zur Schriftbibliothek Ihrer Wahl und wählen Sie die Schriftart aus, die Sie Ihrem Brandguide hinzufügen möchten. In diesem Beispiel verwenden wir Satisfy von Google Fonts.
2. Kopieren Sie nach der Auswahl die @import-URL und fügen Sie sie in einen neuen Browser-Tab ein. 

Brandfolder Image

3. Dadurch gelangen Sie zu einer Seite, die die URL und das Format enthält, die zum Importieren der Schriftart in Ihren Brandguide erforderlich sind.

Brandfolder Image

4. Kopieren Sie die src-URL und fügen Sie sie in den @fontface-Code und die Schriftfamilie ein, wie im folgenden Beispiel:

@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
}

5. Fügen Sie den Code in das CSS-Feld ein und wählen Sie „CSS aktualisieren“ aus, um Ihre Änderungen zu speichern.

Die neu importierte Schriftart wird im Dropdown-Menü „Standardschriftart“ im Flyout „Globale Einstellungen“ eingetragen.

Verwenden Sie die folgende Syntax als Vorlage für jede andere Schriftart, die Sie verwenden möchten; aktualisieren Sie einfach die Schriftfamilie und die src-URL, sodass sie mit der gewünschten Schriftart übereinstimmen. Es ist die gleiche Syntax wie im obigen Beispiel; es ist alles, was Sie brauchen, um die Schrift zu importieren. 

@font-face {
font-family: '[Schriftname}';
src: url([Font SRC URL);
}

Verwenden Sie eine Schriftart, die in das Format WOFF oder WOFF2 konvertiert wurde.

1. Finden Sie einen Schriftkonverter für WOFF oder WOFF2.

2. Konvertieren Sie die Schriftart in ein WOFF- oder WOFF2-Format und laden Sie sie herunter. Dieses Webfont-Format ist für Browser kompatibler als ttf/otf-Textdateiformate.

3. Laden Sie die Schriftart in einen Dateibereich in Brandfolder hoch.

4. Öffnen Sie das Asset, navigieren Sie zur Registerkarte „Einbetten“ und wählen Sie Link kopieren aus.

5. Kopieren Sie den Code unten in das CSS-Feld ein. Legen Sie die gewünschte Schriftfamilie fest und ersetzen Sie die URL durch den Link, den Sie im vorherigen Schritt kopiert haben. Speichern Sie die Änderungen. 

@font-face {
Schriftfamilie: 'boldweb';
Quelle:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff');
}

Beachten Sie, dass auf diese Weise importierte Schriftarten nicht in der Dropdown-Liste „Standardschriftart“ angezeigt werden. Stattdessen müssen Sie die Schriftart manuell im Abschnitt „CSS“ anwenden. Im Folgenden finden Sie ein Beispiel für die Anwendung der Schriftart „Bold Web“ auf importierte Absatz-Tags.

p {
Schriftfamilie: 'boldweb';
color: #333;
}