> For the complete documentation index, see [llms.txt](https://coolbax.gitbook.io/coolbax-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coolbax.gitbook.io/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md). # Typografie & Farben ## Farben Farben können Sie auf mehrere Arten definieren. Sollten Sie den meist bekannten HEX-Code wissen, können Sie ihn in die entsprechenden Felder eintragen. Sie können die Farbe allerdings auch über die RGB-Werte oder mittels Farbwähler bestimmen. Klicken Sie hierzu auf das Kästchen vor dem Eingabefeld.
In dem nun geöffneten Menü haben Sie die Möglichkeit den RGB-Werte, den HEX-Code oder mittels Farbregler bzw. Farbwähler eine Farbe zu bestimmen. {% hint style="info" %} Zusätzlich haben Sie die Transparenz einer Farbe definieren. Ändern Sie hierzu den Farbregler über dem Eingabefeld des HEX-Eingabefelds bzw. ändern Sie den Wert bei Alpha {% endhint %} Nutzen Sie ebenfalls die Möglichkeit Variablen zu verwenden, wenn Sie einen bestimmten Farbwert öfter in den Theme Einstellungen nutzen möchten. Wie das geht, erfahren Sie unter: [Theme Einstellungen > Variablen finden und nutzen](/coolbax-docs/theme/theme-einstellungen.md#variablen-finden-und-nutzen). ### Theme-Farben Die ersten Farbeinstellungen sind die ausschlaggebendsten Einstellungen im Bereich Farben.
Die Primärfarbe sowie die Sekundärfarbe sind die beiden Hauptfarben und ziehen sich an mehreren Stellen durch den gesamten Shop. * **1) Primärfarbe:** diese Farbe wird zur Anzeige von wichtigen Aktionen, Links oder Buttons genutzt z. B. Warenkorbbutton, Verlinkungen im Shop, Anzeige des aktiven Menüpunkts im Breadcrumb * **2) Sekundärfarbe:** diese Farbe wird bei Buttons mit untergeordneter Wichtigkeit genutzt wie z. B. Button "Schnellansicht" im Kategorie Listing Die vier letzten Farbwerte in diesem Bereich wirken sich auf das Layout des Shops aus. Hier definieren Sie die Hintergrundfarbe des Browserfenster sowie die des Shops und der Blockelemente. Zusätzlich können Sie die globale Rahmenfarbe bestimmen. * **3) Rahmen:** Rahmen werden nur angezeigt, wenn Sie die Funktion im Tap: [Allgemein > Globale Einstellungen](/coolbax-docs/theme/theme-einstellungen/allgemeine.md#globale-einstellungen) aktiv geschalten haben. Sie werden um alle Elemente im Content Bereich gelegt. * **4) Body Hintergrund:** Hier ist die Hintergrundfarbe des Browserfenster gemein. * **5) Shop Hintergrund:** In dieser Einstellung bestimmen Sie die Hintergrundfarbe des Shops gesamten Shops. * **6) Block Hintergrund:** Hier definieren Sie die Hintergrundfarbe für die Block-Elemente z. B. Produktboxen oder Filter.

Beispiel für alle Einstellungsmöglichkeiten aus dem Bereich: Theme-Farben

{% hint style="info" %} Die Hintergrundfarbe für den Header und Footer können separat festgelegt werden. Sie finden die Einstellungen unter den Taps: [Header](/coolbax-docs/theme/theme-einstellungen/header.md#hintergrundfarbe) und [Footer](/coolbax-docs/theme/theme-einstellungen/footer.md#footer-template). {% endhint %} ### Status-Ausgaben Status-Ausgaben sind Hinweisfelder, welche den Kunden auf eine bestimmte Sachlage aufmerksam macht, warnen tut oder einen Fehler erklärt. Diese Ausgaben können auf jeder Seite angezeigt werden, wo der Kunde eine Aktion ausführt. Je nach Dringlichkeit der Ausgabe können unterschiedliche Farben verwendet werden. Insgesamt gibt es vier verschiedene Status-Ausgaben:

Beispiel für die Status-Ausgabe: Hinweis

### E-Commerce Unter E-Commerce verbergen sich die Einstellungen für die Schriftfarbe der Preise sowie der reduzierten Preise (Preis Discount). Diese können optisch hervorgehoben werden. {% hint style="warning" %} Die Änderungen werden auf allen Seiten übernommen, wo ein Preis ausgegeben wird. {% endhint %} ### Buttons Standardmäßig werden die Farben von den Buttons (abhängig von Ihrer Wichtigkeit) mit der Primär- und Sekundärfarbe belegt. Sie haben dennoch die Möglichkeit komplett andere Farben für den Kauf-Button und alle anderen Buttons festzulegen. Das gilt jeweils für die Hintergrundfarbe sowie die Schriftfarbe. ### Tooltips Tooltips werden über Icons angezeigt und dienen zur Erklärung bzw. der Bezeichnung des Icons. Sie können hier die Hintergrundfarbe, Schriftfarbe und die Deckkraft einstellen.

Beispiele für die Darstellung von Tooltips

### Badges & Hinweise Mit Badges sind Auszeichnungen oder Hinweise für Produkte gemeint. Das kann z.B. ein Neu, Tipp, Versandkostenfrei oder Discount sein. Bestimmen Sie für diese Hinweise die Hintergrundfarbe, Schriftfarbe, [Schriftgröße](#schriftgrossen), [Schriftstärke](#schriftstarke) und [Text Transform](#text-transform).

Beispiele für: Discount, Versandkostenfrei und Tipp

## Typografie Sie haben in Ihrem Theme die Möglichkeit zwei unterschiedliche Schriften (Fonts) einzubinden. Die Einbindung der Schriften kann auf zwei unterschiedliche Methoden erfolgen: remote und lokal. Diese werden nachfolgend mit den Google Fonts erklärt: {% hint style="info" %} **INFO:** Die nachfolgende Anleitung ist für Kunden mit einem eigenen Server geschrieben. Kunden welche die Cloud Version nutzen, benötigen eine separate Erweiterung. {% endhint %} {% tabs %} {% tab title="Lokal" %} ## Schriften lokal vom eigenen Server laden (empfohlen) {% hint style="info" %} Die nachfolgende Anleitung ist für Kunden mit einem eigenen Server geschrieben. Kunden welche die Cloud Version nutzen, benötigen eine separate Erweiterung. {% endhint %} Die unabhängigste Methode ist die Einbindung einer Schrift auf ihrem eigenen Server. Somit sind Sie unabhängig von Google. Ihre Schrift wird immer geladen, egal ob Google die Schrift von dem Google Server entfernt oder dieser gerade nicht erreichbar ist. Diese Methode wird daher empfohlen. ### Schriften suchen und herunterladen **Schritt 1:** Gehen Sie auf die Google Fonts Seite und suchen Sie sich dort eine passende Schriftart aus. Wir verwenden für unser Beispiel die Schriftart "Roboto Condensed". {% embed url="" %} Offizielle Google Fonts Seite {% endembed %} **Schritt 2:** Um die Schriftarten herunterzuladen, empfehlen wir den kostenfreien Dienst von google-webfonts-helper. Suchen Sie hier nach der Schrift und klicken diese an. Sie können für die Suche die linke Navigationsleiste oder das Suchfeld verwenden. {% embed url="" %} Zum kostenfreien Dienst von google-webfonts-helper {% endembed %} Auf der Seite haben Sie unter dem Punkt 2 "Select styles:" die Möglichkeit die Strichstärken zu wählen. Hier können Sie z. B. *regular* für die normale Strichstärke und *700* für fette Schriftstärken verwenden. Weitere Strichstärken sind selbstverständlich möglich.

Abbildung zu Schritt: 1

Abbildung zu Schritt: 2

Abbildung zu Schritt: 3

**Schritt 3:** Unter Punkt 3 "Copy CSS" können Sie die Einstellung Customize folder prefix (optional)- Einstellung "../fonts/" so übernehmen. Anschließend klicken Sie nur noch auf den Button bei Punkt 4 "Download files", um die Schrift auf ihren Rechner zu laden. ### Upload auf FTP und Einbindung **Schritt 4:** Entpacken Sie die gerade heruntergeladenen Schriftart und laden diese über ihren FTP in folgendes Verzeichnis hoch: ***public/fonts/*** **Schritt 5:** Anschließend müssen Sie eine CSS-Datei erstellen. Benennen Sie die Datei wie folgt: ***fonts.css.*** Auf der Seite google-webfonts-helper unter Punkt 3 "Copy CSS" finden Sie die Anweisungen, welche Sie in die CSS Datei kopieren müssen. {% hint style="info" %} Sollten die Verzeichnisse: *fonts* und *css* noch nicht vorhanden sein, legen Sie diese an. {% endhint %} **Beispiel CSS-Code für die Einbindung:** ``` /* Schriftart-regular */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Schriftart'; font-style: normal; font-weight: 400; src: url('../fonts/Schriftart-Dateienname.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } ``` Laden Sie anschließend die Datei in folgendes Verzeichnis hoch: ***public/css/*** **Schritt 6:** Gehen Sie jetzt in die Theme Einstellungen und wechseln in den Tab: [Weiteres > CSS Code oder Dateien](/coolbax-docs/theme/theme-einstellungen/weiteres.md#css-code-oder-dateien) und tragen in dieses Feld den Pfad zu ihrer angelegten CSS-Datei ein: ``` ``` **Schritt 7:** Wechseln Sie anschließend in den Tab: [Allgemein > Typografie](#typografie) und tragen in die Felder "Schriftart Text" und/oder "Schriftart Überschrift" die neue Schriftart ein. {% endtab %} {% tab title="Remote " %} ## Schriften per remote vom Google Server laden {% hint style="warning" %} Bitte Überprüfen Sie, ob ein zusätzlicher Hinweis in Ihren Datenschutzerklärung bzgl. der Verwendung von Google Fonts notwendig wird! Suchen Sie im Zweifelsfall eine Rechtsberatung auf. {% endhint %} Die einfachste und schnellste Methode ist die Einbindung der Schriften per remote. Hierzu laden Sie die Schriften direkt von den Google Servern. Gehen Sie hierzu auf die Seite von Google Fonts und wählen dort eine entsprechende Schrift aus: {% embed url="" %} Offizielle Google Fonts Seite {% endembed %} Wählen Sie z.B. die Schriftart mit dem Namen "Noto Sans Vai". Kopieren Sie sich den vollständigen Namen und gehen in die Theme Einstellungen: Allgemein > Typografie. Dort fügen Sie ihn anstelle der derzeitigen Schrift ein. In unserem Fall wäre es "Inter".
{% hint style="info" %} Achten Sie darauf, dass die Schrift immer zwischen den Hochkomma steht! {% endhint %} Damit die Schrift von dem Google Server geladen werden kann, muss die Einstellung "Google Fonts automatisch laden" auf aktiv gesetzt werden. {% endtab %} {% endtabs %} ### Schriftart Wie Sie eine Schriftart einbinden und welche zwei Optionen Ihnen dazu geboten werden, haben Sie im Abschnitt: [Typografie](#typografie) erklärt bekommen. Im Theme haben Sie die Möglichkeit zwei unterschiedliche Schriftarten für unterschiedliche Bereiche festzulegen: * **Schriftart für Text:** bezieht sich auf die Fließtexte wie z. B. Beschreibung, Einleitungstexte aber auch Hinweistexte oder die Navigationspunkte * **Schriftart für Überschriften:** bezieht sich auf alle Arten von Überschriften (H1-H6). Hierrunter fallen z. B. Produktname, Headline Überschriften im Footer. ### Schriftgrößen Jede Schrift hat im Standard eine andere Größe. Manche Schriften sollten im Standard bereits mit einer größeren Schriftgröße versehen werden, damit die Lesbarkeit garantiert ist. Im Theme haben Sie die Möglichkeit die Schriftgröße für alle Überschriften (H1-H6) sowie für den normalen Fließtexte (Einstellung: Schriftgröße) zu hinterlegen. Mitunter haben Sie noch einmal für einzelne Bereiche oder einzelne Elemente die Möglichkeit die Schriftgröße zu verändern. In den weiteren Einstellungen werden Sie die Option mehrmals vorfinden. ### Schriftstärke Um bestimmte Wörter oder Wortgruppen hervorzuheben, haben Sie die Möglichkeit die Schriftstärke zu variieren. Standardmäßig wird eine Schrift in normal ausgegeben (oft auch als *regular* bezeichnet). Um davon abzuweichen können Sie auch die Schriftstärken: *light* (dünn) oder *bold* (fett) verwenden. {% hint style="warning" %} Achten Sie bei der Auswahl der Schriften darauf, dass die Schrift auch solche Schriftstärken anbietet. Bei der [lokalen Einbindung](#typografie) müssen diese Schriftstäken separat ausgewählt und eingebunden werden. {% endhint %} Auch diese Option werden Sie, im Laufe der Einrichtung, mehrmals an den unterschiedlichsten Einstellungsmöglichkeiten vorfinden. ### Text Transform Text Transformation ist eine weitere Möglichkeit Wörter oder Wortgruppen spezielle hervorzuheben. Sie können diese Wörter nur in Großbuchstaben bzw. nur in Kleinbuchstaben anzeigen. Wie auch die Schriftgröße und Strichstärke ist diese Option mehrmals in den Einstellungen des Themes vorhanden. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://coolbax.gitbook.io/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.