Neu Wie bekommt man das Theme "Midnight" in das NOVAChild

[sbendel]

Hallo An alle,

Im Template NOVA gibt es eine Auswahl für Themes und dort das Theme "Midnight". Wie implementiere ich dieses Theme "Midnight" richtig in mein NOVAChild ?
Ich habe schon alles versucht und auch einen Teilerfolg gehabt. Allerdings sind die Schriftfarben nicht so wie in Nova. Teilweise sogar so dunkel, dass man sie auf dem dunklen Hintergrund nicht lesen kann.
Außerdem verschwinden die ganzen Icons z.B. das Männchen für den User, aber auch die die Pfeile für rechts, links, hoch, runter usw.

Ich werde noch wahnsinnig

Lieben Gruß an alle

 

[MHillmann]

Hallo @sbendel

Ich nehme an du nutzt schon den Theme Editor? Du müsstest also in der _variables.scss folgende Zeile abändern:

@import '../../../../NOVA/themes/clear/sass/variables';

zu

@import '../../../../NOVA/themes/midnight/sass/variables';

Dazu noch die entsprechenden CSS-Anpassung. Also füge in die my-nova_crit.scss folgendes ein:

#header-top-bar {
  float: right;
  position: sticky;
  top: 0;
  &:not(.is-fullwidth) {
    /* max-width of container-fluid-xl + padding of container-fluid */
    @media (min-width: 103.125rem + 2rem) {
      margin-right: calc((100vw - 103.125rem - 2rem) / 2);
    }
  }
}
.is-checkout {
  .logo-wrapper {
    float: left;
  }
}
.toggler-logo-wrapper {
  float: none;
}

und in die my-nova.scss folgendes:

#footer, header, .fixed-search {
  .form-control {
    border-color: $primary;
  }
}

#footer, header {
  .table-striped {
    color: $header-color;
    tbody tr:nth-of-type(odd) {
      background-color: $bg-main;
    }
    tbody tr:nth-of-type(even) {
      background-color: $bg-main-ligther;
    }
    td {
      border: none;
    }
  }
  .btn-outline-primary {
    color: $header-color;
  }
  .hr-no-top {
    border: none;
  }
  .box-categories, .box-linkgroup {
    .dropdown .collapse {
       background: $footer-bg-color;
     }
   }
}
.btn-animated {
  .btn-outline-primary:hover {
    color: $header-color;
  }
}
.dropdown-item {
  .btn-link {
    color: $dropdown-link-color;
  }
}
.account-icon-dropdown {
  .dropdown-footer {
    background-color: $bg-main-ligther;
    color: $header-color;
  }
}
header {
  @include media-breakpoint-up(lg) {
    border-bottom: 4px solid $primary;
  }
}

#footer {
  .form-control {
    background-color: $footer-bg-color;
    color: $footer-color;
    &::placeholder {
      color: $footer-color;
    }
  }
  .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) {
    label {
      background: $footer-bg-color;
      color: $footer-color;
    }
  }
  a {
    color: $footer-color;
    &:hover:not(.btn) {
      color: $primary;
    }
  }
  .productlist-filter-headline {
    color: $footer-color;
  }
  .newsletter-footer-heading {
    color: $footer-color;
  }
}

Viele Grüße
Michael

 

[sbendel]

Hallo @sbendel

Ich nehme an du nutzt schon den Theme Editor? Du müsstest also in der _variables.scss folgende Zeile abändern:

@import '../../../../NOVA/themes/clear/sass/variables';

zu

@import '../../../../NOVA/themes/midnight/sass/variables';

Dazu noch die entsprechenden CSS-Anpassung. Also füge in die my-nova_crit.scss folgendes ein:

#header-top-bar {
  float: right;
  position: sticky;
  top: 0;
  &:not(.is-fullwidth) {
    /* max-width of container-fluid-xl + padding of container-fluid */
    @media (min-width: 103.125rem + 2rem) {
      margin-right: calc((100vw - 103.125rem - 2rem) / 2);
    }
  }
}
.is-checkout {
  .logo-wrapper {
    float: left;
  }
}
.toggler-logo-wrapper {
  float: none;
}

und in die my-nova.scss folgendes:

#footer, header, .fixed-search {
  .form-control {
    border-color: $primary;
  }
}

#footer, header {
  .table-striped {
    color: $header-color;
    tbody tr:nth-of-type(odd) {
      background-color: $bg-main;
    }
    tbody tr:nth-of-type(even) {
      background-color: $bg-main-ligther;
    }
    td {
      border: none;
    }
  }
  .btn-outline-primary {
    color: $header-color;
  }
  .hr-no-top {
    border: none;
  }
  .box-categories, .box-linkgroup {
    .dropdown .collapse {
       background: $footer-bg-color;
     }
   }
}
.btn-animated {
  .btn-outline-primary:hover {
    color: $header-color;
  }
}
.dropdown-item {
  .btn-link {
    color: $dropdown-link-color;
  }
}
.account-icon-dropdown {
  .dropdown-footer {
    background-color: $bg-main-ligther;
    color: $header-color;
  }
}
header {
  @include media-breakpoint-up(lg) {
    border-bottom: 4px solid $primary;
  }
}

#footer {
  .form-control {
    background-color: $footer-bg-color;
    color: $footer-color;
    &::placeholder {
      color: $footer-color;
    }
  }
  .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) {
    label {
      background: $footer-bg-color;
      color: $footer-color;
    }
  }
  a {
    color: $footer-color;
    &:hover:not(.btn) {
      color: $primary;
    }
  }
  .productlist-filter-headline {
    color: $footer-color;
  }
  .newsletter-footer-heading {
    color: $footer-color;
  }
}

Viele Grüße
Michael

Hallo @sbendel

Ich nehme an du nutzt schon den Theme Editor? Du müsstest also in der _variables.scss folgende Zeile abändern:

@import '../../../../NOVA/themes/clear/sass/variables';

zu

@import '../../../../NOVA/themes/midnight/sass/variables';

Dazu noch die entsprechenden CSS-Anpassung. Also füge in die my-nova_crit.scss folgendes ein:

#header-top-bar {
  float: right;
  position: sticky;
  top: 0;
  &:not(.is-fullwidth) {
    /* max-width of container-fluid-xl + padding of container-fluid */
    @media (min-width: 103.125rem + 2rem) {
      margin-right: calc((100vw - 103.125rem - 2rem) / 2);
    }
  }
}
.is-checkout {
  .logo-wrapper {
    float: left;
  }
}
.toggler-logo-wrapper {
  float: none;
}

und in die my-nova.scss folgendes:

#footer, header, .fixed-search {
  .form-control {
    border-color: $primary;
  }
}

#footer, header {
  .table-striped {
    color: $header-color;
    tbody tr:nth-of-type(odd) {
      background-color: $bg-main;
    }
    tbody tr:nth-of-type(even) {
      background-color: $bg-main-ligther;
    }
    td {
      border: none;
    }
  }
  .btn-outline-primary {
    color: $header-color;
  }
  .hr-no-top {
    border: none;
  }
  .box-categories, .box-linkgroup {
    .dropdown .collapse {
       background: $footer-bg-color;
     }
   }
}
.btn-animated {
  .btn-outline-primary:hover {
    color: $header-color;
  }
}
.dropdown-item {
  .btn-link {
    color: $dropdown-link-color;
  }
}
.account-icon-dropdown {
  .dropdown-footer {
    background-color: $bg-main-ligther;
    color: $header-color;
  }
}
header {
  @include media-breakpoint-up(lg) {
    border-bottom: 4px solid $primary;
  }
}

#footer {
  .form-control {
    background-color: $footer-bg-color;
    color: $footer-color;
    &::placeholder {
      color: $footer-color;
    }
  }
  .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) {
    label {
      background: $footer-bg-color;
      color: $footer-color;
    }
  }
  a {
    color: $footer-color;
    &:hover:not(.btn) {
      color: $primary;
    }
  }
  .productlist-filter-headline {
    color: $footer-color;
  }
  .newsletter-footer-heading {
    color: $footer-color;
  }
}

Viele Grüße
Michael

Vielen Dank
Sorry dass ich jetzt erst reagiere. Liege zurzeit leider im Krankenhaus und hatte bisher keine Möglichkeit für einen Zugang.
Sobald ich wieder draußen bin, werde ich Deine Infos so ausprobieren.
Viele Grüße
Sigi

 

[Odintyr]

Bei mir hat es leider nicht funktioniert. Wird immer noch Clear angezeigt.

 

[sbendel]

Vielen Dank
Sorry dass ich jetzt erst reagiere. Liege zurzeit leider im Krankenhaus und hatte bisher keine Möglichkeit für einen Zugang.
Sobald ich wieder draußen bin, werde ich Deine Infos so ausprobieren.
Viele Grüße
Sigi

So, nun bin ich wieder raus. Hat gut funktioniert bei mir.
Vielen Dank nochmals
Gruß an alle
Sigi

 

[sbendel]

Bei mir hat es leider nicht funktioniert. Wird immer noch Clear angezeigt.

Hi,
kann es sein, dass Du nach der Umstellung das Theme nicht kompiliert hast? Hatte ich zuerst auch vergessen und nichts hatte sich getan.
Dann viel mir das auf. Ich habe das Theme nach der Änderung mit dem Theme Editor kompiliert und dann funktionierte es sofort, nach dem löschen des Browser Cache und erneutem Aufruf der Website.
Gruß
Sigi

 

[Odintyr]

Hi,
kann es sein, dass Du nach der Umstellung das Theme nicht kompiliert hast? Hatte ich zuerst auch vergessen und nichts hatte sich getan.
Dann viel mir das auf. Ich habe das Theme nach der Änderung mit dem Theme Editor kompiliert und dann funktionierte es sofort, nach dem löschen des Browser Cache und erneutem Aufruf der Website.
Gruß
Sigi

Das kann gut sein, leider kann ich aber auch nicht kompilieren da der Theme editor kein Code anzeigt. Muss erstmal schauen woran das liegt.

 

[Odintyr]

Hi,
kann es sein, dass Du nach der Umstellung das Theme nicht kompiliert hast? Hatte ich zuerst auch vergessen und nichts hatte sich getan.
Dann viel mir das auf. Ich habe das Theme nach der Änderung mit dem Theme Editor kompiliert und dann funktionierte es sofort, nach dem löschen des Browser Cache und erneutem Aufruf der Website.
Gruß
Sigi

Ich versuche nun schon seit 2 Tagen den Theme editor zum laufen zu bekommen. Im dropdown werden mir themes angezeigt und in der rechten Spalte sind auch einige Eintrage. Wenn ich allerdings auf Kompilieren klicke dann kommt ne Fehlermeldung das die Ordner nicht gefunden werden können.

Dieses Proplem hattest du nicht oder?

 

[timkes]

Hi, ich hoffe ich bin hier richtig... Sry falls nicht, bin neu seit dem Wochenende.

Ich benutze das Theme NOVA und habe auch den Theme-Editor installiert und möchte die Hauptfarben in der Navigation und in allen anderen Bereichen ändern. Also hover und active. Den hover-Effekt habe ich hinbekommen, aber nur bei der Schrift. Der Streifen darunter und immer noch in der Standardfarbe gelb, sowie alles auf den Unterseiten im Shop. Muss ich noch in andere Dateien als in die _variables.scss?
Dank schon mal.

 

[Uwe_M]

Hi, ich hoffe ich bin hier richtig... Sry falls nicht, bin neu seit dem Wochenende.

Ich benutze das Theme NOVA und habe auch den Theme-Editor installiert und möchte die Hauptfarben in der Navigation und in allen anderen Bereichen ändern. Also hover und active. Den hover-Effekt habe ich hinbekommen, aber nur bei der Schrift. Der Streifen darunter und immer noch in der Standardfarbe gelb, sowie alles auf den Unterseiten im Shop. Muss ich noch in andere Dateien als in die _variables.scss?
Dank schon mal.

Stehe aktuell vor genau dem gleichen Problem.
Auch den Hover Effekt habe ich nicht finden können.

Über Element suchen bich ich schon fast am verzweiflen.

 

[TheBusiness2!]

Hallo @sbendel

Ich nehme an du nutzt schon den Theme Editor? Du müsstest also in der _variables.scss folgende Zeile abändern:

@import '../../../../NOVA/themes/clear/sass/variables';

zu

@import '../../../../NOVA/themes/midnight/sass/variables';

Dazu noch die entsprechenden CSS-Anpassung. Also füge in die my-nova_crit.scss folgendes ein:

#header-top-bar {
  float: right;
  position: sticky;
  top: 0;
  &:not(.is-fullwidth) {
    /* max-width of container-fluid-xl + padding of container-fluid */
    @media (min-width: 103.125rem + 2rem) {
      margin-right: calc((100vw - 103.125rem - 2rem) / 2);
    }
  }
}
.is-checkout {
  .logo-wrapper {
    float: left;
  }
}
.toggler-logo-wrapper {
  float: none;
}

und in die my-nova.scss folgendes:

#footer, header, .fixed-search {
  .form-control {
    border-color: $primary;
  }
}

#footer, header {
  .table-striped {
    color: $header-color;
    tbody tr:nth-of-type(odd) {
      background-color: $bg-main;
    }
    tbody tr:nth-of-type(even) {
      background-color: $bg-main-ligther;
    }
    td {
      border: none;
    }
  }
  .btn-outline-primary {
    color: $header-color;
  }
  .hr-no-top {
    border: none;
  }
  .box-categories, .box-linkgroup {
    .dropdown .collapse {
       background: $footer-bg-color;
     }
   }
}
.btn-animated {
  .btn-outline-primary:hover {
    color: $header-color;
  }
}
.dropdown-item {
  .btn-link {
    color: $dropdown-link-color;
  }
}
.account-icon-dropdown {
  .dropdown-footer {
    background-color: $bg-main-ligther;
    color: $header-color;
  }
}
header {
  @include media-breakpoint-up(lg) {
    border-bottom: 4px solid $primary;
  }
}

#footer {
  .form-control {
    background-color: $footer-bg-color;
    color: $footer-color;
    &::placeholder {
      color: $footer-color;
    }
  }
  .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) {
    label {
      background: $footer-bg-color;
      color: $footer-color;
    }
  }
  a {
    color: $footer-color;
    &:hover:not(.btn) {
      color: $primary;
    }
  }
  .productlist-filter-headline {
    color: $footer-color;
  }
  .newsletter-footer-heading {
    color: $footer-color;
  }
}

Viele Grüße
Michael

Guten Morgen @MHillmann, entschuldigen Sie, dass ich den Thread wieder ins Leben rufe.
Ich nutze aktuell das Template NOVA-Clear und würde dieses auch gerne in Midnight ändern.

Meine Onlineshop version: >5.1.3
Die Onlineshop-Version des Templates : 5.1.0-5.2.0
Hoster: IONOS
Anleitung an die ich mich zusätzlich gerichtet habe
Der Ort, an dem ich das Child Template bezogen habe

Soweit alles gut, mir war es möglich ein Child Theme für das Clear anzulegen, auch war es mir möglich Schritt 1 und 2 Ihrer Anleitung umzusetzen jedoch wirft mir der Compiler sobald ich den Code von Schritt 3 in die my-nova.scss eingefügt.

Undefined mixin fas: /homepages/5/d916205315/htdocs/templates/JTLTheme/themes/my-nova/sass/../../../../NOVA/themes/clear/sass/../../base/sass/components/_breadcrumbs.scss on line 32, at column 3 Call Stack: #0 import /homepages/5/d916205315/htdocs/templates/JTLTheme/themes/my-nova/sass/../../../../NOVA/themes/clear/sass/../../base/sass/components/_breadcrumbs.scss /homepages/5/d916205315/htdocs/templates/JTLTheme/themes/my-nova/sass/../../../../NOVA/themes/clear/sass/../../base/sass/components/all.scss on line 6 #1 import /homepages/5/d916205315/htdocs/templates/JTLTheme/themes/my-nova/sass/../../../../NOVA/themes/clear/sass/../../base/sass/components/all.scss /homepages/5/d916205315/htdocs/templates/JTLTheme/themes/my-nova/sass/../../../../NOVA/themes/clear/sass/_allstyles.scss on line 35 #2 import /homepages/5/d916205315/htdocs/templates/JTLTheme/themes/my-nova/sass/../../../../NOVA/themes/clear/sass/_allstyles.scss (unknown file) on line 15







Könnten Sie/Ihr mir bei dem Problem weiterhelfen?

Vielen Dank

 

[JohnFrea]

@MHillmann ich möchte auch ein NovaChild auf Basis von midnight erstellen und bekomme das ebenfalls nicht hin. Könnt Ihr als JTL das nicht mal bitte für die drei Themes fertig machen und zum Download bereitstellen?

Früher war das alles viel einfach. Custom Theme im JTL Standard Template auswählen, ein wenige CSS Frickeln, was man noch hin bekommt.

Wieso habt Ihr das Custom Theme aus dem NOVA raus genommen und erzwingt für kleinste CSS Änderungen ein Child Template, daß man sich dann noch selbst zusammen basteln muß?!?

Von "ein Anwender kann sich selbst Farben ein wenig anpassen" sind wir inzwischen so weit entfernt wie niemals zu vor

 

[MHillmann]

Hallo @JohnFrea

ab Shop 5.2.0 (gerade in QA) kann man in den Template-Einstellungen CSS hinterlegen. https://issues.jtl-software.de/issues/SHOP-5954
Für ein paar Grundfarben wird es auch Einstellungen geben. Damit braucht man dann wie du sagst auch kein Child-Template mehr für kleine CSS-Änderungen.

Bzgl. Midnight im Child-Template suchen wir nach Lösungen das zu verbessern, das ist zu kompliziert ja. Auch beim kritischen CSS muss man mit Child-Templates aufpassen: https://issues.jtl-software.de/issues/SHOP-6051
Wir sind also dran

Edit: https://issues.jtl-software.de/issues/SHOP-6926

Viele Grüße
Michael

 

[JohnFrea]

@MHillmann weil ich wirklich überhaupt nicht weiter kam, habe ich mir den kompletten Ordner midnight kopiert und und in "MeinTheme" umbenannt. Dazu auch alle Dateinamen in dem Ordner, die "midnight" im Dateinamen hatte durch "MeinTheme" ersetzt und dann in der template.xml analog zu midnight eine Auswahl MeinTheme eingefügt.

Nachteil: Wenn es ein Shop Update gab, welches die template.xml überschrieb, mußte ich nachziehen, damit ich mein eigenes Theme nutzen konnte.

Wenn ich Dich richtig verstehe, reicht das aber nicht, weil von Euch im Rahmen eines Updates auch Dateien wie z.B. midnight_crit.scss verändert werden und dann auch wieder Nachziehen nötig ist?

Ohje...

 

[froot]

also ich stehe komplett auf der Leitung bei der Erstellung von Child-Templates und vor allem Themes.
ich hab nach bestem Wissen diese Anleitung befolgt https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_templates/eigenes_template.html
und nur die wichtigsten Dateien in mein custom Template bzw. Theme gegeben.

Da es sich um ein NOVA- Child-Template handelt, verwende ich keine .less Datei sondern wie beschrieben den Ordner /sass/ mit den erforderlichen scss-Dateien

in dem demo Child template fürs NOVA https://gitlab.com/jtl-software/jtl-shop/child-templates/ ist auch ein demo Theme das ich drin gelassen hab.
Wenn ich es, bis auf die paar Änderungen in der Anleitung, so wie es ist übernehme, funktioniert es so weit ich weiß, aber ich schaffe es einfach nicht das Theme umzubenennen oder ein neues Theme zu erstellen das ich dann in den Template-Einstellungen auswählen würde.
Ich kann nach wie vor nur clear, midnight und blackline auswählen als wäre es das NOVA Parent-Template

Und wenn ich irgendetwas ändere, bekomme ich Fehlermeldungen, dass irgendwas im sass-Ordner falsch ist.

Was mach ich falsch? Wo ist der Knoten?

In meinem Custom-Theme-Ordner liegen

my-nova_crit.css
my-nova.css
my-nova.css.map

und im sass Ordner

_variables.scss
my-nova_crit.scss
my-nova.scss

Ist das so richtig? Verstehe das leider gar nicht und es wirft viele Fragen auf…

Muss ich diese Dateien in mein Theme-Namen oder in mein Child-Template-Namen umbenennen?
Muss ich alle Referenzen darin auch entsprechend umbenennen?
Was ist die my-nova.css.map Datei?
Ich nehme allerdings an, dass ich hier nichts IN den Dateien ändern muss, weil das eh durch das Kompilieren passiert, aber muss ich SIE umbenennen?

Und was muss im base-Ordner liegen?

Und in der template.xml die ich vom Parent-Template übernommen hab steht ja noch mehr als in der Anleitung die ich verwendet habe, nämlich der <Settings> tag und der <Minify> tag. Ist der notwendig damit es funktioniert?

So viel Fragen, aber es ist echt ziemlich kompliziert wenn man es noch nie gemacht hat.

Ich wäre euch für eure Hilfe sehr dankbar! Ich würde dieses Tool gerne richtig verwenden und wir müssen am Montag online gehen!

Danke