Neu Shop Logo Größe im Nova / JTL 5

[MarkusF]

Guten Tag liebe JTL'er!

ich möchte im Nova Template das Shop Logo etwas vergrößern. Folgendes habe ich dazu gemacht:

- Child Template angelegt (NOVAChild 5.0.0-rc.3 ‐ 5.1.0)
- Dort in die custom.css folgendes notiert:

@media (min-width: 992px) {header .navbar-brand img {
height: 5.8rem;
}}

Leider hat das keinerlei Auswirkungen. (2 verschiedene Browser probiert)

Ich habe dann das Plugin "JTL Theme Editor" installiert und damit in der my-nova.scss des Childs den obigen Zusatz eingefügt und das Theme kompiliert.

Leider hat das auch keine Auswirkungen (zumindest konnte ich aber in der _variables.scss die Primärfarbe ändern).

Was mache ich falsch?

Ich habe etwas von einem JTL Header Plugin gelesen... wo bekommt man das?

Danke für die Hilfe im Voraus!

Viele Grüße, Markus

 

[MHillmann]

Hallo @MarkusF

schau mal bzgl des Header Plugins in diesem Thread vorbei: https://forum.jtl-software.de/threads/nova-template-kopf-gestaltung.139341/page-3#post-794005

bzgl. der Logogröße diese Antwort:

https://forum.jtl-software.de/threads/nova-template-kopf-gestaltung.139341/page-4#post-803513

Viele Grüße
Michael

 

[MarkusF]

Hallo Michael,
das hat geholfen - vielen herzlichen Dank! 👍👍👍

Ein Hintergrundbild kann man in den Header nicht (einfach) einfügen? Oder doch?
Viele Grüße, Markus

 

[ARA-Marketing]

doch per child-template und custom.css einbindung des backgrounds...

(wobei die Frage ist, was ist einfach 😉 )

VG
Eas

 

[MarkusF]

Hallo Eas,
danke für den Tip, es ist mir fast gelungen.

Mit folgendem Code konnte ich das Hintergrundbild einbinden:

.sticky-top {
position: sticky;
top: 0;
z-index: 1020;
background-image: url(https://www.meineURL.de/jtl/bilder/intern/banner_2a.jpg);
background-size: cover;
}

Nun ist da noch eine Zeile drüber mit News/Kontakt. Ich kann hier zwar auch ein Hintergrundbild hinterlegen mit

#header-top-bar, header {
background-image: url(https://www.meineURL.de/jtl/bilder/intern/banner_1a.jpg);
background-size: cover;
}

aber eigentlich möchte ich ein Hintergrund-Bild, das über den gesamten Header Bereich geht. Ist das möglich und wenn ja, wie?

Herzlichen Dank, Markus

 

[ARA-Marketing]

Guten Morgen..... also, wenn du es wie hier meinst... http://ara515.ara-test.de/

dann ist das der "header".

heißt dann also hier in dem Fall so: header { background-image: linear-gradient( cornflowerblue 0%, wheat 50%);}

Beste Grüße
Eas

 

[MarkusF]

Hallo Eas, oben die graue Zeile mit der Sprache und der Währung soll auch das Hintergrundbild bekommen.
Also das Bild soll über beide Bereiche gehen. Ist das möglich?

Ich habe bereits versucht, das Bild entsprechend zu teilen und jedem Bereich einen Abschnitt zu geben, aber mit "background-size: cover;" werden die unterschiedlich skaliert und passen dann nicht mehr zusammen...

Liebe Grüße, Markus

 

[MHillmann]

Hallo,
das ist leider nicht so einfach zu machen wenn die <div id=" header-top-bar"> außerhalb des headers liegt.

Wenn du das Header Plugin mit der Einstellung: "Anzeige beim Scrollen": "Menü" nutzt, liegt die div mit im header und du könntest wie Eas sagt dem header das background image geben. Zusätzlich musst du eventuell noch folgendes einfügen:

#header-top-bar {
    background-color: transparent;
}

Viele Grüße
Michael

 

[ARA-Marketing]

ähm.... also... letztmalig diesbezüglich: #header-top-bar {background-color: transparent;}

Ich werde jetzt keinen CSS-Kurs hier geben.... das ginge schon zu weit..... oder man muss ein paar Euro dafür dann ausgeben.
Bitte um Verständnis.

Vielleicht schaust du hier mal: https://www.css4you.de/

VG
Eas

 

[MarkusF]

Hallo Eas,

danke Dir!

Ich werde jetzt keinen CSS-Kurs hier geben.... das ginge schon zu weit

Das ist schon klar und das war auch nicht mein Ziel. 🙂

VG Markus

 

[MarkusF]

Hallo,
das ist leider nicht so einfach zu machen wenn die <div id=" header-top-bar"> außerhalb des headers liegt.

Wenn du das Header Plugin mit der Einstellung: "Anzeige beim Scrollen": "Menü" nutzt, liegt die div mit im header und du könntest wie Eas sagt dem header das background image geben. Zusätzlich musst du eventuell noch folgendes einfügen:

#header-top-bar {
    background-color: transparent;
}

Viele Grüße
Michael

Danke Dir, Michael!
VG Markus