Beantwortet NOVA Template Farbe ändern mit Theme Editor

Andreas K.

Neues Mitglied
11. Oktober 2020
7
1
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.581
381
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
1
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: 121
  • Bild 3.png
    Bild 3.png
    40 KB · Aufrufe: 122
  • Bild 4.png
    Bild 4.png
    41 KB · Aufrufe: 104

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.581
381
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: 127

Andreas K.

Neues Mitglied
11. Oktober 2020
7
1
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: 109

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.581
381
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
1
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.
 

Andreas K.

Neues Mitglied
11. Oktober 2020
7
1
Gelöst
Mein Browser will das nicht aktualisieren trotz Strg + F5.
Habe einen anderen Browser installiert und siehe da es wird alles richtig angezeigt.
 
  • Gefällt mir
Reaktionen: FPrüfer

Josch41

Aktives Mitglied
29. Juni 2015
97
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: 2
Ähnliche Themen
Titel Forum Antworten Datum
Neu Animations Balken im Nova Template Farbe ändern Templates für JTL-Shop 2
Neu NOVA Template Preisspannen Slider noUI-touch-area sekundäre Farbe ändern Templates für JTL-Shop 2
Neu Last Seen Box unter linker Seitenleiste wegbekommen | Nova Template Templates für JTL-Shop 2
Neu Shortdesc Description entfernen | Nova Template Templates für JTL-Shop 2
Neu NOVA Template Weiß nach Update 4.06 => 5 Installation / Updates von JTL-Shop 7
Nova Template - Artikelübersicht - Verfügbarkeit anzeigen Einrichtung JTL-Shop5 3
Neu Bestand pro Lager bei mehrern Lägern ausblenden im Nova Template nur Ampel anzeigen in Artikelbeschreibung Templates für JTL-Shop 2
Neu NOVA Template Artikelsticker ändern Templates für JTL-Shop 6
Weiße Seite beim NOVA-Template, EVO geht Upgrade JTL-Shop4 auf JTL-Shop5 2
Neu JTL 5 Shop -> Slick Slider auf der Startseite im Nova Template verändern Templates für JTL-Shop 2
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 5
Neu NOVA Template linke Navigation? 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 EU Energielabel Nova Template Templates für JTL-Shop 2
Neu NOVA Template - Megamenu Oberkategorie Link entfernen Templates für JTL-Shop 2
Neu NOVA Template - dunkler Hintergrund bei ausklappendem Megamenu Templates für JTL-Shop 4
Neu Beschreibung Unter Unterkategorie Nova Templates für JTL-Shop 0
Neu Responsivität einer Custom Header - Box - sowie des linken Logos | Nova Child Templates für JTL-Shop 1
Neu [SHOP5][NOVA] Filtersuchfeld filtert nur sichtbare Merkmale JTL-Shop - Fehler und Bugs 1
Neu NOVA - welche css Variable für Hintergrund? Installation / Updates von JTL-Shop 1
Inhalte auf der Startseite bearbeiten im Nova Tenmlate Einrichtung JTL-Shop5 2
Neu JTL Shop 5 - Anpassung Nova Child Theme - Benachrichtigungsfunktion Dienstleistung, Jobs und Ähnliches 0
Neu Alternative für NOVA wie die freien Evo Themes von bootswatch.com? Templates für JTL-Shop 1
Neu Nova vs Drittanbieter Templates? Templates für JTL-Shop 9
Neu nova update nach Shop Update 5.1.1 Templates für JTL-Shop 1
Neu Shop 5.1.1 > Nova > Bestseller | Logo Templates für JTL-Shop 7
Shop 5: Nova / Lieferzeitenangabe für Kinderartikel passt nicht Einrichtung JTL-Shop5 0
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: 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 NOVA Farbe untere Footer-Leiste Templates für JTL-Shop 3
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 Shop5 NOVA - SWATCH-Image - PopUp deaktivieren Templates für JTL-Shop 5
Neu Shop5 NOVA - Galerieansicht Bilder vergrößern Templates für JTL-Shop 2
Neu mehr als 12 Bilder im Evo Template möglich? eBay-Designvorlagen - Ideen, Lob und Kritik 1
Neu Child Template HTML Code mit CSS Dateien anzeigen lassen Templates für JTL-Shop 3
Neu Im Template per 'if' einen Wert aus einem Array auslesen User helfen Usern - Fragen zu JTL-Wawi 1
Neu Shop 5.1.1 und Evo-Template 5.1.0: Fehlerhafte Bildergalerie- und Preisaktualisierung bei Variationen in Artikel-Übersicht und Artikel-Detailseite JTL-Shop - Fehler und Bugs 3
Neu Kritisch: JTL Shop 5.1 Bugs: Template: blackline, Demo-Dateien, Composer und co. JTL-Shop - Fehler und Bugs 22
Neu Mod Pagespeed webp konvertiung zerschiesst template Technische Fragen zu Plugins und Templates 0
Neu Bug: Template Datein des Child-Templates werden nicht bei include anweisungen geladen JTL-Shop - Fehler und Bugs 2

Ähnliche Themen