Neu NOVA - CSS Anpassung Text Variationsname

LEDlexx

Mitglied
15. November 2019
42
4
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: 13

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
710
186
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

Mitglied
30. September 2020
41
6
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
710
186
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

Mitglied
30. September 2020
41
6
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

Mitglied
30. September 2020
41
6
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
710
186
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

Mitglied
30. September 2020
41
6
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
Titel Forum Antworten Datum
Neu Template Anpassung im Child Theme via JTL Theme Editor -> my-nova.scss Templates für JTL-Shop 0
Neu NOVA Template Farbänderung in verschiedenen Bereichen Templates für JTL-Shop 5
Neu JTL SHOP 5.0.1 / NOVA-Template UVP/Rabattanzeige Artikelübersichten Allgemeine Fragen zu JTL-Shop 5
Neu JTL5.1.1 Nova-Template mit Child Mobiles Menü Templates für JTL-Shop 6
Neu Template Nova/layout/header_nav_search.tpl <li>? JTL-Shop - Fehler und Bugs 3
Beantwortet Einstellungen Megamenü Nova Einrichtung JTL-Shop5 2
Neu Slider verkleinern im NOVA Templates für JTL-Shop 3
Neu Header Box im Shop 5 Nova / Evo.. Templates für JTL-Shop 3
Neu NOVA Template linke Navigation? Templates für JTL-Shop 2
Neu Animations Balken im Nova Template Farbe ändern Templates für JTL-Shop 2
Neu NOVA Template lässt sich nicht aktivieren JTL-Shop - Fehler und Bugs 4
Neu Shop 5 NOVA Template - Menü ohne Kategorien Allgemeine Fragen zu JTL-Shop 4
Neu NOVA: Hauptmenü Dropdown Anpassungen Templates für JTL-Shop 2
Neu Nova Child wie _buttons.scss bearbeiten? Templates für JTL-Shop 1
Neu Produktbilder-Slider soll vertikal im Nova sein Templates für JTL-Shop 2
Neu EU Energielabel Nova Template Templates für JTL-Shop 2
Neu NOVA Farbe untere Footer-Leiste Templates für JTL-Shop 3
Neu NOVA Template - Megamenu Oberkategorie Link entfernen Templates für JTL-Shop 2
Neu NOVA > Cache Dauer für Browsercache einstellen Templates für JTL-Shop 2
Neu NOVA Child: Artikeldetailseite Tabs werden untereinander dargestellt anstatt zu faden Templates für JTL-Shop 2
Neu NOVA Template - dunkler Hintergrund bei ausklappendem Megamenu Templates für JTL-Shop 4
Neu Shop5 NOVA - SWATCH-Image - PopUp deaktivieren Templates für JTL-Shop 5
Neu NOVA Template Preisspannen Slider noUI-touch-area sekundäre Farbe ändern Templates für JTL-Shop 2
Neu Shop5 NOVA - Galerieansicht Bilder vergrößern Templates für JTL-Shop 2
Neu Produktdaten für rich snippets werden von Shop5 (NOVA) nicht geliefert Allgemeine Fragen zu JTL-Shop 1
Neu JTL Shop 5 - Anpassung Nova Child Theme Dienstleistung, Jobs und Ähnliches 0
Neu NOVA Template JTL Shop 5 eigenen Content-Block zwischen Footer und Produktdetailsseiten Technische Fragen zu Plugins und Templates 2
Neu Schriftgröße des Menüs im Nova Child Template vergrößern Templates für JTL-Shop 2
Neu Nova Child Theme: Atikel Name in downloads.tpl abfragen? Technische Fragen zu Plugins und Templates 4
Neu Nova Midnight, @import in _allstyles falsch? JTL-Shop - Fehler und Bugs 2
Gelöst NOVA Headings plötzlich weiß?! Templates für JTL-Shop 1
JTL Shop 5 Nova Template out of the box nicht responsiv? Einrichtung JTL-Shop5 2
Neu JTL5 + NOVA -> keine linke Seitenleiste für Filter? JTL-Search 0
Neu Template Nova: Grauen Schatten Linie in anderer Farbe Templates für JTL-Shop 2
Neu Textfarbe "Neu hier? Jetzt registrieren!" in NOVA Template ändern Templates für JTL-Shop 2
Neu Ist eine Bildvergößerung im NOVA-Template möglich wie im EVO-Template Technische Fragen zu Plugins und Templates 0
Neu Nova-Template Menü anpassen Templates für JTL-Shop 0
Neu JTL Shop 5 critical CSS 2x identisch im Header vorhanden Templates für JTL-Shop 7
OPC - Rich Text und eigenes CSS Einrichtung JTL-Shop5 1
Neu Migration JTL Shop 4 -> 5 // neue Artikeltexte (wegen geändertem Bootstrap CSS) User helfen Usern - Fragen zu JTL-Wawi 1
Beantwortet custom.css im NovaChild wird nur in <noscript> geladen? Templates für JTL-Shop 1
Neu Jtl Theme Editor lädt CSS nicht Plugins für JTL-Shop 18
Neu CSS Klasse gesucht: Streichpreis bei Sonderpreisen Templates für JTL-Shop 2
Neu css - Comparison Shopping Services Google Allgemeine Fragen zu JTL-Shop 0
Neu Anpassung RSS-Feed | URL Artikelbild Technische Fragen zu Plugins und Templates 1
Neu JTL Shop 5 Preisfarbe und individuelle Anpassung von der "footnote-reference" Allgemeine Fragen zu JTL-Shop 0
Neu Template Anpassung UVP größer als VK Templates für JTL-Shop 1
Neu Verzweiflung :-( - OSS in unserer JTL Wawi + JTL Shop Einrichten und Anpassung vornehmen. Dienstleistung, Jobs und Ähnliches 2

Ähnliche Themen