FROM CACHE - de_header

Im Header Schrift ändern

Joschi
Entdecker
68 0 5

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

 

CSS Code.JPGHeader.JPG

15 ANTWORTEN 15

Finer
Shopify Expert
2071 438 742

@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.
} 
- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Joschi
Entdecker
68 0 5

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
Shopify Expert
2071 438 742

@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.
}

 

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Joschi
Entdecker
68 0 5

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
Shopify Expert
2071 438 742

@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.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Joschi
Entdecker
68 0 5

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

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

Joschi
Entdecker
68 0 5

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
Entdecker
68 0 5

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

Oder wenn Finer keine Zeit hat jemand anders?

 

 

Finer
Shopify Expert
2071 438 742

@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;
}

 

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Joschi
Entdecker
68 0 5

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
Entdecker
68 0 5

@Finerich 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
Shopify Expert
2071 438 742

@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.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Joschi
Entdecker
68 0 5

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:

 

Header Theme anpassen.JPG

 

Hier die Online Vorschau:

 

Header Vorschau.JPG

 

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

Finer
Shopify Expert
2071 438 742

@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?

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Joschi
Entdecker
68 0 5

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.