Neu NOVA - CSS Anpassung Text Variationsname

LEDlexx

Aktives Mitglied
15. November 2019
50
5
Ich würde gerne im Nova Template den Text der Variationsnamen vergrößern und fett machen.

Schrift soll 125% und bold und Farbe #f82f00

Was schreibe ich in die custom.css ?
Und wo genau schiebe ich die custom.css hin, damit es wirkt?

Müsste ja in der base.scss = .variations dt sein - aber sämtliche Änderungen dort werden ignoriert.
https://.../templates/NOVA/themes/base/sass/_base.scss

Habe dort folgendes geändert:

/* VARIATIONS */
.variations {
dt { font-weight: bold; margin-bottom: 8px; }
font-size: 125%;
color: #f82f00;
}

Ich bin am verzweifeln und bitte um Hilfe.

Danke, Axel
 

Anhänge

  • variationsname.jpg
    variationsname.jpg
    80,3 KB · Aufrufe: 40

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
1.315
449
Hallo,

die custom.css für das clear liegt z.B. hier: templates/NOVA/themes/clear/custom.css
Die von dir gewünschten Änderungen funktionieren auch wenn ich sie dort einfüge. Natürlich dann in css Form und nicht in scss Form:
CSS:
.variations dt {
    font-weight: bold; margin-bottom: 8px;
}
.variations {
    font-size: 125%;
    color: #f82f00;
}
Ansonsten kannst du wie immer auch den Theme Editor + Child-Template nehmen. Ich empfehle nie solche Dateien wie die _base.scss im Hauptemplate zu ändern, da diese nach einem Update überschrieben werden.
https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_templates/eigenes_template.html

Viele Grüße
Michael
 

A-Z Autoteile

Aktives Mitglied
30. September 2020
58
12
Hallo,

die custom.css für das clear liegt z.B. hier: templates/NOVA/themes/clear/custom.css
Die von dir gewünschten Änderungen funktionieren auch wenn ich sie dort einfüge. Natürlich dann in css Form und nicht in scss Form:
CSS:
.variations dt {
    font-weight: bold; margin-bottom: 8px;
}
.variations {
    font-size: 125%;
    color: #f82f00;
}
Ansonsten kannst du wie immer auch den Theme Editor + Child-Template nehmen. Ich empfehle nie solche Dateien wie die _base.scss im Hauptemplate zu ändern, da diese nach einem Update überschrieben werden.
https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_templates/eigenes_template.html

Viele Grüße
Michael
Hallo Michael,

du hast angesprochen dass man das auch über Theme Editor + Child-Template machen kann. Kannst du beschreiben was ich da tun muss? Habe bis jetzt im Theme Editor lediglich Variablen wie zBsp die Primärfarbe des Shops geändert.

Danke dir und viele Grüße,
Markus
 

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
1.315
449
Das geht eigentlich genau so, einfach das gewünschte css/scss in die my-nova.scss eintragen, eventuell zusätzlich in die my-nova_crit.scss.

Das kritische css (my-nova_crit) ist das css was direkt geladen wird bevor die Seite gerendert wird, das andere css (my-nova.scss) wird nachgeladen und überschreibt unter Umständen das css der my-nova_crit.scss.
 
  • Gefällt mir
Reaktionen: A-Z Autoteile

A-Z Autoteile

Aktives Mitglied
30. September 2020
58
12
Das geht eigentlich genau so, einfach das gewünschte css/scss in die my-nova.scss eintragen, eventuell zusätzlich in die my-nova_crit.scss.

Das kritische css (my-nova_crit) ist das css was direkt geladen wird bevor die Seite gerendert wird, das andere css (my-nova.scss) wird nachgeladen und überschreibt unter Umständen das css der my-nova_crit.scss.
Das funktioniert hervorragend. Vielen Dank =)

Viele Grüße, Markus
 

A-Z Autoteile

Aktives Mitglied
30. September 2020
58
12
Hallo Michael,

vielen Dank nochmal für deine Hilfe. Kannst du mir eventuell nochmal helfen wenn es nicht zuviel verlangt ist? Wir würden gerne die Schriftfarbe ändern und den Text fett gestalten (Siehe Markierung Screenshot "UVP Ersparnis")

UVP Ersparnis rot.JPG

Ich hab mit jetzt schon nen Wolf gesucht, aber ich weiß nicht wie ich das realisieren kann. Hast du die Lösung?

Vielen Dank im Voraus und ein angenehmes Wochenende =)

Viele Grüße, Markus
 

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
1.315
449
Hallo Markus,

einfach z. B. in Chrome rechts draufklicken und untersuchen, dann siehst du in den Entwicklertools sehr schnell die Klasse an dem Element yousave.
Dann kannst du entsprechend auf diese Klasse stylen:
CSS:
.yousave {
    color: pink;
    font-weight: 800;
}

Viele Grüße
Michael
 
  • Gefällt mir
Reaktionen: A-Z Autoteile

A-Z Autoteile

Aktives Mitglied
30. September 2020
58
12
Hallo Markus,

einfach z. B. in Chrome rechts draufklicken und untersuchen, dann siehst du in den Entwicklertools sehr schnell die Klasse an dem Element yousave.
Dann kannst du entsprechend auf diese Klasse stylen:
CSS:
.yousave {
    color: pink;
    font-weight: 800;
}

Viele Grüße
Michael
Und auch das hat einwandfrei funktioniert. Vielen Dank.

Ich wünsche dir eine angenehme Woche.

Viele Grüße,
Markus
 

Ähnliche Themen