Neu NOVA - CSS Anpassung Text Variationsname

[LEDlexx]

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

 

[MHillmann]

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:

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

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:

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

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.

 

[A-Z Autoteile]

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]

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")



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]

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:

.yousave {
    color: pink;
    font-weight: 800;
}

Viele Grüße
Michael

 

[A-Z Autoteile]

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:

.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