Neu JTL Shop 5 Globale Einstellungen zu Farben und Schriftarten

[grafikdesignerin]

Hallo alle Zusammen!

ich würde gerne wissen wie ich nur für die h1 und vielleicht auch h2 Überschriften die Schriftart einer Google Font ändern kann?????

 

[Conny]

Für solche Änderungen ist es ratsam ein eigenes Child Template zu erstellen.​

Um DSGVO konform zu sein solltest du die Schriftart erst mal herunter laden!​

1. Schriftart(en) herunter laden​

Zuerst müssen die benötigten Schriftarten herunter geladen werden. Am einfachsten geht das über die Website Google Webfonts Helper.
Im linken Bereich die Schriftart(en) auswählen und im rechten Bereich die Feineinstellungen in vier Schritten:

1. Zeichensatz auswählen
Latin ist für eine mitteleuropäische Website die optimale Wahl. Und da es vorausgewählt ist, brauchst du hier eigentlich nichts zu machen.

2. Schriftschnitte auswählen
Wie direkt bei der Google Fonts Website:
Wähle mit Bedacht die Schnitte aus, die du auf jeden Fall brauchen wirst. Die Option „700“ ist selten eine schlechte Idee, da dies für „fette“ Texte genommen wird.

3. CSS-Code kopieren
Unter dem Reiter „Best Support“ findest du den CSS-Quellcode, der in deine CSS-Datei vom Child Template gehört.
Wenn du dir den Code anschaust, erkennst du gut die einzelnen Schriftarten, -schnitte und Dateiformate, die für die einzelnen Browser benötigt werden (wie bspw. .eot, .woff oder .ttf).

4. Schriftdateien downloaden
Und am Ende gibt es einen blauen Button, mit dessen Hilfe du die benötigten Schriftdateiformate herunter laden kannst:
Wenn du weitere Google Fonts verwenden möchtest, musst die vier Schritte entsprechend wiederholen!

Die weiteren CSS-Codes zur Font-Einbindung kannst du dann ganz einfach untereinander kopieren und in deine CSS-Datei einfügen.

Google Fonts auf den eigenen Server laden​

Die ZIP-Datei(en) entpackst du und lädst diese dann (am besten mit einem FTP-Programm) auf den eigenen Server zu deinem Website-Projekt.

Je nachdem wie deine Ordnerstruktur aussieht, kann es notwendig sein, den Pfad zu den Schriftdateien anzupassen.

H1 Tag Font zuweisen
Dann musst du noch in deiner CSS Datei (im Child Template) das h1 Tag dem Font zuweisen:
z.B. h1 { font-family: Verdana, "Lucida Sans Unicode", sans-serif }

 

[MAJP]

Hallo,
würde mich hier auch nochmal mit einer Frage einhängen.

mit dem Befehl Body ändern sich ja nicht alle Schriften. Überschriften haben sich bei mir zum Beispiel von der Schriftart nicht geändert.

gibt es da eine andere Variable mit der man die Schriftart global ändern kann, das sie überall angezeigt wird?

Danke für die Hilfe schonmal im Voraus.

 

[apalusa]

gibt es da eine andere Variable mit der man die Schriftart global ändern kann, das sie überall angezeigt wird?

Das einzige was mir dazu einfallen würde wäre:

body * {
    ...
}

Das sollte wirklich sämtlichen Text auf der Seite auf die entsprechende Schriftart setzen. Allerdings kann ich nichts zu dem Thema sagen, ob das eine gute Idee ist. In meiner persönlichen Meinung würde ich eher alle gewünschten Stellen spezifisch anpassen anstatt einfach Blind alles zu überschreiben.

Hab gerade mal bei uns nachgeschaut, im NOVA scheint folgender Selector die Zuweisung der font-family zu steuern, also sollte man diesen auch für diesen Zweck verwenden können (zusätzlich zum normalen body) ohne das wirklich jede kleinste Ecke einfach blind überschrieben wird:

h1, h2, h3, h4, h5, h6, .h1, .h2, .product-matrix .product-matrix-title, .h3, .sidepanel-left .box-normal .box-normal-link, .h4, .h5, .h6 {
    ...
}

 

[Verkäuferlein]

Hallo, wir haben über den Theme Editor die " $primary " Farbe angepasst. Leider wird die Änderung nicht für alle Bereiche Übernommen. Beim hoovern ist die Schriftfarbe verändert, die Kategoriefarbe ist aber noch die alte.
Den Anhang 75625 betrachten
Wir bitten um eure Unterstützung.

Hallo,

ich bin auch gerade dabei mich in den 5er Shop von JTL einzuarbeiten und habe aktuell auch Farbanpassungen auf dem Zettel.

Vor längerem hatte ich auch schon einmal versucht, ein Child-Template anzulegen, bin da aber nicht so wirklich weitergekommen.

Gibt es mittlerweile einen einfacheren Weg?

Danke und Gruß

Verkäuferlein

 

[MAJP]

Hey @Verkäuferlein

Einfach https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_templates/eigenes_template.html anschauen
und unter
https://gitlab.com/jtl-software/jtl-shop/child-templates/novachild
einfach das Template runter Laden musst dann noch zwei, drei Namen ändern mehr ist es aber nicht.

Hat bei mir echt gut funktioniert.

und am besten um alles zu ändern auf
https://build.jtl-shop.de/#plugin/stable
gehen und da die letzte stabile Version vom Theme Editor herunterladen

und @apalusa danke für deinen Tipp hat gut funktioniert leider, jetzt ist fast alles in der richtigen Schrift bis auf die Überschriften von onepage Composer.


LG Adfunture

 

[Petermeter]

Wenn du ein Child Template einsetzt würde ich folgendes probieren:

Die Fontangaben durch deine ersetzten:

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1.5;
}

Den Anhang 75637 betrachten

ICh habe den Code mal eingegebn ( da ich im gesammten shop Global alle Schriften ändern möchte ( als Fließtext headings etc...)
Nur wird dabei nur der Fließtext geändert!? klar, steht ja auch BODY dran aber was kann ich machen das alles geändert wird?
Mir ist im übrigen auch aufgefallen das sich die schrift zwar am desktop ändert aber mobile nicht!

Kannst du mir sagen wo ich schnell und einfach die schrift GLOBAL für alle "Elemente" ändern kann?

Ich habe schon meine Fav. schrift im Child angelegt...
Ich finde das mit der Schrift sehr umständlich oder tue ich mich nur schwer`?

Ich würde mich sehr freuen auf Hilfe!

beste Grüße Peter

 

[apalusa]

Nur wird dabei nur der Fließtext geändert!?

Was passiert denn wenn du font-family: 'deine schriftart', sans-serif; gegen font-family: 'deine schriftart', sans-serif !important; ersetzt?
Bin mir gerade nicht 100% sicher ob das auch bei der font-family klappt wie an anderen Stellen, aber falls das der Fall ist und diese Änderung Abhilfe schafft, scheint wohl an anderer Stelle die Schriftart nochmal überschrieben zu werden.

Unter Umständen könnte es aber auch sein das die anderen Textteile (alles außer Fließtext) noch eigene Stylings mit font-family erhalten, die würden dann natürlich eine höher Priorität haben als die font-family die nur allgemein body weit zugeordnet wird. Dafür müsste man sich einfach mal die CSS Infos zu einer Headline mit den Entwicklerwerkzeugen des Browsers anschauen, aus welcher Datei/Zeile/Herkunft die font-family kommt.

 

[Petermeter]

Was passiert denn wenn du font-family: 'deine schriftart', sans-serif; gegen font-family: 'deine schriftart', sans-serif !important; ersetzt?
Bin mir gerade nicht 100% sicher ob das auch bei der font-family klappt wie an anderen Stellen, aber falls das der Fall ist und diese Änderung Abhilfe schafft, scheint wohl an anderer Stelle die Schriftart nochmal überschrieben zu werden.

Unter Umständen könnte es aber auch sein das die anderen Textteile (alles außer Fließtext) noch eigene Stylings mit font-family erhalten, die würden dann natürlich eine höher Priorität haben als die font-family die nur allgemein body weit zugeordnet wird. Dafür müsste man sich einfach mal die CSS Infos zu einer Headline mit den Entwicklerwerkzeugen des Browsers anschauen, aus welcher Datei/Zeile/Herkunft die font-family kommt.

Dann passiert garnichts mehr... es bleibt beim "alten"

 

[Petermeter]

Dann passiert garnichts mehr... es bleibt beim "alten"

In den Variablen (theme Editor) habe ich doch die "Fonts"...

Jetzt habe ich schon mit try and error versucht dort etwas zu änder es tut sich aber nichts... ( Ich denke mal da sollte man doch was ändern können oder interpretiere ich das jetzt falsch?)
Für mich sieht das sehr "Global" aus. Vorallem weil dann im weiteren Code die headings etc kommen!?






und das habe ich auch noch im Code wie soeben gesehen,,,,

 

[apalusa]

In den Variablen (theme Editor) habe ich doch die "Fonts"...

Da ich selbst bisher noch nie Global die Schrift ändern wollte war mir tatsächlich nicht bekannt dass die im Theme Editor vorhanden sind. Aber in dem Fall sollte es ja genügen den Font Namen dort zu hinterlegen, ohne das man die Styles des body überschreiben muss.

Auf dem Bild ist aber der erste Eintrag bei der font-family einfach nur ' ', wurde das für den screenshot so geändert? Dort sollte ja eigentlich der Fontname hinterlegt sein.
Voraussetzung hierfür ist natürlich dass die Schriftart wie in vorherigen Beiträgen erklärt auch auf den Server geladen und der Pfad hinterlegt wurde, damit der Shop auch weiß wo er die findet. Wenn es aber bereits teilweise funktioniert hat sollte dies ja eigentlich schon korrekt erledigt worden sein.

 

[Petermeter]

Da ich selbst bisher noch nie Global die Schrift ändern wollte war mir tatsächlich nicht bekannt dass die im Theme Editor vorhanden sind. Aber in dem Fall sollte es ja genügen den Font Namen dort zu hinterlegen, ohne das man die Styles des body überschreiben muss.

Auf dem Bild ist aber der erste Eintrag bei der font-family einfach nur ' ', wurde das für den screenshot so geändert? Dort sollte ja eigentlich der Fontname hinterlegt sein.
Voraussetzung hierfür ist natürlich dass die Schriftart wie in vorherigen Beiträgen erklärt auch auf den Server geladen und der Pfad hinterlegt wurde, damit der Shop auch weiß wo er die findet. Wenn es aber bereits teilweise funktioniert hat sollte dies ja eigentlich schon korrekt erledigt worden sein.

Schirft ist hinterlegt und hochgeladen ins child.
Ich habe es jetzt so abgeändert aber leider immer noch ohne Erfolg... Ich muss irgenden ein kleinigkeit übersehen!°?

 

[apalusa]

Ich muss irgenden ein kleinigkeit übersehen

Also mein Wissen kommt hier an die Grenzen, ich selbst kann lediglich nur noch einen Punkt anmerken, sollte der aber auch nicht weiterhelfen wirst du auf jemanden mit mehr Verständnis davon warten müssen.

Als Fontname hast du den Dateinamen ohne Dateiendung angegeben. Ist das aber der tatsächliche Name? Ich würde fast vermuten dass der Bindestrich zum Beispiel nicht Teil des Namens ist. Installier die Schriftart mal lokal auf deinem PC und öffne dann z.B. Word und such die Schriftart da heraus. Das was du dort findest sollte in 99% der Fälle der Name sein den du auch in der Datei angeben musst. Die Infos hierzu sollten aber auch beim Download der Schriftart auf der entsprechenden Seite dabei gewesen sein wie in diesem Beitrag unter Punkt 3 erwähnt: https://forum.jtl-software.de/threa...zu-farben-und-schriftarten.127944/post-952117