Zum Hauptinhalt gehen
English (US) Español Français Italiano 日本語 한국어(대한민국) Polski Português do Brasil Русский 简体中文 繁體中文

Brandguide Anpassung mit CSS

  • Aktualisiert
Willkommen beim neuen Brandguide Erlebnis! Dieser Artikel sowie Erste Schritte mit Brandguide und Brandguide Anpassung mit CSS führen Sie durch die Migration Ihrer Inhalte in das neue Erlebnis. Am 1. September 2023 werden die Bearbeitungsmöglichkeiten für Ihren bestehenden Brandguide beendet. Am 1. Dezember 2023 wird der veraltete Brandguide Editor nicht mehr verfügbar sein. 
 
CSS oder „Cascading Style Sheets“ ist eine Designsprache, die von Webentwicklern verwendet wird, um einen einheitlichen und visuell ansprechenden Blick auf mehrere Seiten einer Website zu erstellen. HTML bestimmt größtenteils den textuellen Inhalt, aber CSS bestimmt die visuelle Struktur, das Layout und die Ästhetik der Website.
 

JSON Syntax

Die CSS-Syntax besteht aus einer Reihe von Regeln. Diese Regeln haben 3 Teile: einen Selektor, eine Eigenschaft und einen Wert. 
Selector {
Eigenschaft: Wert;
}
Der Selektor repräsentiert das HTML-Element, das Sie gestalten möchten. Die Eigenschaft bezieht sich auf einen bestimmten Aspekt des HTML-Elements wie Farbe, Schriftfamilie oder Rand. Jede Eigenschaft in CSS hat eine Reihe von akzeptierten Werten, zum Beispiel einen Hex-Code oder Pixel-Wert.
Der Selektor kann mehrere Eigenschaften und Wertepaare haben, die durch Semikolone getrennt sind. Zum Beispiel werden die angegebenen Werte der Eigenschaften auf alle h1-Tags angewendet:
h1 {
Schriftfamilie: comic sans;
Schriftgröße: 12px;
Farbe: blau;
}

Gemeinsame CSS-Selektoren

CSS Selektor

Der CSS-Typ-Selektor wählt alle Elemente eines bestimmten Typs innerhalb der Webseite aus.
Hier sind einige Beispiele für gemeinsame Typ-Selektor:
  • p: Wählt alle Absatz-Tags aus.
  • a: Wählt alle Hyperlinks aus.
  • h1: Wählt alle h1 Header-Tags aus.
  • span: Wählt alle Span Tags aus.
  • body: Wählt alle Elemente innerhalb des Seiteninhalts aus.
  • Schaltfläche: Wählt alle Schaltflächen auf der Webseite aus.
  • li: Wählt alle Listenelemente aus.

CSS-Klassenauswahl

Eine CSS-Klasse ist ein Attribut zur Definition einer Gruppe von HTML-Elementen. Dadurch ist es möglich, mehrere Elemente mit einem einzigen Selektor anzupassen. Wir können dies tun, indem wir in unserem CSS ein (.) Zeichen vor dem Klassennamen eingeben. Zum Beispiel, um die Schriftart des Kopf- und Absatzes unten zu ändern:
 <h1 class="i-am-a-class">Kopfzeile</p>
<p class="i-am-a-class">Absatz</p>
Wir würden das folgende CSS verwenden, um alle Elemente mit einer Klasse von i-am-a-class zu adressieren:
.i-am-a-class {
font-famy: helvetica;
}

CSS Selektor

Eine CSS-ID ist ein Attribut um ein einzelnes Element auf der Webseite zu definieren. Um ein Element mit einer bestimmten ID auszuwählen, geben Sie einen Hash (#) vor die ID ein. Zum Beispiel, um die Schriftart des Kopf- und Absatzes unten zu ändern:
 <p id="i-am-an-id">Absatz</p>
Wir würden das folgende CSS verwenden, um nur das Element mit einer Id von i-am-an-id zu adressieren:
#i-am-an-id {
font-family: helvetica;
}

CSS-Eigenschaften

Texteigenschaften

  • Schriftfamilie: Setzt die Schriftart z.B."Arial" oder "mal"
  • Schriftgröße: Setzt die Schriftgröße z.B.5px oder 1em
  • Font-Gewicht: Setzt die Schriftart oder "Fett" z.B."fett" oder 200
  • -Farbe: Setzt die Farbe des Textes z.B.Blau, #add8e6 oder rgb(135,206,250)
  • Zeilenhöhe: Vertikaler Abstand zwischen Zeilen z.B.5px oder 1em
  • Buchstabenabstand: Leerzeichen zwischen Zeichen z.B.5px oder 1em
  • Wortabstand: Leerzeichen zwischen Wörtern z.B.5px oder 1em

Hintergrundeigenschaften

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

Abstandseigenschaften

Die folgenden Eigenschaften akzeptieren Auto, Erben, % oder eine beliebige CSS-Längeneinheit 
  • Höhe: Legt die Höhe des Elements fest 
  • Breite: Setzt die Breite des Elements 
  • Füllung: Setzt den Polsterraum des Elements
  • Rand: Legt den Abstand des Elements fest 

Längen und Einheiten

  • px: Pixel (1px = 1/96th of 1 Zoll)
  • em: Relativ zur Schriftgröße des Elements (3em = 3 mal so groß wie die aktuelle Schriftart)
  • vw: Relativ zu 1% der Breite des Viewport
  • vh: Relativ zu 1% der Höhe des Viewports
  • %: Relativ zum Elternelement

 

Elemente mithilfe von Chrome DevTools finden

Chrome DevTools ist eine Sammlung von Web-Entwickler-Tools, die direkt in den Google Chrome-Browser eingebaut. Mit diesen Tools können wir HTML-Elemente und bestehende CSS-Styles schnell auf jeder Webseite lokalisieren. 
1. Um auf DevTools zuzugreifen, können Sie mit der rechten Maustaste auf die Seite klicken und "Inspect"wählen, oder verwenden Sie kurze Befehle wie Command+Option+C (Mac) oder Control+Shift+C (Windows, Linux, Chrome OS).
 
 
2. Wenn Sie das DevTools-Panel geöffnet haben, wählen Sie oben auf der Seite das Werkzeug Inspect aus.
 
 
3. Sie können dann auf das Element auf der Seite klicken, die Sie gestalten möchten. Die Selektoren, die zum Anpassen dieses Elements verwendet werden können, werden unter der Registerkarte Elemente hervorgehoben. Auf der Registerkarte Stile unten werden die CSS-Stil Regeln angezeigt, die derzeit auf dieses Element angewendet werden.
 
 
4. In diesem Beispiel werden wir die Farbe des Navigationslink auf #6b646b ändern, indem wir die Klasse "nav-link" verwenden, die wir mit Hilfe des DevTools Inspektors gefunden haben. Wir werden auch die "hinzufügen! mportant" Eigenschaft bis zum Ende der Deklaration, um alle vorherigen Styling für diese Eigenschaft zu überschreiben.
 
 
5. Sobald das CSS aktualisiert wurde und die Änderungen gespeichert wurden, Sie werden sehen, dass sich die Farbe des Navigationstextes auf #6b646b geändert hat:
 

Drittanbieter-Schriftarten hinzufügen

@font-face ist eine CSS-Regel, die Ihnen die Möglichkeit gibt, Schriften von Drittanbietern auf Ihrem Brandguide zu importieren und zu verwenden. Wir empfehlen, dass Sie Ihre Schriftart über CSS auf der globalen Einstellungsebene hinzufügen (im Gegensatz zur Blockebene).

Sie können eine Fremdschriftart auf zwei Arten hinzufügen.

Kopieren und Einfügen einer URL

Die erste Option ist, zu Ihrer Fontbibliothek zu navigieren und die Schriftart auszuwählen, die Sie Ihrem Brandguide hinzufügen möchten und kopieren und fügen Sie die URL ein. Dieser Prozess ist im Folgenden beschrieben. 

Brandguide navigieren

Sie können die Syntax unten kopieren und in den CSS-Bereich Ihres Brandguide einfügen. Dies ist das einzige CSS, das Sie die Schriftart importieren müssen. Um eine andere Schriftart zu importieren, ändern Sie einfach die Schriftart, die Quell-URL und das Format der von Ihnen gewählten Schriftart.
@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
}

Suche die Schrift-URL und -Format:

1. Navigieren Sie zu Ihrer Fontbibliothek und wählen Sie die Schriftart, die Sie Ihrem Brandguide hinzufügen möchten. In unserem Fall wählen wir "zufrieden stellen" aus Google Fonts.
 
2. Einmal ausgewählt, müssen Sie die @import-URL kopieren und in einen neuen Browser-Tab einfügen. 
 
 
3. Dies führt Sie zu einer Seite mit der URL und dem Format, die benötigt wird, um die Schriftart in Ihren Brandguide zu importieren.
4. Kopieren Sie die src URL und fügen Sie sie zusammen mit der Schriftfamilie in den @fontface-Code ein. Dann fügen Sie den Code in das CSS-Feld ein. Ihre Änderungen werden automatisch aktualisiert. 
 
Wählen Sie Update CSS aus, um Ihre Änderungen zu speichern. 
 
 
Die neu importierte Schriftart wird im Dropdown-Dropdown-Menü der Globalen Einstellungen angezeigt.
 

Konvertieren der Schriftart in ein WOFF- oder WOFF2-Format

Die zweite benutzerdefinierte Schriftart ist die Umwandlung der Schriftart in ein Woff- oder Woff2-Format. Dies ist ein Webschriftformat, das für Browser kompatibler ist als ttf/otf Textdateiformate. Dieser Prozess ist im Folgenden beschrieben.  

Eigentumsrechte 

1. Konvertieren Sie die Schriftart in ein Woff oder Woff2 Format. Dies ist ein Webschriftformat, das für Browser kompatibler ist als ttf/otf Textdateiformate. 
 
2. Laden Sie die Schriftart in einen Dateibereich innerhalb der Bibliothek hoch. 
 
3. Öffnen Sie das Asset, navigieren Sie zum Einbett-Tab und wählen Sie Link kopieren. 
 
 
4. Navigieren Sie zu den globalen Einstellungen flyout. Sie können die Syntax unten kopieren und fügen Sie sie in den CSS-Abschnitt der Global Settings flyout. Dies ist das einzige CSS, das Sie die Schriftart importieren müssen. Um eine andere Schriftart zu importieren, ändern Sie einfach die Schriftart, die Quell-URL und das Format der von Ihnen gewählten Schriftart. Sobald die Syntax eingegeben ist, werden Ihre Änderungen gespeichert.  
@font-face {
font-family: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff?auto=webp&format=woff;
}
5. Auf diese Weise importierte Schriftarten führen nicht dazu, dass die Schriftart im Dropdown-Dropdown-Menü "Default Typeface" angezeigt wird. Stattdessen müssen Sie die Schriftart im CSS-Bereich manuell übernehmen. Unten ist ein Beispiel für die Anwendung der Fett Web-Schriftart auf importierte Absatz-Tags. 
p {
font-family: 'boldweb';
color: #333;
}

Video hinzufügen

Du kannst deinem Brandguide ein Video hinzufügen, indem du folgenden Schritten folgst: 
 
  1. Öffnen Sie das Asset Modal für das Video.
  2. Navigieren Sie zum Einbetten Tab. 
  3. Suchen Sie den Video Embed Code und wählen Sie Link kopieren. 
  4. Fügen Sie den Code in den HTML-Block ein.

Verwandte Beiträge