Im Header Schrift ändern

[Joschi]

Hallo

Ich nutze das Ride Theme und möchte gerne das die Schrift im Header komplett eine Großschrift ist. Im CSS Code habe ich das unter index.json bereits gefunden. Die Schrift der Button “Home, Katalog, Hoodies, T-Shirts, Jacken, Hosen, Oversided und Kontakt” möchte ich gerne ändern. Kann ich im Code einfach die Wörter komplett ändern, also alles in groß schreiben oder muss ich was beachten? Zudem finde ich "Home, Katalog und Kontakt nicht im Code wo finde ich das?

Weiter ist die Schrift aktuell im Header grau, ich möchte die Schrift aber schwarz haben, wo kann ich das ändern?

Vielen Dank

Joschi

[Finer]

@Joschi Ich glaube, Du verwechselst das .json Format mit einem .css Format.

Du kannst natürlich die Navigation über CSS anpassen. Aber es besteht auch die Möglichkeit, einen Liquid-Filter zu verwenden.

Wenn Du in der header.liquid Datei bist, musst Du nach folgendem suchen:

{{ link.title | escape }}

und

{{ childlink.title | escape }}

und

{{ grandchildlink.title | escape }}

und durch Folgendes ersetzen:

{{ link.title | uppercase | escape }}

und

{{ childlink.title | uppercase | escape }}

und

{{ grandchildlink.title | uppercase | escape }}

Um die Hintergrundfarbe des Header anzupassen, kannst Du in der base.css Folgendes angeben:

.header {
background-color: #f1f1f1!important; <---den Hex-Wert kannst Du nach Wunsch anpassen.
}

[Joschi]

Hallo @Finer vielen Dank für deine Antowrt.

Ja kann sein dann habe ich das verwechselt, bin mit den Codes nicht ganz so vertraut sorry.

Und wenn wenn deinen obigen Codes austausche habe ich im Header von allem Großbuchstaben?

Du schreibst Headerhintergund anpassen, das möchte ich nicht, ich wollte die Schrift welche aktuell grau ist in schwarz haben, aber nur von der Navileiste

[Finer]

@Joschi korrekt der Liquid filter macht aus einem Text Großbuchstaben. Hier ein Link zu der Beschreibung des Filters:

https://shopify.dev/api/liquid/filters/upcase

Hab aber gesehen das es “upcase” statt “uppercase” heißt …

Auch wenn “uppercase” funktioniert, würde ich dir raten “upcase” zu verwenden.

Was die Schrift betrifft kannst du folgenden CSS-Klasse verwenden:

.header__menu-item {
 color: #b3b3b3!important; <-- Hex-Wert kann angepasst werden.
}

[Joschi]

Ok Danke @Finer

Ich habe gerade gesehen das es im Code mehrere dieser Codes sind die gleich sind muss ich die alle austauschen? Oder nur in einem bestimmten Bereich? Also link.title gibt es z.B. öffter und auch Childlink.title

{{ link.title | escape }}

und

{{ childlink.title | escape }}

und

{{ grandchildlink.title | escape }}

[Finer]

@Joschi ja, das hängt damit zusammen, dass es auch ein mobiles Menü, eines ohne Unterkategorien und eines mit Unterkategorien gibt. Sofern alle Links im Menü groß sein sollen, musst du alle ersetzen.

[Joschi]

@Finer Super danke. Das mit der Schrift größer hat schonmal geklappt.

Wo muss ich denn den Code für die Schriftfarbe einsetzen?

[Joschi]

Und um das ganze dann auch schon fast abzuschließen, noch eine Frage.

Wo kann ich die Schriftgröße der Navigation ändern und auf Fett setzen?

Ob ich das anwende müsste ich dann schauen wie es aussieht.

[Joschi]

@Finer wärst du so nett und könntest mir noch die Fragen beantworten?

Oder wenn Finer keine Zeit hat jemand anders?

[Finer]

@Joschi , das kannst du in der base.css einsetzen.

Wenn es fett werden soll, kannst du noch den Parameter “font-weight:700;” hinzufügen:

.header__menu-item {
 color: #b3b3b3!important; <-- Hex-Wert kann angepasst werden.
 font-weight:700;
}

[Joschi]

Hallo @Finer

Vielen Dank für deine Antwort. OK werde ich mal versuchen, wo genau muss er dort eingesetzt werden? Am Ende des gesamten Code vom base.css?

Und die Schriftgröße ändere wie?

Tut mir leid ich bin in dem ganzen noch nicht ganz firm drin und bevor ich da was zerschieße frage ich lieber genauer nach.

[Joschi]

@Finer ich habe die Stelle im Code gefunden und eingebaut. Die Farbe schwarz ist jetzt in der Schrift der Navigation drin, nur Fett scheint nicht zu gehen, habe aber bereits im Netz gelesen das manche Fonts nur bis 700 unterstützen. Denke das könnte damit zusammen hängen?

Jetzt würde ich nur noch gerne die Schrift minimal größer machen, welchen Code brauche ich dafür? Und setze ich ihn an gleicher Stelle nur dadrunter?

Vielen Dank danach wäre das Thema auch erledigt.

[Finer]

@Joschi Das mit dem “700” ist korrekt. Wenn die ausgewählte Schrift das unterstützt, sollte das kein Problem sein.

Die Schriftgröße kannst du in der gleichen CSS-Klasse per “font-size:15px;” definieren:

.header__menu-item {
 color: #b3b3b3!important; <-- Hex-Wert kann angepasst werden.
 font-weight:700;
 font-size:15px; <---Größe kann angepasst werden.
}

Diesen Abschnitt kannst du in der base.css ganz unten einfügen.

Du musst ihn nicht ersetzen, da bei CSS immer die “letzte” Definition die ist, die angewandt wird.

[Joschi]

Hallo @Finer super vielen dank und hoffe du hattest schöne Feiertage.

Code ist eingebaut und größe angepasst, noch eine Frage dazu.

Bei Theme anpassen sieht die Menü Schrift viel größer aus als bei Online Vorschau, woran liegt das und an welchen der beiden muss ich mich denn halten?

Hier die Themeansicht:

Hier die Online Vorschau:

Das kann man jetzt auf den Bildern schlecht erkennen, aber wie gesagt ist die Headerschrift im Theme anpassenbereich größer

[Finer]

@Joschi ohne konkrete Werte (Schriftgröße der beiden Versionen) kann ich leider keine Aussage treffen. Grundsätzlich sollte es aber keinen Unterschied geben.

Auf den ersten Blick sieht die Größe identisch aus. Hast du einen Link zu deinem Shop?

[Joschi]

Hallo @Finer Mein Shop ist noch nicht Online die Schriftgrößen unterschied sehe ich zwischen der Shoponline Vorschau und Theme anpassen bin erscheint ja rechts auch eine Vorschau.