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.878
518
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: 242
  • Bild 3.png
    Bild 3.png
    40 KB · Aufrufe: 250
  • Bild 4.png
    Bild 4.png
    41 KB · Aufrufe: 215

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.878
518
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: 214

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: 175

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.878
518
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

Gut bekanntes Mitglied
29. Juni 2015
105
6
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: 52

Weedmaster-Flash

Gut bekanntes Mitglied
5. September 2007
202
6
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
202
6
Schleswig-Holstein
Ähnliche Themen
Titel Forum Antworten Datum
Neu Nova Template Container in Container Boxed Templates für JTL-Shop 2
Neu JTL-Shop 5 Nova-Template / Darstellung der Produktliste teilweise fehlerhaft JTL-Shop - Fehler und Bugs 1
Neu Vorstellung des Avada-Themes für das NOVA-Template Templates für JTL-Shop 2
Neu Nova Farbe ändern Templates für JTL-Shop 14
Neu Nova - Größe der Slides / Anzahl der Artikel bei Cross Selling Slider anpassen Templates für JTL-Shop 3
Neu Social-Media Icon Nova Templates für JTL-Shop 0
Neu nova änderungen Templates für JTL-Shop 13
Neu NOVA, Logo wird in mobiler Ansicht verzerrt dargestellt Templates für JTL-Shop 0
Neu Template anpassen - parallel zum bestehenden, ohne Aktivierung? Templates für JTL-Shop 2
Beantwortet Werte eigener Kundenfelder im Template anzeigen Allgemeine Fragen zu JTL-Shop 0
Neu Template/ Vorlage für Bestellbestätigung gesucht Templates für JTL-Shop 0
Neu Unterstützung bei JTL5-Shop-Überarbeitung gesucht - Template/Plugin uvm. Dienstleistung, Jobs und Ähnliches 1
Neu JTL Shop Template Domain lösen? Allgemeine Fragen zu JTL-Shop 0
Neu How to maintain session value in the portlet template file Technische Fragen zu Plugins und Templates 0
Neu Custom Template für Custom Artikel mit Plugin? Plugins für JTL-Shop 0
Neu Template für Dateinamen hat nicht den gewünschten Effekt Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 6
Neu Eigenes Template sichern Templates für JTL-Shop 1
Neu Datenbankeintrag mit ausgewähltem Template Templates für JTL-Shop 0
Neu Rechnungsvorlage Farbe Tabellenkopf ändert sich nicht Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Beantwortet Farbe des Auftrages bei Retouren angepasst JTL-Workflows - Ideen, Lob und Kritik 1
Neu Link Farbe im Header sowie Abstand der Box im Footer anpassen Allgemeine Fragen zu JTL-Shop 1

Ähnliche Themen