Beantwortet NOVA Template Farbe ändern mit Theme Editor

Andreas K.

Neues Mitglied
11. Oktober 2020
7
2
Guten Abend,
ich nutze schon seid längere Zeit JTL-Wawi und möchte nun den JTL- Shop Konfigurieren.
Dies läuft auch alles soweit bis auf die Änderungen der Gelben farbe im Nova Template.
Ich habe als erstes versucht mit der Änderung der variable "primary" im Theme Editor die Farbe zu ändern.
Jedoch wird nur ein Teil der Schrift in der neuen Farbe dargestellt.
Hier im Forum wird noch auf der "costumer.css" verwiesen.
Das man dort einzelne Button Farben/Größen/ etc. ändern kann.
Dies klappt bei mir noch nicht so richtig aber das liegt wahrscheinlich an meinen begrenzten CSS Kenntnissen.

Mich würden interessieren ob es eine einfache Möglichkeit gibt die Farbe Gelb (#F8BF00) durch eine andere Farbe zu ersetzen?
(Und das in allen Bereichen der Homepage)Bild 1.png
 

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.775
465
Halle
Hallo Andreas,
es gibt mehrere Wege die Primärfarbe zu ändern. Der einfachste ist jedoch der bereits von dir gewählte über den Theme-Editor. Nach Aufruf des Theme-Editors wählst du dein Theme aus. Für unser Standard Child-Template novachild wäre das my-nova. In der linken Ansicht wählst du dann die Datei _variables.scss aus. In der Hauptansicht des Editors erhälst du dann den Inhalt der Datei. Der sollte aktuell so aussehen:
SCSS:
//
// Platz für eigene Variablen in SCSS-Notation
//
// Alle Änderungen hier müssen anschließend mit einem SCSS-Compiler
// (z.B. dem JTL-Theme-Editor Plugin) nach my-nova.css kompiliert werden
// --------------------------------------------------

// my-nova Theme
// Hier können alle Variablen notiert werden, die nur Auswirkungen auf dieses Theme haben
// -------------------Beginn eigene Variablen----------------------------------











// -------------------Ende eigene Variablen----------------------------------

// Lädt clear-Variablen
@import '../../../../NOVA/themes/clear/sass/variables';

// passt die Pfade an
$nova-theme-path:                   "../../../NOVA/themes";
$fa-font-path:                      "../../../NOVA/themes/base/fontawesome/webfonts";
In dem Bereich für eigene Variablen kannst du jetzt die Primärfarbe umdefinieren. Als Beispiel nehme ich mal ein zartes Grün #BECD56.
SCSS:
//
// Platz für eigene Variablen in SCSS-Notation
//
// Alle Änderungen hier müssen anschließend mit einem SCSS-Compiler
// (z.B. dem JTL-Theme-Editor Plugin) nach my-nova.css kompiliert werden
// --------------------------------------------------

// my-nova Theme
// Hier können alle Variablen notiert werden, die nur Auswirkungen auf dieses Theme haben
// -------------------Beginn eigene Variablen----------------------------------

$primary:                           #BECD56;









// -------------------Ende eigene Variablen----------------------------------

// Lädt clear-Variablen
@import '../../../../NOVA/themes/clear/sass/variables';

// passt die Pfade an
$nova-theme-path:                   "../../../NOVA/themes";
$fa-font-path:                      "../../../NOVA/themes/base/fontawesome/webfonts";
Nach einem Klick auf "Datei speichern" und anschließend rechts oben auf "Theme kompilieren" wird das css für das Theme komplett neu erstellt. Nach einem harten Reload im Browser (ggfs. auch den Browser- Cache löschen) sollten dir jetzt alle Elemente die vorher Gelb waren in einem zarten Grün angezeigt werden.
Wichtig ist, dass der Webserver dein Theme-Verzeichnis beschreiben kann. Wichtig ist auch, dass du die geänderte Variable VOR dem @import der Original-Variablen definierst, da du sonst zwar die Primärfarbe überschreibst, aber alle Variablen die darauf basieren behalten das ursprüngliche Gelb bei.
 

Andreas K.

Neues Mitglied
11. Oktober 2020
7
2
Danke für die schnelle Antwort.
Genau so habe ich es gemacht.
Nur das sich nicht alles in der Farbe ändert. Rechte habe ich auch nochmal überprüft.
Wie man auf dem "Bild 2" sehen kann werden die Kategorien, wenn ich da mit meinen Mauszeiger rüber fahre, Türkis.
Jedoch bleiben die Balken Gelb und z.B. "Verfügbarkeit" wird auch Gelb wenn ich da mit meinen Mauszeiger rüber fahre.
Im Browser kann ich die Farbe temporär ändern. Ich verstehe einfach nicht woher er die Farbe "F8BF00" (Gelb) her bekommt.
Weil auch im Browser wird Primary als Türkis angzeigt. (siehe Bild 3 und 4)
 

Anhänge

  • Bild 2.png
    Bild 2.png
    12,6 KB · Aufrufe: 187
  • Bild 3.png
    Bild 3.png
    40 KB · Aufrufe: 194
  • Bild 4.png
    Bild 4.png
    41 KB · Aufrufe: 164

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.775
465
Halle
Bei mir funktioniert mein geschilderter Ablauf. (siehe Bild)
Welche Basis hast du für dein Child-Template verwendet? Wenn du unsere Child-Vorlage verwendet hast, welche Version verwendest du da?
 

Anhänge

  • primary_color.jpg
    primary_color.jpg
    27,2 KB · Aufrufe: 184

Andreas K.

Neues Mitglied
11. Oktober 2020
7
2
So hätte ich es auch gerne 😉
Ich verwende das NOVAChild Version: 5.0.0-rc.3 ‐ 5.1.0. Siehe Anhang.
 

Anhänge

  • Bild 5.png
    Bild 5.png
    70,7 KB · Aufrufe: 151

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.775
465
Halle
Prüf mal bitte per FTP ob sich die Datei /templates/novachild/themes/my-nova/my-nova.css ändert, wenn du das Theme neu Kompilierst. (Namen ggfs. an dein konkretes Child-Template anpassen) Ansonsten wäre auch ein Link schön, unter dem man sich das mal anschauen kann. Wenn das nicht öffentlich geht, kannst du mir auch eine PN für Zugangsdaten schreiben.
 
  • Gefällt mir
Reaktionen: Andreas K.

Andreas K.

Neues Mitglied
11. Oktober 2020
7
2
my-nova.css ändert sich.
Das habe ich einmal in der Datei überprüft und man kann es am aktuellen Zeitstempel erkennen.
Zugangsdaten habe ich dir gesendet.
 

Josch41

Aktives Mitglied
29. Juni 2015
98
5
Benutze zum stylen besser Chrome.
Rechtsklick Untersuchen an.
Dann kannst du mit Rechtsklick auf den Aktualisieren Button per Klick den Browsercache Leeren und Aktualisieren.
 

biogoods

Neues Mitglied
19. Oktober 2021
1
0
Hallo,
ich habe ein ähnliches Problem wie Andreas K. die $primary Farbe ändert sich nicht überall, sondern nur bei den Produktlinks. Außerdem kommt folgende Fehlermeldung beim Kompilieren der _variables.scss Datei (siehe Anhang). Ich verwende NOVAChild 5.1.1.
 

Anhänge

  • NOVAChild_Error.png
    NOVAChild_Error.png
    246 KB · Aufrufe: 37

Weedmaster-Flash

Gut bekanntes Mitglied
5. September 2007
192
4
Schleswig-Holstein
Hallo,
ich bin auch genau so vorgegangen. Bei allen anderen Shops (5) wo ich das gemacht habe ging dann auch alles. Jetzt ändert sich nichts. Die Farbe bleibt auf gelb.
Hat jemand einen Tipp? Was da nicht stimmt und wie ich das ändern kann?
Danke
 

Weedmaster-Flash

Gut bekanntes Mitglied
5. September 2007
192
4
Schleswig-Holstein
Ähnliche Themen
Titel Forum Antworten Datum
Neu Nova Template - Voller Zoom endlich verfügbar? Templates für JTL-Shop 1
Neu Nova Template zerschossen nach Update? Linke Seitenleiste geht über die komplette Seite. Templates für JTL-Shop 2
Neu mega menu umbauen - was ist was? (NOVA-Template) Templates für JTL-Shop 5
Neu Nova-Template, JTL-Shop5: Suche mit Umlauten fehlerhaft JTL-Shop - Fehler und Bugs 3
Neu JTL SHOP 5 NOVA TEMPLATE Telefon Kamera barcodes scannen Allgemeine Fragen zu JTL-Shop 0
Neu Suche 2 Parameter im NOVA (Child) Template vom JTL Shop 5 Technische Fragen zu Plugins und Templates 4
Neu Probleme bei der Preisanzeige eines Artikels beim JTL Shop 5 mit Nova Template Technische Fragen zu Plugins und Templates 12
Neu Nova Template Google Fonts lokal? Allgemeine Fragen zu JTL-Shop 6
Neu Tipps für die Ladbarkeit JTL Shop 5 NOVA? JTL-Shop - Ideen, Lob und Kritik 2
Neu JTL Shop mit Nova -Sprachwechsel soooo buggy Templates für JTL-Shop 6
Neu Nova: 1,8 Mio Shop5 Seiten bei Google nicht indexiert ??!!!! :O Templates für JTL-Shop 11
Neu Nova Header Farbe geändert - danach Mega Menü leer Templates für JTL-Shop 2
Neu Favicon unter Einstellungen NOVA hochgeladen ohne Erfolg Allgemeine Fragen zu JTL-Shop 4
Neu Trusted Shops Excellence in Shop 5 (Nova) Einbinden Allgemeine Fragen zu JTL-Shop 0
Neu Nova OPC "Default Area" Anzeige auf jeder Seite? Technische Fragen zu Plugins und Templates 3
Neu "Eigene Box" im NOVA Child via Bootstrap oder info.xml registrieren? Technische Fragen zu Plugins und Templates 2
Neu HAN (Hersteller Nr) im Template anzeigen Technische Fragen zu Plugins und Templates 0
Neu Child Template erstellen für Laufband oberhalb des Headers Technische Fragen zu Plugins und Templates 0
Neu Kann man das NOVAChild Template updaten? Templates für JTL-Shop 7
Neu Shop 5 Evo-Child Template Probleme Allgemeine Fragen zu JTL-Shop 1
Consent Manager Evo-Child Template - Bugs, Fehler und Co. Einrichtung JTL-Shop5 0
Neu Eigene Einstellungen via Plugin hinterlegen und im Template auswerten Technische Fragen zu Plugins und Templates 3
Neu Template für 2 shops Templates für JTL-Shop 0
Neu Mobile Template: NEU und SALE in Menü unterbringen? Templates für JTL-Shop 4
Neu Nur Primary Colour und etwas CSS ändern - Eigenes Theme oder Child Template? Templates für JTL-Shop 1
Neu Wo sind hochgelandene Template-Dateien? Templates für JTL-Shop 1
Neu Shop 5 Evo Template Paginierung Ändern Technische Fragen zu Plugins und Templates 1
Neu Template Cache deaktivieren Templates für JTL-Shop 1
Gelöst Packtisch+ scannt den falschen Artikel und zeigt die falsche Farbe an [WAWI-65811] JTL-WMS / JTL-Packtisch+ - Fehler und Bugs 3
Neu Bekleidung kategoriespezifische Felder keine Farbe kaufland.de - Anbindung (SCX) 1
Neu Farbe des Menu ändern Allgemeine Fragen zu JTL-Shop 0
Neu Wo kann ich die Farbe anpassen? Templates für JTL-Shop 2

Ähnliche Themen