Beantwortet NOVA Template Farbe ändern mit Theme Editor

  • JTL-Connect 2022: Ihr habt noch kein Ticket? Jetzt schnell sichern! Die PreConnect ist bereits ausgebucht, auch für die After-Show-Party auf der Ocean Diva sind nur noch wenige Plätze verfügbar! HIER geht es zum Ticketverkauf

  • Das Stable Release von JTL-Wawi 1.6 ist startklar: HIER gehts zum Forenbeitrag

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.746
457
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: 166
  • Bild 3.png
    Bild 3.png
    40 KB · Aufrufe: 171
  • Bild 4.png
    Bild 4.png
    41 KB · Aufrufe: 143

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.746
457
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: 164

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

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.746
457
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: 31

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 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 angezeigte Tiefe des Kategoriebaums im Megamenü anpassen im NOVA Template Templates für JTL-Shop 0
Neu Update JTL 5.03 auf JTL 5.1.X möglich ohne Template-Änderungen (Nova)? Installation / Updates von JTL-Shop 0
NOVA-Template || Kategorie auf der Startseite Einrichtung JTL-Shop5 0
Neu Nova Template Product Stream Slider Bug JTL-Shop - Fehler und Bugs 4
NOVA-Template zeigt weiße Seite (HTTP 500) nach Upgrade von 4 auf 5 Upgrade JTL-Shop4 auf JTL-Shop5 1
Neu Nova Template Neue Artikel / Top Artikel / Sonderangebote anzeigen Templates für JTL-Shop 1
Neu php error log wg nova template Installation / Updates von JTL-Shop 0
Neu Core-Variablen im Nova Child Template verwenden Allgemeine Fragen zu JTL-Shop 7
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 NOVA - Produktdetail Vorschaubilder verschieben bei mouseover JTL-Shop - Fehler und Bugs 0
Neu Nova - Wie passe ich die Scrollbar an? Templates für JTL-Shop 0
Neu Lagerampel und Anzeige von MwSt. in Artikelübersicht - NOVA Betrieb / Pflege von JTL-Shop 3
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 Aviator Checkout Template Templates für JTL-Shop 1
Neu Top Bar JTL5 Template Templates für JTL-Shop 1
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
Neu Variationskombinationen Artikel mit Farbe und Menge für ebay User helfen Usern - Fragen zu JTL-Wawi 0

Ähnliche Themen