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.750
460
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: 174
  • Bild 3.png
    Bild 3.png
    40 KB · Aufrufe: 180
  • Bild 4.png
    Bild 4.png
    41 KB · Aufrufe: 151

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.750
460
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: 177

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

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.750
460
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: 34

Weedmaster-Flash

Gut bekanntes Mitglied
5. September 2007
174
2
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
174
2
Schleswig-Holstein
Ähnliche Themen
Titel Forum Antworten Datum
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 Nova Child Template-Version Verständnisfrage Templates für JTL-Shop 2
Neu Nova Template: Mega Menu Darstellung der Unterkategorien Technische Fragen zu Plugins und Templates 5
Neu NOVA Template Darstellung Text und Artikel Templates für JTL-Shop 2
Neu NOVA Template Theme mit komplett schwarzem Hintergrund - wie ansetzen? Templates für JTL-Shop 3
Neu Nova Template: Newsletter-Anmeldung im Footer anders anordnen Templates für JTL-Shop 1
Neu Nova-Template: Logo bzw. Header in groß und klein beim Scrollen (analog Evo-Template) Technische Fragen zu Plugins und Templates 5
Neu Eigene Smarty-Funktion - NOVA-Template Ausgabe Templates für JTL-Shop 0
Neu Schriftfarbe Link in Nova Template Body verändern Technische Fragen zu Plugins und Templates 2
Neu Nova Template Mega Menue Templates für JTL-Shop 6
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 NOVA - Sonderangebote werden nicht angezeigt Allgemeine Fragen zu JTL-Shop 0
Neu Ein regionaler Geschenk Store konnte mit Shop5 und NOVA eröffnet werden. Shops stellen sich vor 6
Neu Lizenzproblem bei eigenem Nova Child nach Update auf 5.1.4 JTL-Shop - Fehler und Bugs 0
Neu Update 5.1.1 --> 5.1.4: Fehler im Bestellvorgang "unknown tag 'getCountry'" (inc_billing_address_form.tpl) (NOVA) Installation / Updates von JTL-Shop 1
Neu Nova Startseite doppelt nach Zurücksetzen Templates für JTL-Shop 2
Neu Nova wurde nicht für den 5er Shop entwickelt? JTL-Shop - Fehler und Bugs 4
Neu Mitlaufende Artikeldetail-Bilder im Nova per CSS? Templates für JTL-Shop 4
Neu PayPal Checkout mit NOVA: Darstellung Technische Fragen zu Plugins und Templates 1
Neu NOVA Theme Megamenu ohne Dropdown Templates für JTL-Shop 3
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
Neu Einsteigerfragen Plugin Entwicklung bzw. Ausgabe im Template Technische Fragen zu Plugins und Templates 7
PayPal beim template Evo funktioniert nicht Einrichtung JTL-Shop5 2
Neu Nove-Template: Schattensaum des Headers entfernen Templates für JTL-Shop 2
Datenbank Update: Cannot load template-no template Upgrade JTL-Shop4 auf JTL-Shop5 1
Neu Automatisch Objekt und Template Cache leeren Betrieb / Pflege von JTL-Shop 0
Neu EVO Template Fehler bei abgeschalteten Kategorien im Megamenü Templates für JTL-Shop 3
Neu paypal plugin 2.1.1 für shop 5.1.2 mit evo Template Plugins für JTL-Shop 4
Neu Wo kann ich die Farbe anpassen? Templates für JTL-Shop 2
Farbe der productbox ändern Einrichtung JTL-Shop5 4
Fehler eBay Vorlage erstellen bei der Kategorie 1 Abteilung / Farbe / Stil es können nicht weniger als 1 Werte ausgewählt werden eBay-Anbindung - Fehler und Bugs 8
Neu Fehler eBay Vorlage erstellen bei der Kategorie 1 Abteilung / Farbe / Stil es können nicht weniger als 1 Werte ausgewählt werden JTL-Shop - Fehler und Bugs 3

Ähnliche Themen